Wil je een favicon maken? Een website heeft zijn icoon in meerdere formaten nodig: een piepklein icoon voor browsertabbladen, een groter voor bladwijzers en grotere PNG's voor als iemand de site op het beginscherm van een telefoon zet. Ze allemaal met de hand maken is een saai klusje. Deze tool bouwt de hele set uit één afbeelding.
Wat zit er in het pakket?
Alles komt in één ZIP:
- favicon.ico met versies van 16, 32 en 48 pixels erin, voor browsertabbladen en oudere tools.
- favicon-16x16.png en favicon-32x32.png voor moderne browsers.
- apple-touch-icon.png van 180 bij 180, voor het beginscherm van iPhone en iPad.
- icon-192.png en icon-512.png voor Android en installeerbare webapps.
- site.webmanifest, waarin de twee grote iconen al vermeld staan.
Met welke afbeelding begin ik?
Een vierkante afbeelding van minstens 512 bij 512 pixels, het liefst een PNG met transparante achtergrond, of een SVG. Eenvoudige vormen werken het best: op 16 pixels wordt een volledig logo met slogan een onleesbare vlek. Veel merken gebruiken voor de favicon alleen de beginletter of het symbool uit hun logo.
Is je afbeelding niet vierkant? Dan wordt hij zonder uitrekken in het midden van een vierkant gezet, en worden de lege zijkanten transparant of wit, net wat je kiest. Snijd hem eerst bij met Afbeelding bijsnijden als je het vierkant liever helemaal vult.
Hoe zet ik hem op mijn site?
Pak het pakket uit in de hoofdmap van je website, zodat favicon.ico op het hoogste niveau staat. Voeg daarna link-tags toe aan de head van je pagina's: één met rel op icon die naar favicon-32x32.png wijst, één met rel op apple-touch-icon die naar apple-touch-icon.png wijst, en één met rel op manifest die naar site.webmanifest wijst. Browsers houden favicons hardnekkig in hun cache, dus een harde vernieuwing of een privévenster helpt om de wijziging te zien.
Wat gebeurt er met mijn upload?
De iconen worden op onze server gemaakt. Je afbeelding wordt geüpload via een versleutelde verbinding, verwerkt in Duitsland en samen met het pakket binnen twee uur automatisch verwijderd.
Is het gratis?
Ja. Het is gratis zonder account voor afbeeldingen tot 50 MB, met 20 serverjobs per dag voordat je Pro of credits nodig hebt. Maak je iconensets voor de sites van meerdere klanten? Sleep gratis tot 5 logo's tegelijk hierheen en krijg per logo één pakket.
Zo maak je een favicon
- Sleep een vierkante PNG, JPG of SVG naar het vak.
- Kies een transparante of witte achtergrond en klik op Faviconset.
- Download de ZIP en pak hem uit in de hoofdmap van je website.
- Voeg de link-tags toe aan de head van je pagina.
Veelgestelde vragen
Heb ik nog een favicon.ico nodig?
De meeste moderne browsers gebruiken PNG-iconen uit link-tags, maar sommige tools en oudere browsers vragen nog steeds direct om /favicon.ico. Zet je hem erbij, dan voorkom je foutmeldingen in je serverlogs.
Waarom zie ik nog steeds mijn oude favicon?
Browsers bewaren favicons lang in hun cache. Probeer een privévenster, of zet een versienummer als query achter de link.
Kan ik een JPG gebruiken?
Ja, maar JPG kent geen transparantie, dus het icoon krijgt een effen achtergrond.
Waarom heeft mijn icoon een wit vlak op de iPhone?
iOS vult transparante delen van het beginschermicoon op. Kies de optie met witte achtergrond, of een bronafbeelding met een effen kleur, voor een strakker resultaat.