Le favicon sostituiscono l'icona del globo nella barra degli indirizzi.
Credito immagine: r0mu/iStock/Getty Images
Una favicon è un modo pratico e creativo per aggiungere un tocco visivo sottile alla presenza del tuo sito web. Le favicon sono piccole immagini che i browser Web utilizzano nelle schede delle pagine e nelle barre degli indirizzi. Visualizzano un logo o un'immagine associata al sito Web che funge da identificatore visivo del marchio accanto al titolo o all'URL. Le favicon sono identificatori di siti particolarmente utili nella navigazione a schede perché lo spazio di testo disponibile utilizzato per i titoli delle pagine si riduce quasi a zero man mano che l'utente apre più schede.
Passo 1
Progetta l'icona che desideri utilizzare in un programma di modifica di foto o grafica. Puoi prendere un logo o un'immagine esistente associata al tuo sito o marchio e adattarlo per aderire agli standard favicon. Le favicon utilizzano sempre dimensioni quadrate e hanno una dimensione massima supportata di 256x256 pixel. Ritaglia e ridimensiona l'immagine per adattarla a un quadrato di 256 per 256 pixel se utilizzerai un icon packer per supportare più dimensioni. Se hai intenzione di fare solo una versione, scegli una dimensione di 16 per 16 pixel.
Video del giorno
Passo 2
Esporta la grafica dell'icona come file immagine PNG dal programma di progettazione grafica. PNG è il formato immagine standard del W3C per le favicon. Alcuni browser possono visualizzare i file JPG come favicon, ma lo standard non è ufficialmente supportato. Inoltre, i programmi di icon packer potrebbero non funzionare con immagini in altri formati. Le favicon supportano anche i file GIF e ICO.
Passaggio 3
Comprimi il tuo file PNG esportato in un file ICO con un programma di conversione ICO. Un programma di conversione di icone elabora una favicon PNG, la formatta per diverse dimensioni di favicon ampiamente supportate e le incorpora in un unico file. I file ICO forniscono favicon a risoluzione più elevata rispetto ai pixel 16 per 16 per i dispositivi che li supportano.
Passaggio 4
Accedi al servizio di hosting del tuo sito web e carica il file PNG o ICO sul server multimediale del tuo sito web. Copia l'URL del file caricato; ti servirà per allegare la favicon al sito.
Passaggio 5
Apri il programma di editing del tuo sito e aggiungi il seguente codice, modificato con l'URL del file favicon come indicato, alla sezione del tuo sito web.
Per i file PNG:
Per i file ICO:
A meno che tu non stia utilizzando un sito controllato da CMS o includa una sezione basata su file, dovrai aggiungere il codice a ogni pagina in cui desideri includere l'icona. La favicon appare dopo aver salvato e aggiornato le pagine del sito.
Consiglio
I programmi di fotoritocco come Photoshop e Corel Draw funzionano bene per la progettazione e la formattazione dell'icona. In alternativa, puoi utilizzare programmi gratuiti come Paint.net e Pixlr.
Avvertimento
Alcuni browser associano automaticamente un file immagine che si trova nella directory /favicon come favicon; tuttavia, l'organizzazione W3C scoraggia questa pratica perché non è uno standard universalmente supportato ed è contrario ai principi dell'architettura Web. Inoltre, molti servizi di hosting Web e sistemi CMS non consentono all'utente di posizionare i contenuti multimediali al di fuori delle directory dei file multimediali, rendendo impossibile questa pratica.
