Generatore di Favicon — Guida Completa
Il favicon (favorite icon) è la piccola icona che identifica un sito web nella tab del browser, nei bookmark e nella schermata home dello smartphone. Un favicon completo non è un singolo file ma un set di icone in multipli formati e dimensioni per coprire tutti i contesti: favicon classico .ico per browser desktop, apple-touch-icon per iOS, icone Android per la schermata home e immagini OG per i social. Generare il set completo è essenziale per una presenza web professionale.
📖 Storia
Il favicon fu introdotto da Microsoft con Internet Explorer 5 nel marzo 1999 come funzionalità per i bookmark — il browser scaricava automaticamente favicon.ico dalla root del sito. Inizialmente era solo 16×16 pixel nel formato .ico (che supporta multiple risoluzioni nello stesso file).
Con l'avvento degli smartphone, Apple introdusse apple-touch-icon.png (2007) per l'icona quando si aggiunge un sito alla schermata home iPhone. Android e Chrome aggiunsero i propri requisiti. Le Progressive Web App (PWA) richiedono un web manifest JSON con icone a 192×192 e 512×512 px per essere installabili. Oggi un favicon corretto richiede 6-8 file diversi.
📊 Tabella Unità
| Unità | Equivalenza | Uso |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 px | Obbligatorio, retrocompatibilità browser |
| favicon-32×32.png | 32×32 px | Browser moderni, tab ad alta risoluzione |
| apple-touch-icon.png | 180×180 px | iOS Safari schermata home |
| android-chrome-192.png | 192×192 px | Android, PWA minimo |
| android-chrome-512.png | 512×512 px | PWA splash screen, app store |
| og-image.png | 1200×630 px | Open Graph, condivisione social |
| site.webmanifest | File JSON | PWA metadata, installazione |
💡 Curiosità
- Il formato .ico può contenere multiple immagini a diverse risoluzioni in un singolo file — i browser scelgono automaticamente la dimensione più adatta.
- Safari su iOS scarica l'apple-touch-icon solo quando l'utente aggiunge il sito alla schermata home, non ad ogni visita.
- Un favicon mancante genera una richiesta 404 in ogni pagina visitata — può impattare le prestazioni del sito se il server logga gli errori intensivamente.
- Le PWA devono avere almeno un'icona 192×192 e una 512×512 nel manifest per essere installabili su Android e mostrare il prompt "Aggiungi alla schermata home".
❓ Domande Frequenti
Perché serve ancora il formato .ico nel 2024?
Per retrocompatibilità con browser meno recenti e per il comportamento predefinito di Internet Explorer e alcune versioni vecchie di Chrome/Firefox che cercano /favicon.ico nella root del sito prima di leggere i tag HTML. Il formato .ico multi-risoluzione garantisce che il browser scelga la dimensione ottimale.
Come si aggiunge il favicon al sito?
Aggiungi i tag link nell'<head> HTML: <link rel="icon" href="/favicon.ico">, <link rel="apple-touch-icon" href="/apple-touch-icon.png">, <link rel="manifest" href="/site.webmanifest">. Il webmanifest è un file JSON che punta alle icone Android/PWA. Posiziona favicon.ico nella root del sito per il fallback automatico.
Cos'è il web app manifest e perché è importante?
Il manifest è un file JSON (site.webmanifest) che descrive la tua web app: nome, icone, colori, orientamento e modalità di visualizzazione. Permette a Chrome/Edge/Safari di mostrare il prompt di installazione "Aggiungi alla schermata home" trasformando il sito in una Progressive Web App (PWA) con aspetto da app nativa.
Altre guide
📏 Conversione di Lunghezza e Distanza ⬛ Conversione di Superficie 🧊 Conversione di Volume ⚖️ Conversione di Peso e Massa 🌡️ Conversione di Temperatura