Come creare e aggiungere una favicon

Ultimo aggiornamento 6 settembre 2017 alle 08:45 da Antonello Ciccarello .

Alcuni siti web hanno un’icona sita a sinistra della barra degli indirizzi URL del browser. Questa icona, detta favicon, è realizzabile utilizzando diversi metodi. Eccone alcuni.

Come creare una favicon
Come creare una favicon animata o generare un file ICO
Come inserire una favicon nel proprio sito

Come creare una favicon

Software di disegno quali GIMP, Pixia o programmi specializzati come Icon Edit32 o IconWare possono essere utilizzati per creare un’icona favicon. In rete sono disponibili diversi siti web che consentono di trasformare un’immagine in favicon. Tra questi segnaliamo: Html Kit.com, Tool Dynamicdrive, Favicon CC, Generatore di Favicon e testo.

Per iniziare a creare un’immagine in .png o .gif, bisogna scegliere un’immagine che abbia o dimensioni pari a 16 x 16 o 32 x 32 (pixel). Per Internet Explorer, invece, è da preferire un’immagine .ico (rinominata BMP), di dimensione pari a 16 x 16 pixel.

Come creare una favicon animata o generare un file ICO

Su Html Kit.com sarà possibile non solo creare un file ICO ma anche animare la propria Favicon. Cliccare sul tasto Scegli File per scegliere l’immagine da convertire in Favicon. Successivamente cliccare sul tasto (blu) Generate favicon.ico:

Qui sarà possibile vedere le anteprime delle due versioni favicon create, una statica e l’altra animata. Sulla destra della schermata, invece, sarà possibile aggiungere del testo accanto all’immagine (per segnalare, in HTLM il tag dato alla pagina):

Fatto questo sotto entrambe le anteprime sarà possibile cliccare sul tasto Download Favicon Package per scaricare i file creati in formato ZIP, sul proprio computer. Dopo aver aperto il file, fare copia e incolla del file favicon.ico appena creato nel codice del proprio sito web. Da notare che se si scegliere l'opzione del file animata, nell’archivio ZIP, sarà presente un file extra contenente il file animato (animated_favion1.gif), anch'esso da copiare nel proprio sito web.

Come inserire una favicon nel proprio sito

Per mettere una favicon nel proprio sito web sarà necessario indicare il percorso tramite tag di collegamento trovati nell’header della pagina. Ecco un esempio che indica un’immagine PNG in codice HTLM:

<link rel="icon" type="image/png" href="/images/myfavicon.png" />

A seconda del formato immagine, cambierà anche il typedell’attributo aggiunto: PNG: image/png; GIFformat: image/gif; formato JPEG (estensioni jpeg o jpg): image/jpeg. Se invece si avrà una favicon che non rispetta gli standard, sarà l’attributo rel a cambiare, come nell’esempio qui sotto riportato:

<link rel="shortcut icon" type="image/x-icon" href="/images/icon_ie.ico" />

Per le icone animate (GIF), inserire il tag seguente:

<link rel="icon" href="/images/animated_favicon1.gif" type="image/gif">