Favicongenerator
Maak een compleet faviconpakket van SVG, PNG of JPG
Zet één SVG-, PNG- of JPG-logo om in favicon.ico, browser-PNG’s, een Apple Touch-pictogram, Android Chrome-pictogrammen, site.webmanifest en kant-en-klare HTML-tags. Download het volledige, privé in uw browser gemaakte pakket als ZIP.
Standaardwaarden voor nieuwe bestanden bewerken
Voeg een logo toe om het op elk faviconformaat te zien.
Uitvoer
head-tags.html
<link rel="icon" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Zet elk bestand behalve index.html in de map waaruit je site wordt geserveerd en plak deze tags daarna in de head van elke pagina.
Nog geen bestanden. Sleep bestanden hierboven of klik op BESTANDEN SELECTEREN.
Wat is een favicon?
Een favicon is het kleine pictogram dat een browser naast de titel van een pagina toont: in het tabblad, in bladwijzers, in de geschiedenis en in de resultaten van sommige zoekmachines. Het begon als één favicon.ico van 16 × 16 in de hoofdmap van de site. Vandaag wordt datzelfde werk gedaan door een set bestanden op verschillende formaten, want een browsertabblad, een snelkoppeling op het beginscherm en een installatieprompt tonen het pictogram elk op een heel andere schaal.
Waarom een faviconpakket in plaats van één bestand
Eén enkele favicon.ico werkt nog steeds, maar is op zichzelf niet meer genoeg. Browsertabbladen lezen het item van 16 of 32 px uit de .ico, Safari vraagt om een apple-touch-icon van 180 px zodra een pagina aan het Home Screen wordt toegevoegd, en Android Chrome leest PNG's van 192 en 512 px uit een webmanifest voor zijn installatieprompt en splashscreen. Die stuk voor stuk exporteren betekent zes exports, zes kansen om iets anders bij te snijden, en een handgeschreven manifest. Ze uit één bron genereren houdt elk formaat identiek en kost je één keer slepen.
Een faviconpakket genereren
- 1
Sleep je logo erin, of klik op BESTANDEN SELECTEREN om het toe te voegen. SVG, PNG, JPG, WebP, GIF, BMP, AVIF en TIFF werken allemaal, tot 40 tegelijk.
- 2
Stel de achtergrond, hoekradius, padding, schaal en uitlijning in en typ daarna de appnaam en de korte naam die in het manifest komen. Elk formaat wordt opnieuw getekend zodra je iets wijzigt.
- 3
Klik op ALLES OPSLAAN om favicon-package.zip te downloaden en plak daarna de vier link-tags uit het HTML-tabblad in de head van elke pagina.
Privacy: je bestanden verlaten je browser niet
De conversie wordt lokaal in uw browser uitgevoerd met behulp van JavaScript en WebAssembly. Er vindt geen bestandsupload of serverconversie plaats, dus de bestanden die u toevoegt, blijven op uw apparaat staan.
Lokale verwerking helpt vertrouwelijke logo's, interne documenten en niet-vrijgegeven illustraties van klanten te beschermen. Pagina's en conversiecode worden in de cache opgeslagen terwijl u ze gebruikt, zodat tools die u al hebt geopend, kunnen blijven werken zonder een netwerkverbinding.
Veelgestelde vragen
Welke bestanden krijg ik, en waar moeten ze staan?
favicon.ico (met 16, 32 en 48 px in één bestand), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest en een index.html met de tags erin. Kopieer alles behalve index.html naar de map waaruit je site wordt geserveerd en plak daarna de vier link-tags in de head van elke pagina.
Kan ik een PNG- of JPG-logo gebruiken in plaats van een SVG?
Ja. SVG, PNG, JPG, WebP, GIF, BMP, AVIF en TIFF werken allemaal. Een SVG blijft de betere bron, want elk formaat wordt uit de vectoren getekend in plaats van uit pixels herberekend. Een rasterlogo dat kleiner is dan 512 px wordt voor de grootste pictogrammen opgeschaald en ziet er zacht uit; de bestandsregel waarschuwt je wanneer dat gebeurt.
Heb ik favicon.ico nog nodig als ik PNG-pictogrammen meelever?
Houd hem erbij. Het is het bestand dat browsers en crawlers uit de hoofdmap van de site opvragen wanneer geen enkele tag ze ergens anders naartoe wijst, en het is het enige dat meerdere formaten in één bestand meedraagt. De PNG-items dekken de browsers die daar de voorkeur aan geven, en het manifest dekt de installatieprompt van Android.