Come si usa
- 1.Trascina il logo sulla pagina, incollalo oppure fai clic su «Scegli un’immagine». Un PNG o un SVG quadrato di almeno 512 × 512 pixel dà il risultato migliore.
- 2.Regola il margine interno e, se il logo ha bisogno di una forma piena dietro, scegli un colore di sfondo e gli angoli arrotondati.
- 3.Controlla l’anteprima: le schede del browser mostrano come appare l’icona a 16 pixel con il tema chiaro e con quello scuro.
- 4.Fai clic su «Scarica favicon.zip», carica i file nella cartella principale del sito e incolla l’HTML nella sezione head delle tue pagine.
Quali file favicon servono a un sito
Oggi basta un piccolo set per coprire tutti i browser e i dispositivi. favicon.ico è il file classico che browser, lettori di feed e altri strumenti richiedono a /favicon.ico anche quando la pagina non lo indica; contiene le versioni da 16, 32 e 48 pixel. I browser moderni preferiscono un’icona SVG (icon.svg), che resta nitida a qualsiasi dimensione e può persino cambiare colori in modalità scura con una media query prefers-color-scheme dentro l’SVG.
apple-touch-icon.png (180 × 180) è l’icona che iPhone e iPad usano quando qualcuno aggiunge il tuo sito alla schermata Home. Android e le web app installate usano i PNG da 192 e 512 pixel elencati in site.webmanifest. Le guide più vecchie elencano decine di dimensioni; per tutto il resto i browser scalano questi pochi file.
Dove mettere i file
Carica i file nella cartella principale del sito, in modo che si aprano da indirizzi come https://example.com/favicon.ico, e aggiungi le righe HTML nel <head> di ogni pagina. In site.webmanifest sostituisci il nome con quello del tuo sito.
I framework spesso hanno un metodo tutto loro. Con l’App Router di Next.js, metti favicon.ico, icon.svg (o icon.png) e apple-icon.png nella cartella app e i tag vengono aggiunti automaticamente. In WordPress, carica un’immagine quadrata in Aspetto → Personalizza → Identità del sito → Icona del sito. Le piattaforme come Shopify, Wix e Squarespace hanno un campo per la favicon nelle impostazioni del sito.
Disegnare un’icona che funzioni a 16 pixel
Una scheda del browser mostra l’icona a 16 × 16 pixel (32 sugli schermi ad alta risoluzione). Testo fine, linee sottili e loghi ricchi di dettagli diventano una macchia a quella dimensione. Usa un simbolo semplice, l’iniziale del nome o una parte marcata del logo, con un contrasto forte.
Controlla entrambe le anteprime delle schede: un logo scuro su sfondo trasparente può sparire con il tema scuro del browser. In quel caso dai all’icona un colore di sfondo oppure aggiungi un contorno chiaro al logo.
Domande frequenti
Il mio logo viene caricato da qualche parte?
No. Le icone vengono disegnate e raccolte nel file ZIP dal tuo browser, sul tuo dispositivo. Nulla viene inviato a nestoo o a terzi.
Che dimensioni deve avere una favicon?
Le schede del browser usano 16 × 16 e 32 × 32 pixel, cioè le versioni contenute in favicon.ico (più 48 × 48 per i collegamenti di Windows). Telefoni e web app hanno bisogno di icone più grandi: 180 × 180 per l’Apple touch icon, 192 × 192 e 512 × 512 per Android. Parti da un’immagine di almeno 512 × 512 pixel o da un SVG.
Perché la nuova favicon non compare?
I browser tengono le favicon in cache a lungo, a volte anche dopo un ricaricamento forzato. Apri direttamente il file dell’icona (/favicon.ico) e ricaricalo, prova una finestra privata oppure aggiungi una versione ai link nell’HTML, come href="/favicon.ico?v=2", così i browser scaricano il nuovo file.
Meglio ICO o PNG?
Entrambi. Tieni favicon.ico nella cartella principale, perché alcuni browser e strumenti cercano solo quel file. I browser moderni usano le icone PNG o SVG indicate nell’HTML. Il file ICO creato qui contiene immagini PNG, il che lo mantiene leggero.
Posso creare una favicon da un’emoji o da un testo?
Non direttamente con questo strumento, ma con l’SVG è facile: salva <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">🦊</text></svg> come icon.svg e trascinalo qui. Le emoji hanno un aspetto diverso su ogni sistema operativo, quindi i file PNG e ICO generati mostrano l’emoji come la disegna il tuo computer.