Generatore di Favicon

Grazie a questo tool puoi creare, direttamente on-line e senza scaricare nulla sul tuo PC, un file favicon per il tuo sito. Puoi creare la tua favicon.ico partendo da zero (semplicemente utilizzando gli strumenti del nostro editor HTML5) oppure importando un'immagine JPG, GIF o PNG da utilizzare come base di partenza.
  • Crea nuova Favicon
  • Importa Immagine
  • Scarica la Favicon →
html5

L'editor di Favicon sfrutta la potenza di HTML5: per funzionare correttamente necessita di un browser aggiornato compatibile coi nuovi standard di markup.

Anteprima della Favicon

http://www.miosito.it

Cos'è la favicon?

La favicon è l'icona che compare accanto alla URL di un sito web all'interno della barra degli indirizzi del browser. Il nome favicon è la contrazione dell'espressione anglosassone favorites icon, cioè "icona dei preferiti". La favicon, infatti, nasce con l'esigenza di accompagnare graficamente la URL di un sito web all'interno dell'elenco dei bookmark.

Il primo browser a supportare la favicon è stato Internet Explorer 5 ma, col tempo, questa piccola iconcina è diventata un vero e proprio standard: oggi tutti i browser in commercio supportano la favicon.

In concreto, la favicon è un piccolo file grafico in formato .ico (ma oggi quasi tutti i browser supportano anche i formati GIF e PNG) delle dimensioni di 16x16 pixel.

Come faccio a pubblicare la favicon sul mio sito?

In origine era sufficiente pubblicare il file favicon.ico all'interno della root del proprio sito web. Oggi, in alternativa, è possibile inserire, all'interno dei tag <head> e </head>, questo semplice markup:

<link rel="icon" href="/percorso/favicon.ico" />

Ovviamente questa linea di codice dovrebbe essere presente su tutte le pagine del sito.

Per maggiori informazioni sulla favicon vi invitiamo a leggere questo articolo pubblicato su Mr.Webmaster


Creiamo la nostra favicon

Creare una favicon per il proprio sito web è semplicissimo: utilizzando l'editor che trovate in questa pagina potete disegnare da soli la vostra icona partendo da zero oppure potete importare um'immagine da utilizzare come base di partenza per la creazione del vostro progetto.

Editor di favicon

L'area di disegno (la griglia grigia) è un quadrato suddiviso in 256 settori, pari cioè al numero di pixel di cui è composta la favicon (16 x 16 = 256). Ciascun settore, quindi, corrisponde ad un pixel.

Possiamo colorare i pixel utilizzando lo strumento matita (lo strumento selezionato è colorato di arancione). Quando utiliziamo la matita possiamo scegliere un colore di riempimento scegliendolo dal selettore accanto:

Selettore colore

Selezionata la matita e scelto il colore portiamo il mouse sull'area di disegno per iniziare il lavoro: cliccando e trascinando si coloreranno i pixel.

Se abbiamo commesso degli errori possiamo cancellare utilizzando lo strumento gomma: selezioniamolo facendo click (diventerà arancione) e poi spostiamoci col mouse sull'area di disegno e clicchiamo sui pixel che vogliamo cancellare.

Gomma e Picker

Altro strumento disponibile è il picker: si tratta di uno strumento attraverso il quale possiamo impostare il colore da utilizzare con lo strumento matita "catturandolo" dall'area disegno: selezioniamo il picker, spostiamoci sull'area disegno e clicchiamo sul pixel del quale vogliamo copiare il colore (questo strumento è molto utile quando si lavora su immagini importate).

Per importare un'immagine nell'area di disegno cliccate sull'apposito pulsante: così facendo si aprirà la finestra di importazione. Selezionate un file grafico (JPG, GIF o PNG) di max 250 Kb e non più grande di 600x600 pixel. Il vostro browser vi mostrerà l'anteprima del file selezionato.

Importa immagine

Utilizzate lo strumento di selezione (che potete spostare e/o ridimensionare) per inquadrare il dettaglio che desiderate importare nell'editor (deve essere un'area quadrata). Una volta completato clicchiamo sul pulsante d'importazione. Così facendo l'immagine comparirà nell'editor e potrà essere modificata con gli strumenti di design descritti prima.

Immagine importata nell'editor

Una volta concluso il lavoro clicchiamo sul pulsante "Salva e scarica la Favicon" per salvare il file favicon.ico sul nostro PC. A questo punto non resta che pubblicare la favicon sul sito utilizzando un comune client FTP.


Altri tool interessanti