Creare on-line la favicon.ico per il nostro sito

Avete mai sentito parlare delle favicon?
Sapete cosa sono, di cosa si stà parlando?

La parola favicon è un termine inglese che viene utilizzato per indicare un’icona che sia una sorta di piccolo logo per un sito web, andiamo a ritrovare questa icona giusto prima l’indicazione dell’URL delle pagine web, a sinistra nella barra degli indirizzi ma anche nel menù dei segnalibri o preferiti di un browser oltre che nell’intestazione delle schede aperte nel navigatore.

Le dimensioni di queste immagini sono 16×16 o 32×32 ma possono essere anche 48×48 pixel se .ico, come alternativa al formato .ico si possono usare anche i formati .gif e .png di qualsiasi dimensione.

Le favicon sono nate diversi anni fa come funzionalità aggiuntiva per Internet Explorer il noto browser web della Microsoft nella ormai vecchia e superata versione 5, questa novità è stata cosi ben accolta dagli internauti che ben presto i browser antagonisti come Firefox, Chrome, Opera e Safari si sono dovuti mettere al passo e integrare anche nei loro prodotti questa caratteristica.

Come impostare una favicon

Per impostare una favicon su una pagina web si può procedere in diversi modi, il primo consiste nel mettere il proprio logo con il nome favicon.ico nella directory principale del server, i browser web la riconoscono e utilizzano automaticamente, la seconda procedura consiste nella’utilizzare un apposito tag HTML

 <link rel="icon" href="http://[percorso]/favicon.ico" />

va messo nella sezione head di un file HTML con sintassi, come potete vedere dall’esempio sopra in questo tag andate ad impostare il percorso nel server, la posizione della favicon, in modo da poterla mettere non solo alla radice del server ma in qualunque cartella in esso contenuto.

Se volete utilizzare delle favicon animate nel formato .gif o immagini .png il tag HTML da usare sarà:

per le immagini .gif

 <link rel="icon" href="http://[Url sito]/favicon.gif" type="image/gif" />

o per le immagini .png

<link rel="icon" href="http://[Url sito]/favicon.png" type="image/png" />

Qui sotto potete osservare uno schema riassuntivo sulle compatibilità e quindi sul supporto dei vari formati di immagine e i principali browser web utilizzati dagli internauti.

Browser	Supporto nativo
	ICO	PNG	GIF	GIF animata	JPEG	APNG	SVG
Chrome	Sì	Sì	Sì	Sì	Sì	No	No
Firefox	Sì	Sì	Sì	Sì	Sì	Sì	No
Internet Explorer	Sì	Sì	Sì	No	No	No	No
Opera	Sì	Sì	Sì	Sì	Sì	Sì	Sì
Safari	Sì	Sì	Sì	No	Sì	No	No

Da notare come il browser Opera sia l’unico che supporta tutti le varie tipologie di favicon

Come creiamo una favicon personalizzata?

Abbiamo visto cosa sono le favicon e come si possono utilizzare, a questo punto andiamo a vedere come sia possibile realizzarne una personalizzata, per lo scopo utilizzeremo un’applicazione web di toolset.mrwebmaster.it, con il vostro browser web andate ad aprire la pagina “Crea la tua favicon.ico”

In questa pagina trovate un articolo informativo sulle favicon e sulle modalità di utilizzo ma principalmente trovate un ottimo editor online da utilizzare gratuitamente e senza nemmeno la necessità di dover fare una registrazione come utente del sito.

Come potete vedere dallo screenshot sopra avete a disposizione un area di “disegno” quadrata suddivisa in 256 settori corrispondenti ad ogni pixel dell’immagine, evidentemente una favicon 16×16 pixel.

Una particolarità importante di questo strumento è che nella creazione della vostra favicon potete partire da zero ma anche importare un’immagine da utilizzare come base di lavoro.

Tra i vari strumenti utilizzabili avete anche a disposizione una matita (1) con la quale andare a creare nell’area di disegno la favicon, matita alla quale potete dare diversi colori da selezionare nel riquadro che trovate al suo fianco (2), trovate anche lo strumento Picker (3) molto utile nel caso in cui si stia utilizzando un’immagine come base del lavoro e serve per “prelevare” o (scoprire) il colore di una porzione dell’immagine, se sbagliate non vi preoccupate potete anche contare sullo strumento gomma (4).

Per utilizzare un’immagine di base per la creazione della vostra favicon dovete andare a cliccare sul pulsante “importa Immagine“, si apre una finestra dalla quale andare a caricare l’immagine nell’editor che apparirà nell’area di disegno, nella parte bassa dell’editor potrete vedere l’anteprima della favicon in una pseudo barra degli indirizzi del browser.

L’immagine da utilizzare deve essere nel formato .jpg, .png o .gif e non deve pesare più di 250 Kb, ancora, non più grande di 600×600 pixel.

Quando sarete soddisfatti del risultato potete cliccare sul pulsante “Scarica la favicon” in modo da scaricare sul vostro computer la vostra nuova favicon personalizzata come favicon.ico.

Potrebbe interessarti come creare un logo per un sito Web

Salvatore Sciacca © riproduzione riservata