Een betrouwbare HTML-favicon berust niet op één wondertag. Je hebt een kleine set bereikbare bestanden en links in de head nodig. Deze aanpak dekt moderne tabbladen, oudere programma's en mobiele snelkoppelingen zonder talloze historische varianten.
Bereid de bestanden voor
Begin met een vierkant symbool dat ook heel klein leesbaar blijft. Plaats favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest en de PNG-bestanden waarnaar het manifest verwijst in de openbare map die vanaf de hoofdmap van het domein wordt aangeboden.
Een pad zoals /favicon.svg begint bij de hoofdmap van het domein. Het blijft dus correct op /products of /blog/article, terwijl favicon.svg relatief ten opzichte van de pagina kan worden geïnterpreteerd.
Voeg de elementen toe aan head
Declareer eerst de SVG met rel icon en type image/svg+xml en daarna de ICO met rel icon en sizes any. Voeg rel apple-touch-icon toe voor iOS en rel manifest voor installatie van de webapp.
Het type moet overeenkomen met het bestand dat daadwerkelijk wordt aangeboden. Hernoem geen PNG naar .ico: de inhoud en header moeten het ICO-formaat gebruiken.
| Doel | Relatie | Bestand |
|---|---|---|
| Moderne browser | icon | /favicon.svg |
| Compatibiliteit | icon | /favicon.ico |
| iOS-startscherm | apple-touch-icon | /apple-touch-icon.png |
| Webapp | manifest | /site.webmanifest |
Publiceer zonder paden te verbreken
Open na publicatie elke bestands-URL rechtstreeks. Het antwoord moet een afbeelding of manifest met een succesvolle status zijn, geen aanmeldpagina of HTML-foutpagina voor 404 met een misleidende status.
Staat de site in een submap, pas dan de paden of openbare basis aan. Controleer de uiteindelijke pagina met ontwikkelaarstools: de browser moet de verwachte URL's opvragen zonder omleiding naar een andere host.
Controleer het resultaat
Laad opnieuw met de cache uitgeschakeld en inspecteer de linkelementen in de resulterende DOM. Test daarna een tabblad, een bladwijzer en, indien relevant, het toevoegen van de site aan het startscherm van een echt apparaat.
Een favicon in zoekresultaten volgt ook de regels en het crawlschema van de zoekmachine. Een pictogram dat zichtbaar is in de browser garandeert dus geen onmiddellijke update in zoekresultaten.
Primaire bronnen
Veelgestelde vragen
Hoort het faviconelement in body?
Nee. Linkelementen voor pictogrammen en het manifest horen in de head van het document.
Is favicon.ico in de hoofdmap voldoende?
Het is een nuttig alternatief, maar beschrijft geen Apple Touch-pictogram of installeerbare manifestpictogrammen. Declareer daarvoor de bijbehorende formaten.
Waarom een pad gebruiken dat met / begint?
Dat begint bij de hoofdmap van het domein en voorkomt dat een geneste pagina het bestand in haar eigen map zoekt.