La favicon è la piccola icona che compare nelle schede del browser, nei preferiti e nelle scorciatoie della schermata Home. Per farla bene servono più dimensioni collegate correttamente nell'HTML, ma il procedimento è semplice una volta noti i requisiti.
Che cos'è una favicon?
"Favicon" sta per "favorites icon". In origine era un'icona di 16×16 pixel per i preferiti di Internet Explorer. Browser e dispositivi moderni richiedono molte dimensioni:
| File | Dimensione | Uso |
|------|------|----------|
| favicon.ico | 16×16, 32×32 | Schede del browser, barra delle applicazioni di Windows |
| favicon-16x16.png | 16×16 | Icone piccole delle schede |
| favicon-32x32.png | 32×32 | Schede standard |
| apple-touch-icon.png | 180×180 | Scorciatoia nella Home di iOS |
| android-chrome-192x192.png | 192×192 | Schermata Home di Android |
| android-chrome-512x512.png | 512×512 | Schermata di avvio Android, PWA |
Generare tutte le dimensioni con ZapFile
- Apri il generatore di favicon di ZapFile
- Carica un'immagine quadrata (meglio PNG, almeno 512×512 pixel)
- Genera le dimensioni
- Scarica lo ZIP con tutte le dimensioni e il file
.ico
Aggiungere le favicon al sito
Aggiungi questi tag nella sezione del tuo HTML:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Per le Progressive Web App (PWA) aggiungi anche un file site.webmanifest:
{
"name": "Your App",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}Progettare una buona favicon
Mantienila semplice
A 16×16 pixel i loghi complessi diventano irriconoscibili. Usa l'iniziale del marchio, un'icona semplificata o un blocco di colore pieno.Contrasto elevato
La favicon appare su interfacce chiare e scure. Provale entrambe. Uno sfondo pieno nel colore del marchio con un simbolo bianco funziona in entrambe le modalità.Parti da 512×512
Genera dalla sorgente a risoluzione più alta. ZapFile riduce in modo pulito da 512 px, mentre ingrandire da 16 px dà risultati sfocati.Favicon SVG (browser moderni)
I browser basati su Chromium supportano le favicon SVG, perfette a qualsiasi dimensione. Aggiungila insieme alle versioni PNG/ICO:<link rel="icon" type="image/svg+xml" href="/favicon.svg">Errori comuni
- Usare un'immagine sorgente a bassa risoluzione: parti sempre da 512 px o più
- Fornire solo il
.ico: i dispositivi moderni hanno bisogno delle dimensioni PNG; con il solo ICO, iOS e Android restano senza un'icona adeguata - Dimenticare la cache: dopo un aggiornamento, i browser tengono in cache la vecchia favicon con insistenza. Aggiungi un parametro di versione (
favicon.ico?v=2) durante lo sviluppo
Riepilogo
- Le favicon richiedono più dimensioni per browser, iOS, Android e PWA
- Parti da un PNG quadrato 512×512 e genera tutte le dimensioni in una volta
- Il generatore di favicon di ZapFile crea tutte le dimensioni necessarie e il file ICO in pochi secondi