Favicon (.ico) vs SVG

SVG is een vectorformaat, wat betekent dat een enkele SVG favicon bij elke pixeldichtheid wordt weergegeven zonder verslechtering. Op een 1x-scherm wordt het weergegeven met 16×16 pixels; op een 3x Retina-display wordt het weergegeven met 48 x 48 fysieke pixels uit hetzelfde bestand. Geen enkele ICO-bundel met 4 formaatspecifieke rasterframes kan deze automatische dichtheidsverwerking evenaren. SVG is het ideale formaat voor moderne beeldschermen met hoge DPI.

Het .ico-formaat blijft de universele basislijn. Elke desktopbrowser, mobiele browser, besturingssysteem en tool van derden die zich met webpictogrammen bezighoudt, ondersteunt favicon.ico sinds eind jaren negentig. Veel van deze omgevingen controleren de HTML-linktags helemaal niet; ze proberen eenvoudigweg /favicon.ico op te halen uit de domeinroot, zoals gebruikelijk. Als u .ico uit uw configuratie verwijdert, worden de favicons onmiddellijk verbroken voor een betekenisvol segment van gebruikers en tools.

Ondersteuning voor de donkere modus is de geweldige functie van SVG-favicons. Een SVG-bestand kan een `<style>`-blok insluiten met een `@media (prefers-color-scheme: dark)`-query. Wanneer de browser zich in de donkere modus bevindt, wordt de zoekopdracht geactiveerd en kan de vulling, lijn of achtergrondkleur van het pictogram worden gewijzigd. Dit is onmogelijk met .ico of PNG – deze formaten zijn statische rasters zonder milieubewustzijn.

Browserondersteuning voor SVG-favicons is aanzienlijk volwassener geworden. Chrome 80+ (uitgebracht in 2020), Edge 80+, Firefox 41+ en Safari 15+ (uitgebracht in 2021) ondersteunen allemaal `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>`. Vanaf 2026 ondersteunt de overgrote meerderheid van de actieve browserinstallaties SVG-favicons. De opmerkelijke uitzondering is de oudere Safari (vóór 15) op oudere iOS-apparaten; deze vallen automatisch terug naar .ico.

Bestandsgrootte is een ander voordeel van SVG. Een schoon zwart-wit SVG favicon voor een eenvoudig merkteken is doorgaans minder dan 1 KB. Een .ico-bestand met rasterframes van 16, 32, 48 en 64 px met een goede kwaliteit is doorgaans 10-25 KB groot. Voor sites met zeer snelle laadtijden vermindert het verzenden van een SVG favicon in plaats van een zelfstandige PNG-set de payload van de favicon aanzienlijk, hoewel beide formaten na de eerste keer laden in de cache worden opgeslagen.

De SVG favicon-koppelingssyntaxis wijkt enigszins af van .ico. Je hebt een expliciet type attribuut nodig: `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>`. Zonder het type-attribuut herkennen sommige browsers het bestand niet als een favicon. Koppel dit eerst aan de .ico fallback link-tag: `<link rel='icon' href='/favicon.ico'>`. Browsers die SVG-favicons begrijpen, geven de voorkeur aan de meer specifieke SVG-tag; anderen vallen door naar de .ico.

SVG-optimalisatie is de moeite waard voordat u een favicon implementeert. Ontwerptools exporteren SVG met metadata van de editor, opmerkingen, onzichtbare paden en redundante attributen die bytes toevoegen zonder enige visuele bijdrage. Als u uw SVG via de SVG optimizer laat lopen, kunt u de bestandsgrootte met 50-80% verkleinen, terwijl het pictogram visueel identiek blijft. Kleinere SVG's parseren ook sneller, wat van belang is bij langzamere verbindingen.

Het .ico-formaat verwerkt de Windows OS-integratie die SVG niet kan. Snelkoppelingen op het bureaublad die zijn gemaakt op basis van browsertabbladen, taakbalkpinnen en Windows File Explorer-pictogrammen lezen allemaal /favicon.ico. SVG is in deze contexten geen erkend Windows-pictogramformaat. Zelfs gebruikers die voornamelijk het SVG-favicon in hun browsertabbladen zien, zullen de .ico-versie zien wanneer ze een Windows-snelkoppeling naar uw site maken.

Het animeren van een favicon is mogelijk met SVG met behulp van `<animate>`-elementen of SMIL-animaties in het SVG-bestand. Een geanimeerde SVG favicon kan pulseren, draaien of van kleur veranderen. Browserondersteuning voor SVG-animatie in favicons is beperkt (Chrome en Edge ondersteunen dit; Firefox en Safari niet), maar het is een creatieve optie voor webapps die statuswijzigingen (bijvoorbeeld laadindicatoren, nieuwe meldingspunten) via de favicon willen tonen.

SVG favicons ondersteunen geavanceerde kleurmodi die verder gaan dan eenvoudig schakelen tussen donker en licht. U kunt aangepaste CSS-eigenschappen gebruiken binnen de SVG, reageren op `forced-colors`-mediaquery's voor de modus met hoog contrast en meerdere breekpunten voor het kleurenschema gebruiken. Dit themaniveau is onmogelijk met rasterformaten en maakt SVG de beste keuze voor op toegankelijkheid gerichte ontwerpsystemen.

De praktische beperking van SVG in productie is dat je nog steeds een niet-SVG fallback nodig hebt. De eenvoudigste aanpak is om de SVG als uw primaire pictogram te behouden en de .ico en apple-touch-icon PNG uit dezelfde SVG-bron te genereren. De favicon generator accepteert SVG als bronformaat en produceert de .ico- en PNG-uitvoer van de vectorgegevens - geen kwaliteitsverlies door rastering.

Voor deelkaarten op sociale media, OG-afbeeldingen en het ontvouwen van links is het favicon-bronformaat niet relevant: sociale platforms halen de favicon op van uw HTML of /favicon.ico en converteren deze intern. Of uw favicon nu .ico, PNG of SVG is, op de uitgevouwen linkkaart wordt het pictogram hoe dan ook weergegeven. Concentreer u op de kwaliteit van de pictograminhoud in plaats van op het formaat voor scenario's voor sociaal delen.

Bij het implementeren van de aanbevolen ico+SVG-installatie zijn slechts drie linktags nodig: `.ico` fallback, `image/svg+xml` SVG en `apple-touch-icon` PNG. Browsers lezen ze in volgorde van specificiteit (het meest specifieke formaat eerst) en kiezen het eerste formaat dat ze ondersteunen. Deze progressieve verbeteringsaanpak betekent dat elke gebruiker de beste favicon krijgt die zijn browser aankan. Zie de best favicon format guide voor de volledige beslismatrix.