Favicon-generator — ICO, PNG en Apple Touch Icon
Maak van één afbeelding een complete faviconset: favicon.ico, PNG-pictogrammen, een apple-touch-icon en een webapp-manifest.
De apple-touch-icon is altijd ondoorzichtig. Als de appnaam leeg is, gebruikt het manifest de bestandsnaam van de afbeelding.
Voorbeeld
Bestanden in de ZIP
Hoe maak je een favicon
- Kies een vierkante afbeelding, ideaal minstens 512 bij 512 pixels, in PNG-, JPG-, WebP- of SVG-formaat.
- Kies hoe niet-vierkante afbeeldingen passen: contain vult ze aan met de achtergrondkleur, cover snijdt ze in het midden bij.
- Stel de achtergrond- en themakleur in, de padding en of de kleine pictogrammen een transparante achtergrond behouden.
- Vul de appnaam en korte naam in die het webapp-manifest moet bevatten, en controleer de live voorbeelden.
- Download de ZIP met elk bestand, of pak favicon.ico en apple-touch-icon.png apart, en kopieer het HTML-fragment.
Wanneer het helpt
- Een nieuwe website een favicon geven zonder een beeldbewerkingsprogramma te openen.
- Een ontbrekend of wazig favicon vervangen dat in tabbladen als een leeg pagina-pictogram verschijnt.
- Een apple-touch-icon toevoegen zodat een site er goed uitziet wanneer die op een iPhone-startscherm wordt opgeslagen.
- Android-pictogrammen en een manifest klaarmaken voor een progressive web app.
- Een logo omzetten in een nette pictogrammenset met gelijke padding op elk formaat.
Veelgestelde vragen
Welke formaten maakt de generator?
Hij schrijft favicon.ico met afbeeldingen van 16, 32 en 48 pixels erin, aparte favicon-16x16.png- en favicon-32x32.png-bestanden, een apple-touch-icon.png van 180 bij 180, en Android-pictogrammen van 192 en 512 pixels.
Waarom is de apple-touch-icon altijd ondoorzichtig?
iOS toont geen transparantie in een startschermpictogram, dus een transparante PNG zou met een zwart of wit blok erachter uitkomen. De generator vult dat bestand met je achtergrondkleur en laat de kleine favicon-formaten transparant als je dat wilt.
Wat moet ik in het manifest zetten?
Gebruik de volledige site- of appnaam en een korte naam van ongeveer twaalf tekens, want de korte naam is wat onder het pictogram op een telefoon verschijnt. De themakleur kleurt de browserbalk en de achtergrondkleur vult het splashscreen.
Kan ik een SVG-logo gebruiken?
Ja. De SVG wordt gerasterd op 512 pixels breed en de beeldverhouding komt uit de breedte- en hoogte-attributen of uit de viewBox, dus een vierkant logo blijft vierkant.
Waar komen de bestanden op mijn server?
Zet ze in de siteroot naast index.html, zodat de paden in het fragment zoals /favicon.ico en /site.webmanifest werken. Als je ze in een submap houdt, pas dan de href-waarden in het fragment aan.
Wordt mijn afbeelding ergens geüpload?
Nee. De afbeelding wordt gedecodeerd en op een canvas in je browser getekend, en de ZIP wordt in het geheugen samengesteld, dus er wordt niets naar een server gestuurd.