SVG naar favicon

Maak van een SVG-logo een complete faviconset — favicon.ico, apple-touch-icon en web-app-iconen — haarscherp gerasterd in je browser. Er wordt niets geüpload.

Privacy voorop: elke afbeelding wordt lokaal in je browser verwerkt. Er wordt niets geüpload, opgeslagen of naar een server verzonden.

Vector erin, elk rasterformaat eruit

Een SVG is de ideale faviconbron: hij is resolutieonafhankelijk, dus elk iconformaat kan uit de originele geometrie worden gerasterd in plaats van uit een al kleine bitmap te worden herbemonsterd. Zet je SVG erin en elke uitvoer — 16, 32, 48, 180, 192 en 512 pixels — wordt op ware grootte uit de vector getekend, wat de randen scherp houdt in plaats van vaag. Dat is het verschil tussen een icoon dat in een tabblad doordacht oogt en een icoon dat op een vlek lijkt.

Waarom je die .ico toch wilt

Moderne browsers gebruiken met plezier rechtstreeks een SVG-favicon, maar oudere browsers en een hoop andere software — feedlezers, chatvoorbeelden, snelkoppelingen op het bureaublad — zoeken nog altijd naar favicon.ico. Door beide uit dezelfde SVG te genereren, dek je alles af. Voeg opvulling toe, kies een vierkant, afgerond of rond masker en een achtergrond, en download dan de volledige set met een HTML-fragment dat je zo kunt plakken.

Veelgestelde vragen

Wordt mijn afbeelding geüpload om de favicon te maken?
Nee. De favicon.ico, PNG-iconen en het manifest worden allemaal lokaal in je browser gegenereerd met de Canvas-API. Je afbeelding verlaat nooit je apparaat.
Welke formaten en bestanden krijg ik?
Een favicon.ico met meerdere resoluties (16, 32 en 48px), PNG-iconen op 16, 32, 48, 180 (apple-touch-icon), 192 en 512px, een site.webmanifest en een HTML-fragment om in je <head> te plakken.
Kan ik een PNG of SVG naar een ICO omzetten?
Ja. Zet er een PNG, JPG, SVG of WebP in en download een echte favicon.ico. SVG-logo's worden eerst lokaal op hoge resolutie gerasterd.
Welke afbeelding werkt het best?
Een vierkante afbeelding met een eenvoudig, contrastrijk logo. Niet-vierkante afbeeldingen worden vanuit het midden bijgesneden; gebruik de opvulling- en vormbediening om het te kaderen zoals je wilt.
Hoe installeer ik de favicon?
Pak het pakket uit in de hoofdmap van je site en plak het meegeleverde HTML-fragment in de <head> van je pagina's. De favicon.ico wordt door de meeste browsers automatisch opgepikt.