andrea-caponera-design

imgfavicon1

Creare una favicon

Come creare una favicon in pochi semplici passi.



Favicon è un termine inglese contrazione di favorite icon. indica un'icona associata a una pagina web, di solito la favicon è un’immagine piccola che spesso rappresenta il proprio logo. La favicon viene visualizzata alla sinistra dell'URL nella barra degli indirizzi dei browser (Firefox, Mozilla, Opera, Safari, Chrome e Konqueror etc.).

L'icona è inoltre visualizzata nel menu dei preferiti di un browser, nelle touch-icon dei vari sistemi operativi degli smartphone.
Inizialmente la favicon era posta nella directory del web-server con il nome favicon.ico e usata direttamente da Internet Explorer. Questo metodo rimane funzionante, ma è stato integrato un apposito tag HTML per specificare la posizione del file. Il tag viene posto nella sezione HEAD di una pagina HTML come in questo esempio:

favicon

Con questo metodo ogni immagine delle dimensioni (16×16 o 32×32, se .ico) può essere usata come favicon. Si possono anche usare altri formati come .GIF e .PNG senza limite di dimensione.
Sfruttando il formato .gif è possibile creare favicon animate, ma alcuni browser non le supportano. Per usare i formati GIF o PNG i tag necessari sono:

favicon

Può accadere che caricando per la prima volta una favicon sul server, non si riesca a visualizzarla nell’immediato, in quel caso va cancellata la cache.

Elenco dei browser che supportano le favicon ed i vari formati.

GOOGLE CHROME - FORMATO FAVICON SUPPORTATI: ICO - PNG - GIF - GIF animato - JPEG.

INTERNET EXPLORER - FORMATO FAVICON SUPPORTATI: ICO – PNG – GIF.

MOZILLA FIREFOX FORMATO FAVICON SUPPORTATI: ICO – PNG – GIF - GIF animato – JPEG – APNG – SVG.

OPERA FORMATO - FAVICON SUPPORTATI: ICO – PNG – GIF - GIF animato – JPEG – APNG.

SAFARI - FORMATI FAVICON SUPPORTATI: ICO – PNG - GIF – JPEG.




Personalmente per creare una favicon vi consiglio un’ altro metodo più veloce e completo per inserire diverse dimensioni, otterrete molteplici formati da utilizzare per dimensioni e applicazioni. Dovrete utilizzare il sito favicon-generator.org oppure in alternativa digitalagencyrankings.com

Il primo passo da compiere è caricare una foto della vostra futura favicon esclusivamente nei formati PNG – JPG – GIF. Una volta caricata andrete a spuntare la voce “Generate icons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps”, mantenendo la spunta attiva di default su le altre voci che troverete di seguito. Una volta creata la favicon scaricate e salvate tutti i vari formati nella directory principale del vostro server (livello index oppure livello pagina di destinazione), dopodiché copiate ed incollate nelle varie pagine HTML il codice generato come nell’esempio sottostante.

faviconlink

Avete appena creato in maniera semplice e veloce la vostra nuova favicon. Questo metodo vi permetterà di risparmiare tempo e fatica, vi troverete un elenco completo di tutte le dimensioni possibili di favicon.

Andrea Caponera Web Designer

Per scaricare l'articolo in PDF puoi registrarti sul mio sito oppure effettuare il Login

Oppure condividilo e scaricalo Articolo in PDF



Torna in Archivio