Riassunto (TL;DR)
- La convalida è importante: Una favicon corrotta causa errori 404 nei log del server e degrada l’immagine del marchio.
- Analisi completa: Questo strumento scansiona il tuo sito come un browser per verificare
favicon.ico, icone PNG, Apple Touch Icons e Web Manifests. - Feedback attuabile: Ottieni report specifici su accessibilità dei file, mancata corrispondenza delle dimensioni e validità del formato.
Perché convalidare le favicon?
Implementare una favicon sembra semplice, ma è soggetto a fallimenti silenziosi. Gli ecosistemi dei browser moderni (Desktop, Android, iOS) hanno requisiti diversi.
- Cache del browser: I browser locali memorizzano le favicon nella cache in modo aggressivo, nascondendo spesso problemi.
- Standard frammentati: Hai bisogno di più di
favicon.ico. I dispositivi Apple cercanoapple-touch-icon. Android e PWA cercanosite.webmanifest. - Configurazione del server: I percorsi corretti in HTML sono inutili se il server restituisce 403 o il tipo MIME sbagliato.
Cosa viene controllato
Il nostro analizzatore esegue un audit in più passaggi:
- Parsing HTML: Scansioniamo l’
<head>per trovare tutti i link alle icone dichiarati. - Convalida Manifesto: Verifichiamo se le dimensioni dichiarate nel Web Manifest corrispondono ai file reali.
- Accessibilità: Tentiamo di scaricare ogni icona per verificare che restituisca
200 OK. - Formato e Dimensioni: Ispezioniamo i dati binari per garantire che il file sia un’immagine valida e che le dimensioni corrispondano.
- Scoperta implicita: Controlliamo i percorsi standard come
/favicon.ico.
Errori comuni di distribuzione
1. L’icona “Fantasma”
Hai un tag <link>, ma il file restituisce 404. Soluzione: Verifica il percorso del file rispetto alla radice del dominio.
2. Mancata corrispondenza del formato
Dichiari type="image/png" ma servi un JPEG o ICO. Soluzione: Assicurati che l’intestazione Content-Type del server corrisponda al formato reale.
3. Menzogna sulle dimensioni
L’HTML dice sizes="32x32", ma l’immagine reale è 16x16. Soluzione: Usa il Generatore Favicon per produrre dimensioni esatte.
4. Manca Apple Touch Icon
iOS non usa la favicon standard. Senza apple-touch-icon, l’icona della schermata home sarà uno screenshot generico. Soluzione: Includi sempre un PNG 180x180 per Apple.
Best Practices
- Fallback Root: Tieni sempre un
favicon.iconella root (/favicon.ico). - SVG per i moderni: Usa favicon SVG (
type="image/svg+xml") per l’indipendenza dalla risoluzione. - Manifesto: Definisci icone distinte in
manifest.json. - Cache Busting: Usa stringhe di query (es.
?v=2) quando aggiorni.
FAQ
Perché il checker dice “Mancante” quando posso vederlo?
Il tuo browser ha probabilmente una versione vecchia nella cache. Il checker vede ciò che vede un nuovo visitatore.
Ho davvero bisogno di tutti questi file?
favicon.ico è il minimo indispensabile. Ma per un aspetto professionale, il set completo è lo standard.
Posso usare una CDN?
Sì. Assicurati solo che i tag <link> puntino all’URL assoluto sulla CDN.