Come creare e aggiungere una favicon

Fai una domanda
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

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">

Foto: © alexmillos - 123RF.com
Jean-François Pillou

I nostri contenuti sono creati in collaborazione con esperti di high-tech, sotto la direzione di Jean-François Pillou, fondatore di CCM.net e digital director del Gruppo Figaro. CCM è un sito di high-tech leader a livello internazionale ed è disponibile in 11 lingue.

Scopri di più sul team CCM

Potrebbe anche interessarti