Come aggiungere favicon al sito web


introduzione

La maggior parte dei siti web in linea hanno i propri loghi specifici e nella maggior parte dei casi vengono utilizzati come favicons del sito web . Se non sapete quale favicon è, qui è un esempio visivo:

Avere una favicon sul tuo sito web è ovviamente molto meglio di vedere un’icona di documento vuoto nel browser, inoltre, il tuo sito web sarà molto più professionale.

In questo tutorial, impareremo alcuni semplici modi per aggiungere un favicon al tuo sito web.

Sommario

Quello che ti serve
Opzione 1 – Consentire al browser di ottenere automaticamente la tua favicon (non è necessario cambiare il codice del sito)
Opzione 2 – Utilizzando un’immagine regolare e specificandola nel codice del sito
Conclusione

Quello che ti serve

Prima di iniziare questa guida avrai bisogno di:

Un’immagine quadrata che vuoi aggiungere come favicon al tuo sito web
Accesso ai file del tuo sito web

Opzione 1 – Consentire al browser di ottenere automaticamente la tua favicon (non è necessario cambiare il codice del sito)

La maggior parte dei browser rileva automaticamente il file favicon.ico situato nella directory del tuo sito web e lo imposta come favicon del tuo sito web. Questo è il modo più semplice per aggiungere un favicon al tuo sito.

Innanzitutto, è necessario disporre di un’immagine quadrata dimensionata in qualsiasi formato di immagine (jpg, bmp, gif, png) affinché possa apparire normalmente nei browser. Naturalmente, anche le immagini non quadrate funzioneranno, tuttavia, queste icone potrebbero non sembrare professionali.
Questa opzione richiede la conversione dell’immagine in formato .ico . Ci sono molti strumenti online per fare proprio questo, tuttavia, in questo tutorial, useremo convertico.com .
All’inizio di convertico.com vedrai un pulsante per selezionare e caricare il tuo file di immagine.
Convertire in ico
Fai clic sul pulsante e seleziona l’immagine che ti piace e subito dopo aver proceduto, l’immagine verrà convertita automaticamente e apparirà sul lato destro del sito per il download:
Scarica ico
Scarica la tua immagine cliccando sul pulsante freccia Scarica e salva il file .ico ovunque sul tuo computer.
Ora rinomini il file in favicon.ico , perché il browser riconoscerà automaticamente questo nome.
L’ultimo passo è caricare questo file nella directory host in cui si trovano i file del tuo sito web. Per il caricamento, è possibile utilizzare File Manager o un client FTP . Negli host di Linux la directory è di solito public_html tuttavia, può differire in base alla propria configurazione o all’host che ospita il sito web. In questo caso, consultare meglio il provider di hosting.

Quando il file favicon.ico viene caricato insieme al resto dei file del tuo sito web, il browser lo raccoglierà automaticamente e mostrerà l’immagine nel browser.

IMPORTANTE: se non è possibile visualizzare la nuova favicon, deselezionare la cache del browser e riavviarla.

Opzione 2 – Utilizzando un’immagine regolare e specificandola nel codice del sito

Se ritieni che la conversione dell’immagine in un altro formato sia troppo grossa, puoi sicuramente utilizzare un’immagine regolare come favicon del tuo sito web.

Innanzitutto, è necessario disporre di un’immagine quadrata dimensionata in qualsiasi formato di immagine (jpg, bmp, gif, png) affinché possa apparire normalmente nei browser.

Naturalmente, anche le immagini non quadrate funzioneranno, tuttavia, queste icone potrebbero non sembrare professionali.
Carica questo file nella directory host in cui si trovano i file del tuo sito web. Negli host di Linux la directory è di solito public_html tuttavia, può differire in base alla propria configurazione o all’host che ospita il sito web. In questo caso, consultare meglio il provider di hosting.
Ora è necessario specificare l’immagine che si desidera utilizzare come favicon nel codice del tuo sito web. Aggiungi questa riga tra i <head></head>tag nel codice del tuo sito web:
<link rel=”shortcut icon” type=”image/png” href=”/favicon.png”/>

IMPORTANTE: dove type=”image/png”modificare la png parte del formato dell’immagine e cambiare favicon.png il nome del file.

Il codice HTML apparirà simile a questo:

Esempio html per favicon

La tua immagine dovrebbe ora essere mostrata come favicon del sito web.

IMPORTANTE: se non è possibile visualizzare la nuova favicon, deselezionare la cache del browser e riavviarla.

Conclusione

Hai imparato 2 modi per aggiungere un favicon sul tuo sito web. Questo è un piccolo lavoro nel processo di sviluppo del tuo sito web, ma è abbastanza essenziale per rendere il tuo sito un aspetto positivo ai visitatori.


Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*