Controllo Favicon

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 cercano apple-touch-icon. Android e PWA cercano site.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.ico nella 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.

Strumenti Favicon