Creare ed aggiungere una Favicon

Scritto in: Guida webmaster

Una piccola operazione che ti consente di migliorare il tuo sito è l’inserimento di una Favicon.
Favicon è la contrazione del termine favorites icon (icona preferita). Questo termine indica un’icona associata ad una determinata pagina web.

Solitamente la favicon è una piccola immagine, spesso un logo, inerente ai contenuti del sito alla quale è associata.

L’immagine impostata come favicon viene visualizzata alla sinistra dell’URL nella barra degli indirizzi di un browser, nel momento in cui si naviga un sito che ne è dotato. La medesima icona è inoltre visualizzata nel menu dei preferiti di un browser.

Per dotare il tuo sito di una favicon devi innanzitutto procedere alla creazione e al salvataggio dell’icona (file .ico), tramite uno dei numerosi siti che offrono questo servizio, come ad esempio favicon.cc Generator.

Il tag html per specificare la posizione del file, deve essere inserito nella sezione head del codice html del sito, con la seguente sintassi:

<link rel="shortcut icon" href="<percorso>/favicon.ico" />

Se carichi una favicon per la prima volta, oppure sostituisci quella già esistente, per visualizzarla nel browser devi cancellare la cache, in quanto non è sufficiente eseguire un refresh della pagina. Per far visualizzare la favicon in tutte le pagine dovrai riportare la stringa finale in tutte le pagine html.

Come aggiungere una favicon ai siti web creati con Sitonline

Una volta creato il file favicon.ico devi procedere come segue: Clicca su pannello di controllo –> modifica sito –> modifica HTML –> inserisci un file Carica nella galleria il file favicon_esempio.ico precedentemente creato e selezionalo cliccando il link scelgo questo. Nella finestra che compare copia il codice che viene riportato (es. {UPLOAD_PATH}favicon_esempio.ico ) e clicca sul bottone salva. Come ultima operazione devi tornare nella pagina di modifica html ed incollare i seguenti codici al posto della stringa {FAVICON}:

<link rel="icon" href="{UPLOAD_PATH}favicon.ico" type="image/x-icon" /> 
<link rel="shortcut icon" href="{UPLOAD_PATH}favicon.ico" type="image/x-icon" />

Nelle stringhe dovrai sostituire alla porzione {UPLOAD_PATH}favicon.ico quella da te precedentemente salvata, ovvero {UPLOAD_PATH}favicon_esempio.ico.
Il risultato finale sarebbe quindi:

<link rel="icon" href="{UPLOAD_PATH}favicon_esempio.ico" type="image/x-icon" /> 
<link rel="shortcut icon" href="{UPLOAD_PATH}favicon_esempio.ico" type="image/x-icon" />

Per apportare tale modifica in tutte le pagine, dovrai incollare la stringa finale nella finestra HEAD presente nella sezione HEAD/BODY di Modifica HTML.

Se vuoi maggiori dettagli su questa sezione visita la pagina Modifica HEAD e BODY