La favicon non viene visualizzata: guida alla risoluzione dei problemi
Hai caricato una favicon ma la scheda mostra ancora un globo generico o un vecchio logo. Questa guida esamina le cause più comuni (caching, percorsi errati, file mancanti e tag <link> in conflitto) nell'ordine in cui dovresti controllarli.
I browser memorizzano nella cache le favicon in modo più aggressivo di quasi qualsiasi altra risorsa. Un aggiornamento forzato (Ctrl+Shift+R o Cmd+Shift+R) risolve molti falsi allarmi. Se il problema persiste, aggiungi una volta la stringa di query della versione: /favicon.ico?v=2.
Conferma che il file esiste nell'URL richiesto dal browser. Apri /favicon.ico direttamente in una nuova scheda. Un 404 significa che il file non è distribuito dove pensi che sia, cosa comune con le build SPA che servono solo index.html.
Controlla i tuoi <link rel="icon"> percorsi href. I percorsi assoluti (/favicon.ico) funzionano su ogni pagina; i percorsi relativi (favicon.ico) si interrompono su percorsi nidificati come /blog/post.
Se utilizzi una CDN, elimina i percorsi delle favicon dopo la distribuzione. Alcuni CDN memorizzano nella cache le risposte 404 per /favicon.ico quando il file mancava durante la prima richiesta.
Più tag <link rel="icon"> possono confondere i browser più vecchi. Inserisci prima favicon.ico, poi le varianti PNG/SVG con attributi espliciti di tipo e dimensione.
WordPress, Shopify e gli host statici inseriscono ciascuno i propri tag. Visualizza l'origine della pagina e cerca rel="icon": i tag duplicati o sovrascritti sono una causa frequente.
Gli avvisi di contenuto misto HTTPS bloccano gli URL delle favicon HTTP sulle pagine protette. Servi ogni icona su HTTPS.
Per lo sviluppo locale, alcuni browser rifiutano di aggiornare le favicon finché non si cancellano i dati del sito per localhost.
Come funziona
- 1
Verificare l'URL del file
Apri /favicon.ico in una nuova scheda: aspettati 200, non 404.
- 2
Ispeziona i tag <head>
Visualizza fonte; confermare un collegamento canonico favicon.ico e nessun errore di battitura.
- 3
Busta la cache una volta
Aggiungi ?v=2 all'href, distribuisci, aggiorna, quindi rimuovi la query se lo desideri.
Provalo ora
Metti alla prova la tua favicon live
Tester favicon liveFAQ
Perché la mia favicon funziona localmente ma non in produzione?+
Le build di produzione spesso vengono inviate a una sottodirectory o a un prefisso CDN. Verifica che il percorso distribuito corrisponda al tuo <link> href e che il file sia incluso nell'output della build.
Quanto tempo ci vuole prima che Google aggiorni la mia favicon nei risultati di ricerca?+
Google può impiegare giorni o settimane dopo la nuova scansione. Assicurati che l'icona sia almeno 48×48, quadrata e accessibile pubblicamente tramite un URL stabile.
La modalità adblock o privacy nasconde le favicon?+
Raramente per le icone di prima parte. I proxy favicon di terze parti possono essere bloccati; le icone self-hosted sul tuo dominio non sono interessate.
Devo eliminare la cache delle favicon del browser?+
Cancella i dati del sito per il tuo dominio nelle impostazioni del browser o esegui il test in una finestra privata con la cache disabilitata.