Come creare un favicon (logo URL) per il tuo sito web

Un favicon è un modo creativo e pratico per aggiungere un tocco visivo sottile alla presenza del tuo sito web. I favicon sono piccole immagini che i browser web usano nelle schede delle pagine e nelle barre degli indirizzi. Mostrano un logo o un'immagine associata al sito web che funge da identificatore visivo del marchio accanto al titolo o all'URL. I favicon sono particolarmente utili come identificatori di siti nella navigazione a schede perché lo spazio di testo disponibile per i titoli delle pagine diminuisce quasi a zero man mano che l'utente apre più schede.

Passaggio 1

Progetta l'icona che vuoi usare in un programma di fotoritocco o grafica. Puoi prendere un logo o un'immagine esistente associata al tuo sito o marchio e adattarla per rispettare gli standard dei favicon. I favicon usano sempre dimensioni quadrate e hanno una dimensione massima supportata di 256x256 pixel. Ritaglia e ridimensiona l'immagine per adattarla a un quadrato di 256x256 pixel se userai un programma per pacchetti di icone per supportare più dimensioni. Se farai solo una versione, usa una dimensione di 16x16 pixel.

Passaggio 2

Esporta la grafica dell'icona come file immagine PNG dal programma di grafica. PNG è il formato immagine standard W3C per i favicon. Alcuni browser possono visualizzare file JPG come favicon, ma lo standard non è ufficialmente supportato. Inoltre, i programmi per pacchetti di icone potrebbero non funzionare con immagini in altri formati. I favicon supportano anche file GIF e ICO.

Passaggio 3

Comprimi il file PNG esportato in un file ICO con un programma convertitore ICO. Un programma convertitore di icone processa un favicon PNG, lo formatta per diverse dimensioni di favicon ampiamente supportate e le incorpora in un singolo file. I file ICO forniscono favicon a risoluzione superiore a 16x16 pixel per i dispositivi che li supportano.

Passaggio 4

Accedi al tuo servizio di hosting web e carica il file PNG o ICO sul server multimediale del tuo sito web. Copia l'URL del file caricato; ne avrai bisogno per collegare il favicon al sito.

Passaggio 5

Apri il tuo programma di modifica del sito e aggiungi il seguente codice, modificato con l'URL del file favicon come indicato, alla sezione del tuo sito web.

Per file PNG: <link rel="icon" type="image/png" href="URL_DEL_TUO_FAVICON.png">

Per file ICO: <link rel="shortcut icon" href="URL_DEL_TUO_FAVICON.ico">

A meno che tu non stia usando un sito controllato da CMS o includa una sezione basata su file, dovrai aggiungere il codice a ogni pagina in cui vuoi che compaia l'icona. Il favicon apparirà dopo aver salvato e aggiornato le pagine del sito.

Suggerimento

Programmi di fotoritocco come Photoshop e Corel Draw funzionano bene per progettare e formattare l'icona. In alternativa, puoi usare programmi gratuiti come Paint.net e Pixlr.

Avvertenza

Alcuni browser associano automaticamente un file immagine situato nella directory /favicon come favicon; tuttavia, l'organizzazione W3C sconsiglia questa pratica perché non è uno standard universalmente supportato ed è contraria ai principi di architettura web. Inoltre, molti servizi di hosting web e sistemi CMS non permettono all'utente di posizionare contenuti multimediali fuori dalle directory dei file multimediali, rendendo questa pratica impossibile.