Un favicon è la piccola icona che un browser mostra accanto al titolo della tua pagina nelle schede, nei segnalibri, negli elenchi della cronologia e nei collegamenti della schermata iniziale. Il nome è l'abbreviazione di "favorite icon", coniato da Microsoft nel 1999 quando IE 5 introdusse /favicon.ico alla radice del sito. Oggi il favicon è sei file, non uno. I browser desktop utilizzano un PNG o SVG 32x32. iOS utilizza un PNG 180x180 tramite apple-touch-icon. Android estrae PNG 192x192 e 512x512 da manifest.json. Le schede fissate di Safari utilizzano un SVG monocromatico tramite mask-icon. Il legacy /favicon.ico è il fallback quando nient'altro è dichiarato. Una configurazione completa fornisce a ogni dispositivo la dimensione e il formato giusti, mantiene il tuo marchio nitido a ogni scala ed evita il placeholder generico del globo che le piattaforme mobili renderizzano quando le icone mancano o sono dimensionate male.

Un favicon checker scarica l'HTML di qualsiasi URL, analizza ogni tag link della famiglia favicon e segnala quali icone sono dichiarate, le loro dimensioni, i formati e se gli URL si risolvono. Percorre l'head per <link rel="icon">, <link rel="shortcut icon">, <link rel="apple-touch-icon">, <link rel="mask-icon"> e <link rel="manifest">, quindi controlla /favicon.ico alla radice del dominio come fallback. Raggruppa i risultati per target di dispositivo in modo che tu veda cosa renderizzano desktop Chrome, iOS Safari, Android Chrome e schede fissate di Safari. Esegui questo test favicon prima di ogni distribuzione per catturare varianti mancanti, URL non funzionanti e dimensioni errate in meno di tre secondi. L'output inoltre flaggia se il manifest.json stesso restituisce 200 e se l'array di icone al suo interno punta a file reali, che è dove la maggior parte dei bug specifici di Android si nasconde.

L'insieme moderno è 16x16, 32x32, 180x180, 192x192 e 512x512. I PNG 16x16 e 32x32 gestiscono le schede del browser desktop e la barra degli indirizzi. I browser scelgono la corrispondenza più vicina alla dimensione renderizzata, quindi la spedizione di entrambi impedisce l'ingrandimento. Il PNG 180x180 è l'apple-touch-icon utilizzato da iOS per i riquadri della schermata iniziale. Le dimensioni più piccole vengono ingrandite e sembrano sfocate sui display Retina. I PNG 192x192 e 512x512 si trovano in manifest.json per le schermate iniziali Android e le schermate iniziali PWA. Le guide precedenti consigliano dieci o più dimensioni (57x57, 72x72, 114x114, 144x144). I browser moderni ignorano la maggior parte di quelli. Cinque file coprono ogni dispositivo nel mondo reale e il validatore favicon flaggia qualsiasi dimensione che non corrisponda alla specifica in modo da poter eliminare il bloat legacy.

Usa tutti e tre per una copertura completa. ICO è il formato legacy, richiesto per /favicon.ico alla radice perché alcuni browser e crawler più vecchi controllano solo lì. Un file ICO multi-risoluzione 16x16 più 32x32 è il fallback più sicuro. PNG è il formato desktop e mobile moderno. Usalo per <link rel="icon" sizes="32x32">, apple-touch-icon e le icone del manifest. PNG gestisce la trasparenza in modo pulito e renderizza nitido alla dimensione dichiarata. SVG è il futuro. Usalo per <link rel="icon" type="image/svg+xml"> e il mask-icon di Safari. SVG si ridimensiona a qualsiasi DPI senza sfocature, pesa 1-3 KB e supporta varianti in modalità scura tramite media query. Circa il 92% dei browser in uso oggi supporta i favicon SVG, mentre il restante 8% torna silenziosamente al tuo PNG dichiarato.

Quando gli utenti iOS toccano "Aggiungi alla schermata iniziale" da Safari, il SO estrae l'apple-touch-icon per renderizzare il riquadro della schermata iniziale. Se non ne dichiari uno, iOS scatta uno screenshot della pagina e lo utilizza, che appare sfocato e senza marchio. La dimensione prevista è PNG 180x180 con uno sfondo solido, dichiarato come <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Circa il 25% del traffico mobile globale proviene da iOS, e un apple-touch-icon mancante significa che ogni uno di quegli utenti che salvano il tuo sito vede un placeholder invece del tuo logo. La parte del checker apple-touch-icon di questo strumento flaggia se il file è dichiarato, la dimensione corrisponde a 180x180, l'URL restituisce 200 e lo sfondo è solido piuttosto che trasparente.

manifest.json è il Web App Manifest, un piccolo file JSON che dice ad Android (e a Chrome desktop) come il tuo sito si comporta quando viene installato come Progressive Web App. Dichiara il nome dell'app, il colore del tema, il colore di sfondo, la modalità di visualizzazione e soprattutto l'array di icone. Android estrae PNG 192x192 e 512x512 dal manifest per renderizzare il riquadro della schermata iniziale, la schermata iniziale e la voce del drawer dell'app. Senza un manifest dichiarato tramite <link rel="manifest" href="/manifest.json">, Android torna a uno screenshot della tua pagina o a un'icona del globo generico. Circa il 70% del traffico mobile mondiale gira su Android, quindi un manifest mancante è un'impressione di marchio mancante ogni volta che un utente installa il tuo sito o lo fissa alla schermata iniziale.

mask-icon è una dichiarazione specifica di Safari per le icone di schede fissate in macOS Safari. Quando un utente fissa la tua scheda, Safari renderizza una silhouette monocromatica utilizzando l'SVG che dichiari tramite <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000">. L'SVG deve essere un vettore a colore singolo. Safari ignora qualsiasi colore nel file e applica invece l'attributo color dal tag link. Circa l'8% del traffico desktop globale utilizza Safari e le schede fissate sono una funzione per utenti avanzati, ma saltare mask-icon significa che il tuo marchio renderizza come un punto placeholder generico per quegli utenti. L'icona dovrebbe essere semplice, riconoscibile a 16x16 e utilizzare forme audaci che si leggono chiaramente in monocromatico senza linee sottili o dettagli fini.

Cinque errori spiegano la maggior parte delle configurazioni favicon interrotte. Primo, dichiarare solo /favicon.ico e saltare le altre cinque varianti, il che lascia iOS e Android con placeholder. Secondo, fornire la dimensione errata dell'apple-touch-icon (152x152 invece di 180x180), che iOS ingrandisce trasformandolo in sfocatura. Terzo, dimenticare di collegare manifest.json dall'head dell'HTML, il che fa sì che Android ignori completamente le icone del manifest. Quarto, usare sfondi trasparenti su apple-touch-icons, che iOS renderizza come un quadrato nero invece di onorare la trasparenza. Quinto, il caching aggressivo del browser che mostra il favicon vecchio per settimane dopo un aggiornamento. Risolvi il problema della cache aggiungendo una stringa di query della versione (favicon.ico?v=2) o utilizzando nomi file con hash nella tua pipeline di build.

Sì, se ti importa di come il tuo marchio appare nelle schede in modalità scura. Circa il 60% degli utenti ora esegue il proprio OS in modalità scura per impostazione predefinita e un favicon scuro su scuro (un logo nero su una barra di schede grigio scuro) scompare visivamente. La soluzione è un favicon SVG con una media query: <link rel="icon" type="image/svg+xml" href="/favicon.svg" media="(prefers-color-scheme: dark)"> abbinato a un default in modalità chiara. All'interno dell'SVG puoi utilizzare CSS per scambiare i colori di riempimento in base alla stessa media query. Ciò richiede il formato SVG perché PNG non supporta le media query. I browser che non comprendono la sintassi tornano al <link rel="icon"> predefinito, quindi mantieni una copertura completa senza alcun sovraccarico HTML aggiuntivo.

I browser memorizzano i favicon nella cache in modo aggressivo, spesso da una a quattro settimane, a volte più a lungo. Chrome memorizza i favicon nel suo database Favicon senza scadenza esplicita. Safari li memorizza nella cache per sessione e tra i riavvii. Firefox memorizza in base agli header della cache HTTP standard. Se aggiorni il tuo favicon e gli utenti vedono ancora quello vecchio una settimana dopo, la cache è la causa. Tre soluzioni funzionano in modo affidabile. Primo, aggiungi una stringa di query della versione all'URL del favicon (href="/favicon.ico?v=2026"), che i browser trattano come una risorsa diversa. Secondo, cambia completamente il nome del file (favicon-v2.ico) e aggiorna il tag link. Terzo, imposta header Cache-Control espliciti sulla risposta del favicon con un max-age breve. Qualunque strada tu scelga, esegui un test favicon dopo il deploy per confermare che il nuovo file viene servito da origin.

Un favicon non influisce direttamente sulle classifiche di Google, ma influisce sul tasso di clic dai risultati della ricerca, che Google utilizza come segnale di qualità indiretto. Google Search mostra favicon accanto ai risultati organici su mobile (dal 2019) e desktop (dal 2020). Le pagine con un favicon chiaro e marchiato ottengono un CTR significativamente più elevato rispetto alle pagine con un favicon mancante o predefinito. Uno studio SEO del 2023 su 100.000 SERP ha trovato un aumento CTR del 4-8% per i risultati con favicon marchiati rispetto a quelli senza. Al di là del CTR, un favicon mancante o interrotto segnala ai utenti un sito di bassa qualità o abbandonato, il che danneggia la fiducia e l'engagement. Google richiede che il favicon sia almeno 8x8 pixel, multiplo di 8 e rastreabile da un URL stabile per visualizzarlo nei risultati della ricerca.

Sì. Questo favicon checker accetta qualsiasi URL pubblico e scarica l'HTML server-side, in modo da poter controllare il tuo sito, un concorrente o qualsiasi design di riferimento. Incolla l'URL con il protocollo incluso (https://example.com), fai clic su Check favicons e lo strumento restituisce ogni icona dichiarata entro due o tre secondi. Il controllo funziona su qualsiasi pagina, non solo la homepage. Se un sito utilizza favicon diversi su sottodomini o sezioni, testa l'URL specifico che ti interessa. Lo strumento gestisce i reindirizzamenti, segue l'URL finale e segnala eventuali 404 sui file di icone. Usalo per confrontare il modo in cui i siti leader nel tuo settore impostano i loro favicon prima di progettare i tuoi, quindi copia i modelli che resistono su desktop e mobile.

/favicon.ico è il percorso fallback legacy. I browser lo richiedono automaticamente dalla radice del dominio se nessun altra icona è dichiarata nell'HTML. Il formato è ICO, un contenitore Windows che contiene più risoluzioni in un unico file. <link rel="icon"> è la dichiarazione HTML moderna. Punta a qualsiasi file icona (PNG, SVG o ICO) a qualsiasi URL con attributi opzionali sizes e type. I browser preferiscono <link rel="icon"> quando presente e tornano al fallback /favicon.ico solo se manca o restituisce 404. La migliore pratica è fornire entrambi. Dichiara le icone moderne PNG e SVG tramite <link rel="icon"> per le schede e mantieni un ICO multi-risoluzione a /favicon.ico per i browser vecchi, i lettori RSS e i crawler che controllano solo il percorso radice.

Tre controlli confermano un favicon funzionante. Primo, esegui un favicon checker sull'URL della pagina per verificare che ogni dichiarazione sia presente, dimensionata correttamente e restituisca 200. Secondo, hard-refresh della pagina nel tuo browser (Cmd+Shift+R o Ctrl+Shift+F5) per bypass della cache, quindi guarda la scheda. Terzo, salva la pagina sulla schermata iniziale iOS e Android su un dispositivo reale per confermare che queste icone vengono renderizzate correttamente. Gli strumenti di sviluppo del browser aiutano anche. Apri la scheda Network, filtra per "favicon" e ricarica per vedere quali file di icone il browser ha effettivamente richiesto. Se vedi 404, correggi i percorsi e ridistribuisci. Usa il test favicon su ogni distribuzione per catturare le regressioni prima che gli utenti le facciano, specialmente dopo gli aggiornamenti del framework che cambiano i percorsi degli asset statici.

Il miglior favicon checker è quello che controlla tutte e sei le dichiarazioni, non solo /favicon.ico. Dovrebbe scaricare la pagina server-side, analizzare ogni tag link, convalidare che ogni URL icona restituisca 200, segnalare la dimensione e le dimensioni effettive del file, raggruppare i risultati per target di dispositivo (desktop, iOS, Android, Safari pinned) e flaggare le varianti mancanti. Dovrebbe inoltre controllare i contenuti di manifest.json, non solo se il manifest è collegato. Questo favicon checker copre tutti e sei i controlli in un unico passaggio e restituisce risultati in meno di tre secondi. Gli strumenti di sviluppo del browser funzionano per controlli puntuali ma richiedono ispezione manuale di ogni tag link. I validatori online che controllano solo /favicon.ico perdono completamente le varianti moderne. Esegui un controllo completo prima del lancio e dopo ogni migrazione di asset statico per mantenere pulito il set di icone.