Una favicon HTML affidabile non dipende da un singolo tag magico. Usa un piccolo insieme di file accessibili e collegamenti nel head. Questa procedura copre schede moderne, client meno recenti e collegamenti mobile senza moltiplicare le varianti storiche.
Prepara i file
Parti da un simbolo quadrato leggibile anche quando è molto piccolo. Inserisci favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest e i PNG richiamati dal manifest nella cartella pubblica servita dalla radice del dominio.
Un percorso come /favicon.svg è assoluto rispetto al dominio. Resta quindi corretto su /products o /blog/article, a differenza di favicon.svg, che può essere risolto rispetto alla pagina.
Aggiungi gli elementi nel head
Dichiara prima l’SVG con rel icon e type image/svg+xml, poi l’ICO con rel icon e sizes any. Aggiungi rel apple-touch-icon per iOS e rel manifest per l’installazione dell’app web.
Il tipo deve corrispondere al file effettivamente servito. Non rinominare un PNG in .ico: il contenuto e l’intestazione devono usare il formato ICO.
| Scopo | Relazione | File |
|---|---|---|
| Browser moderno | icon | /favicon.svg |
| Compatibilità | icon | /favicon.ico |
| Schermata Home iOS | apple-touch-icon | /apple-touch-icon.png |
| App web | manifest | /site.webmanifest |
Pubblica senza interrompere i percorsi
Apri direttamente l’URL di ogni file dopo la pubblicazione. La risposta deve essere un’immagine o un manifest con uno stato di successo, non una pagina HTML di accesso o di errore 404 restituita con uno stato ingannevole.
Se il sito si trova in una sottocartella, adatta i percorsi o la base pubblica. Ispeziona la pagina finale negli strumenti per sviluppatori: il browser deve richiedere gli URL previsti senza reindirizzamenti verso un altro host.
Verifica il risultato
Ricarica con la cache disattivata e controlla gli elementi link nel DOM prodotto. Prova poi una scheda, un preferito e, se pertinente, l’aggiunta del sito alla schermata Home di un dispositivo reale.
La favicon nei risultati di ricerca segue anche le regole e i tempi di scansione del motore di ricerca. Un’icona visibile nel browser non garantisce quindi un aggiornamento immediato nei risultati.
Fonti primarie
Domande frequenti
L’elemento della favicon va nel body?
No. Gli elementi link che descrivono le icone e il manifest vanno nel head del documento.
Basta un favicon.ico nella radice?
È un’alternativa utile, ma non descrive l’icona Apple Touch né le icone installabili del manifest. Dichiara i formati destinati a questi usi.
Perché usare un percorso che inizia con /?
Parte dalla radice del dominio e impedisce a una pagina annidata di cercare il file nella propria cartella.