SVG vs ICO-iconen

SVG favicon's zijn enkele XML-documenten die zonder extra bytes naar elk tabbladformaat kunnen worden geschaald. ICO-bestanden zijn binaire containers die een of meer vooraf gerasterde frames bevatten. 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.

Moderne Chromium, Firefox en Safari kunnen SVG in tabbladen weergeven. Windows-shell, oudere insluitingen en impliciete /favicon.ico-ophaalacties verwachten nog steeds raster ICO-gegevens.

De vraag is niet SVG of ICO – het is SVG plus ICO, waarbij SVG wordt vermeld voor geschikte browsers en ICO als vangnet.

Eén bestand beslaat 16×16 tot en met 256×256 logische pixels. Er is geen mipmap ingesteld om te onderhouden.

De bestandsgrootte is vaak minder dan 2 KB voor eenvoudige markeringen, veel kleiner dan een .ico met zes frames.

Ingebedde CSS kan vullingen onder @media omkeren (prefers-color-scheme: donker), waardoor u adaptieve tabbladen krijgt zonder afzonderlijke nachtitems te exporteren.

SVG is tekst. Je kunt favicon-wijzigingen in Git differentiëren, net als elk ander bronmiddel.

Browsers vragen om /favicon.ico, zelfs als u dit weglaat uit HTML. Dat verzoek moet een geldige pictogramcontainer retourneren, en niet een SVG met de naam .ico.

Windows-pinnen, Outlook-link ontvouwt zich en sommige RSS-lezers negeren SVG volledig. Verwacht dat ongeveer 5% van de vertoningen alleen ICO-paden zal gebruiken.

ICO geeft je ook voorspelbare pixels. Complexe SVG-filters kunnen bij verschillende motoren verschillend worden weergegeven; rasterfallbacks stabiliseren het uiterlijk.

Geef eerst ICO aan voor maximale compatibiliteit, en daarna SVG voor verbetering:

<link rel="icon" href="/favicon.ico" size="elke">

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Geschikte browsers geven de voorkeur aan SVG als het type en MIME correct zijn. Anderen vallen terug op ICO zonder een gebroken beeldglyph.

Combineer met een 180×180 PNG Apple-touch-pictogram omdat iOS SVG niet gebruikt voor pictogrammen op het startscherm.

Monochroom letterteken: SVG met een enkel <pad> en vulling in de donkere modus. ICO gegenereerd op basis van dezelfde vorm voor Windows-snelkoppelingen.

Verlooplogo: vereenvoudigen voor SVG (alleen platte vullingen). Houd het marketingverloop op de website, niet op het tabblad 16×16.

Overheids- of bedrijfssite met verouderde IE-vereisten: geef prioriteit aan ICO; voeg SVG alleen toe nadat analyses verwaarloosbaar IE-verkeer aantonen.

Ontwerp een systeem met strikte merkkleuren: sla SVG op in repository, voer een CI-taak uit om .ico op elke releasetag opnieuw te genereren.

Kan ik alleen SVG gebruiken? Niet als je geïnteresseerd bent in Windows-snelkoppelingen en impliciete .ico-ophaalacties.

Ondersteunt Safari SVG favicon's? Safari 15+ op desktop doet dat wel. Het startscherm van iOS heeft nog steeds PNG nodig.

Zal SVG de eerste verf vertragen? Een SVG van 1–2 KB is te verwaarlozen vergeleken met heldenafbeeldingen.

Kan ik een bitmap insluiten in SVG? Dat kan, maar je verliest schaalbaarheid. Gebruik in plaats daarvan ICO.

SVG favicon onzichtbaar in donkere modus: vulling komt overeen met de achtergrond van het tabblad. Voeg expliciete vullingen of prefers-color-scheme-regels toe.

Chrome gebruikt ICO, niet SVG: controleer type="image/svg+xml" en controleer of het serverinhoudstype image/svg+xml is.

SVG ziet er gekarteld uit: je hebt complexe filters gerasterd. Vereenvoudig paden of vertrouw op ICO voor het tabblad.

Groot SVG-bestand: export met SVGO; verwijder Illustrator-metagegevens en ongebruikte defs.

Houd de viewBox vierkant en gecentreerd. Niet-vierkante viewBoxes-brievenbus markeert onvoorspelbaar in ronde of vierkante tabbladen.

Geef de voorkeur aan eenvoudige vullingen boven filters, maskers en insluitingen van buitenlandse objecten. Favicon-renderingcontexten stripfuncties volledige pagina SVG maakt dit mogelijk.

Inline alle stijlen. Externe stylesheets worden mogelijk niet geladen voor verzoeken die alleen favicon zijn.

Test prefers-color-scheme-regels in zowel lichte als donkere OS-instellingen op dezelfde machine voordat u deze implementeert.

Voer SVGO uit met conservatieve plug-ins om de bestandsgrootte te verkleinen, maar houd viewBox en kritieke padgegevens intact.

Versiebeheer favicon.svg zoals applicatiecode. Verschillende XML is beter dan het vergelijken van binaire ICO in pull-aanvragen.

De parsekosten voor SVG zijn klein vergeleken met hero-afbeeldingen, maar de enorme SVG-exports vanuit Illustrator (100 KB+) verspillen nog steeds bytes op elk tabblad.

Browsers cachen favicons afzonderlijk van HTTP-cachecontrole op HTML. Het hernoemen van favicon.svg naar favicon-v2.svg dwingt vernieuwing af wanneer de marketing dit vereist.

Servicemedewerkers die HTML in de cache opslaan, mogen pictogramreacties met verouderde-terwijl-opnieuw valideren niet voor altijd in de cache opslaan - cachesleutels bij rebranding bumpen.

HTTP/2-multiplexing betekent dat drie kleine pictogrambestanden geen watervalprobleem vormen. Verzend correcte formaten; voeg SVG en ICO niet samen in één bestand.

Favicons zijn decoratief in tabbladen; ze hebben geen alternatieve tekst nodig in HTML. Een betekenisvolle sitenaam hoort nog steeds thuis in <titel>.

SVG-markeringen met laag contrast voldoen niet aan WCAG voor UI-chrome, net zoals ze falen op pagina-inhoud. Test het contrast op zowel #fff- als #323232-achtergronden.

Merktekens die alleen kleur bevatten, verwarren gebruikers met een tekort aan kleurenzicht. Voeg een aparte vorm toe, en niet alleen een tintverschuiving, in het silhouet van 16×16.

Bewaar favicon.svg in Git. Voer op de releasetag een headless script of handmatige generatorstap uit om favicon.ico te produceren en binaire bestanden door te voeren of toe te voegen om artefacten te implementeren.

Mislukte CI als favicon.ico ouder is dan favicon.svg mtime — vangt vergeten regeneratie op na aanpassing van het logo.

Preview-omgevingen moeten dezelfde pictogrampaden gebruiken als productie om 404's op te vangen voordat ze worden samengevoegd.

Documenteer in je stijlgids: SVG is bron, ICO is gegenereerd artefact, PNG-formaten zijn exportdoelen.

Specificeer de minimale lijndikte en opvulling op 16×16, zodat externe bureaus geen merkloze merken verzenden.

Voeg lichte en donkere schermafbeeldingen toe aan de merk-pdf. Marketingteams verwijzen net zo vaak naar tabbladen als naar briefhoofden.

Versie favicon-items met semver-tags die overeenkomen met productreleases wanneer pictogrammen veranderen wanneer functies worden gelanceerd.

Voer driemaandelijkse audits uit: als uit analyses blijkt dat SVG meer dan 98% wordt ondersteund in uw doelgroep, behoud dan nog steeds ICO: de lange staart is van belang voor zakelijke installaties.

Implementeer eerst favicon.ico en verifieer impliciete /favicon.ico-verzoeken retourneren 200.

Voeg favicon.svg toe met correcte MIME bij enscenering; voer een automatische controle uit of het inhoudstype image/svg+xml is.

Verzenden naar productie, CDN opschonen, drie browsers hard vernieuwen, tabblad SVG op Chromium en fallback ICO bevestigen waar verwacht.

Houd ondersteuningstickets een week lang in de gaten: problemen met pictogrammen verschijnen direct na de rebranding als QA de Windows-snelkoppelingen heeft overgeslagen.

Leg baseline-screenshots vast in uw releaseticket, zodat toekomstige regressies duidelijk zijn tijdens de codebeoordeling.