Generatore Favicon Online Gratis — ICO, PNG
Genera favicon.ico e PNG (16px-256px) da qualsiasi immagine. Include apple-touch-icon e snippet HTML pronto da usare. Gratis, nel browser, istantaneo.
📖 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.
Strumenti correlati
Convertitore Immagini Online Gratis — JPG, PNG, WEBP Converti HEIC in JPG Online Gratis — Foto iPhone Crea GIF da Video o Immagini Online Gratis Editor Immagini Online Gratis — Ritaglia, Ruota Comprimi Immagini Online Gratis — JPG, PNG, WEBP Ridimensiona Immagini Social Media Online