Come generare e includere una favicon in HTML?


Favicon è una normale immagine grafica (immagine) associata a una particolare pagina web o sito web. È nota anche come  icona segnalibro, scorciatoia o icona di un sito web. I browser che supportano l'aggiunta di una favicon di solito la visualizzano nella barra degli indirizzi e nelle schede accanto al nome della pagina, alcuni browser la utilizzano come icona per un collegamento memorizzato sul desktop. 

Creazione Favicon

La cosa importante delle favicon’ fare è che dovrebbero essere della dimensione particolare che è rispettivamente di 16x16, 32x32 o 64x64 pixel. Inoltre, non dimenticare di applicare il colore a 8 o 24 bit. Il formato più comune per le favicon è ICO ma sono possibili anche GIF e PNG.

Quando generi un'immagine Favicon, dovresti prestare attenzione ai seguenti suggerimenti:

  • Favicon dovrebbe essere realizzata nello stesso stile del sito, in quanto è una sorta di biglietto da visita del tuo progetto.
  • L'immagine che vuoi usare come favicon dovrebbe essere estremamente semplice da capire, meglio usare solo pochi elementi.
  • Assicurati che la favicon trasmetta al massimo l'essenza del tuo sito, della tua attività e del tuo progetto.
  • È meglio creare un'immagine in modo che provochi un'associazione ai visitatori del tuo sito. Ad esempio, l'icona di un telefono, per un salone di telefonia mobile.

Normalmente, crea un'icona, hai solo bisogno di un'immagine normale nel formato * .jpg o * .bmp, che può essere creata in qualsiasi editor grafico, anche nello stesso Paint. Carica l'immagine nel programma per creare favicon, quindi seleziona la dimensione, la profondità del colore e premi il pulsante di avvio. Tutto è pronto.

Come aggiungere Favicon in HTML?

Ora è il momento di aggiungere Favicon al tuo sito in modo che appaia per tutte le sue pagine. Per fare ciò, posiziona l'icona nella cartella principale del tuo sito. Se il tuo sito è già ospitato, questa cartella si chiama solitamente "public_html". Poi, su ogni pagina del tuo sito, prima del tag di chiusura, aggiungi le seguenti righe:

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


Devi aggiungere queste righe a ogni pagina se hai un sito web HTML. Poiché, molto probabilmente, il tuo sito è stato creato sulla base di una sorta di CMS, ti basterà aggiungere queste righe al file principale del tuo tema che utilizzi per il sito.

Nelle schede delle pagine e nella barra degli indirizzi del browser, la tua icona verrà visualizzata immediatamente.

Favicon.Guru è il servizio affidabile e facile da usare che aiuta a convertire i file PNG in ICO. Garantiamo al nostro cliente semplicità, convenienza e risultati sempre soddisfacenti! Con l'aiuto della nostra piattaforma, otterrai la migliore e unica favicon per il tuo sito web.