Come aggiungere un favicon in HTML
Aggiungere una favicon a una pagina HTML semplice è una modifica da una riga — ma il setup moderno e completo richiede sei righe e copre iOS, Android, dark mode e installazione PWA.
L'unico tag rispettato da ogni browser è <link rel="icon" href="/favicon.ico">. Metti favicon.ico nella root del sito e sei all'80 %.
Il restante 20 % — apple-touch-icon, varianti PNG, SVG con supporto dark mode e webmanifest — è ciò che separa un'icona di default da un'esperienza di brand curata.
Come funziona
- 1
Genera il pacchetto favicon
Usa il generatore FetchFavicon — produce tutti i file necessari più il markup pronto da incollare.
- 2
Posiziona i file nella root del sito
favicon.ico, apple-touch-icon.png, android-chrome-192/512.png, site.webmanifest.
- 3
Incolla lo snippet nel <head>
Sei tag <link> + un <meta name="theme-color">.
Provalo ora
Ottieni lo snippet HTML
Generatore di FaviconFAQ
Dove vanno i tag <link>?+
Dentro <head>, in qualsiasi posizione — l'ordine non conta, purché vengano prima di </head>.
Servono sia .ico che PNG?+
Sì. .ico è il fallback universale; PNG offre una resa più nitida sugli schermi ad alta densità.
E per la dark mode?+
Pubblica una variante SVG che include una media query prefers-color-scheme nel suo blocco <style>.