Favicon toevoegen in HTML
Drie tags bestrijken de meeste sites; vijf tags geven je een opstelling van PWA-kwaliteit. In deze tutorial wordt elk kenmerk uitgelegd, worden kopieer- en plakfragmenten voor veelgebruikte stapels weergegeven, worden veelgestelde vragen beantwoord en worden de cacheproblemen opgelost die ervoor zorgen dat pictogrammen vastlopen.
Het minimale label
De kleinste geldige declaratie is één regel in <head>:
<link rel="icon" href="/favicon.ico">
Browsers behandelen rel="icon" als een hint om die URL op te halen voor tabbladweergave. Root-relatieve paden die beginnen met / blijven bestaan, ongeacht het huidige paginapad.
Zelfs met deze tag onderzoeken veel clients /favicon.ico nog steeds automatisch. Bewaar het bestand in de hoofdmap van de site voor impliciete verzoeken. Gebruik onze favicon generator, PNG naar ICO converter, SVG naar ICO converter en live favicon tester om uw icon set te bouwen en te verifiëren, en lees de metgezel guide voor een beknopte uitleg.
De moderne aanbevolen set
Voor scherpe weergave op het bureaublad, iOS en tabbladen in de donkere modus gebruikt u:
<link rel="icon" href="/favicon.ico" size="elke">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Orde is minder belangrijk dan volledigheid. Browsers kiezen het best ondersteunde type: SVG indien beschikbaar, anders een bijpassend PNG- of ICO-frame.
Voeg type="image/svg+xml" toe aan de SVG-regel, zodat MIME-snuffelen het bestand nooit verkeerd labelt.
PWA installatieprompts
Koppel uw manifest: <link rel="manifest" href="/site.webmanifest">.
Binnen site.webmanifest declareert u pictogrammen met bron, grootte, type en doel. Minimaal bruikbare invoer is 192×192 en 512×512 PNG-bestanden.
Optioneel themaverfijning: <meta name="theme-color" content="#0f172a"> lijnt de statusbalk van Android uit met uw merk tijdens installatieprocessen.
Kopieer en plak voorbeelden
Normale HTML-site – plak in <head>:
<link rel="icon" href="/favicon.ico" size="elke">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Next.js App Router — voeg dezelfde regels toe aan app/layout.tsx in de metadata of in een handmatig <head>-blok. Bestanden staan in /public.
Create React App — plaats pictogrammen in /public en bewerk public/index.html. CRA bedient /public in de domeinroot in productiebuilds.
Elk attribuut begrijpen
rel="icon" markeert een favicon-kandidaat. rel="apple-touch-icon" is het iOS-specifieke startschermpictogram. rel="manifest" verwijst naar JSON met PWA-metagegevens.
size vertelt de browser welke resolutie een PNG vertegenwoordigt. Dit is vereist voor PNG-pictogrammen wanneer u expliciet meerdere formaten declareert.
href moet bereikbaar zijn in productie. Vermijd hotlinking naar CDN's van derden voor favicon's; u wilt volledige controle tijdens een rebranding.
Veelgestelde vragen
Kan ik absolute URL's gebruiken in href? Ja, maar root-relatieve /favicon.ico is eenvoudiger in zowel staging- als productiedomeinen.
Heb ik zowel rel="shortcut icon" als rel="icon" nodig? Nee. rel="icon" is standaard; snelkoppeling is verouderd.
Waar is <head> precies? Direct kind van <html>, vóór <body>. Sommige raamwerken injecteren het via lay-outcomponenten.
Moeten favicon's op een CDN leven? Dat kan, maar ze moeten alle <link> URL's tegelijk bijwerken tijdens de migratie. Root-relatieve paden vermijden dat probleem.
Problemen oplossen
Het pictogram werkt op de startpagina, maar niet op /blog/slug: je hebt een relatieve href zoals favicon.ico gebruikt zonder voorafgaande slash. Gebruik in plaats daarvan /favicon.ico.
Safari toont oud pictogram: websitegegevens wissen of bestand één keer hernoemen. Safari slaat favicon's langer op in de cache dan HTML.
Geldige HTML maar 404 op het tabblad Netwerk: bestand niet geïmplementeerd in de serverroot of verkeerde hoofdlettergebruik (Favicon.ico versus favicon.ico op Linux).
SVG genegeerd: ontbrekend type="image/svg+xml" of server verzendt verkeerd inhoudstype. MIME-toewijzing in nginx of Apache repareren.
Framework-specifieke plaatsing
Vite / Vue / React SPA: plaats iconen in /public en verwijs naar /favicon.ico in index.html. De ontwikkelserver en productiebuild dienen beide /public in de domeinroot.
Next.js App Router: voeg iconen toe aan /app via de metadata API of plaats statische bestanden in /public. Vermijd het dupliceren van tags op beide plaatsen.
Nuxt: gebruik /public of configureer app.head.link in nuxt.config.ts voor gecentraliseerd tagbeheer over routes heen.
SvelteKit: statische elementen in statische/ maptoewijzing naar /. Update app.html <head> één keer voor de hele app.
Astro: public/ directory plus een gedeelde Head-component in uw lay-out zorgt ervoor dat elke pagina identieke pictogramtags bevat zonder dat er sprake is van kopiëren en plakken.
WordPress en andere CMS-gebruikers hebben mogelijk helemaal geen handmatige tags nodig - zie onze WordPress-tutorial als core Site Icon-markeringen voor u genereert.
Validatie van uw HTML-installatie
Bekijk de paginabron op productie, niet op localhost, om te bevestigen dat de geïmplementeerde HTML overeenkomt met uw repository. CI-pijplijnen injecteren soms verschillende lay-outs per omgeving.
Gebruik curl om elke pictogram-URL op te halen die wordt geretourneerd in <link href>. Een 200-status met de juiste inhoudslengte betekent dat het pad echt is en niet alleen maar is aangegeven.
W3C-markeringsvalidatie is optioneel voor favicons, maar ongeldige <head>-nesting (tags in <body>) kan ervoor zorgen dat browsers uw pictogrammen volledig negeren.
Voer Lighthouse PWA-audit uit als installaties ertoe doen: ontbrekende manifestpictogrammen worden gemarkeerd, zelfs als tabbladen er goed uitzien.
Maak een bladwijzer van de pagina, sluit de browser volledig, open hem opnieuw en bevestig dat de bladwijzerbalk uw markering nog steeds toont. Dat test persistent favicon-cachegedrag.
Beveiligingskopteksten en pictogrampaden
Content-Security-Policy default-src blokkeert favicon-ladingen van dezelfde oorsprong niet. Cross-origin-pictogram-URL's hebben expliciete img-src- of standaard-src-rechten nodig.
Subresource-integriteit wordt zelden toegepast op favicon's. Hosting van dezelfde oorsprong blijft de eenvoudigste veilige standaard.
Als pictogrammen op een CDN-subdomein staan, gebruik dan absolute https:// URL's in href en zorg ervoor dat CORS niet relevant is: favicon's worden geladen als afbeeldingen, niet opgehaald.
Vermijd gegevens: URI favicons in productie HTML. Ze vergroten de HTML-cache, omzeilen CDN-caching en compliceren CSP.
Tagvolgorde en duplicaten
Dubbele rel=icon-tags met dezelfde href-afvalbytes, maar breken zelden de weergave. Dubbele conflicterende hrefs verwarren het debuggen – verwijder verouderde tags.
Sommige WordPress-thema's drukken Site Icon-tags af, terwijl plug-ins nog een set toevoegen. Gebruik View Source om duplicaten te detecteren na installatie van plug-ins.
Plaats pictogramlinks vóór grote scriptblokken in het hoofd. Vroege ontdekking helpt bij het eerste schilderen, ook al zijn pictogrammen downloads met een lage prioriteit.
HTML5 vereist geen afsluitende schuine strepen op lege elementen. Zowel <link ...> als <link ... /> valideren.
Legacy- en edge-cases
Voorwaardelijke opmerkingen van IE zijn dood. Plaats geen pictogramtags voor verouderde browsers.
Basistag in hoofd verandert de relatieve href-resolutie. Pictogrampaden die beginnen met / zijn immuun; relatieve favicon.ico pauzes op geneste routes wanneer de basis is ingesteld.
Schaduw-DOM- en webcomponenten nemen pagina favicon niet over in de schaduwwortels; het pictogram op documentniveau is nog steeds van toepassing op het tabblad.
iframe-insluitingen tonen het ingesloten document favicon, niet het bovenliggende document. Elk frame heeft zijn eigen tags nodig als je beide beheert.
Lokaal bestand:// testen kan /favicon.ico mogelijk niet oplossen. Gebruik een lokale ontwikkelserver voor realistisch pictogramgedrag.
Bookmarklets en browserextensies kunnen uw site favicon niet wijzigen voor andere gebruikers, alleen voor uw lokale Chrome. Verzend de juiste tags op de server.