Favicon Generator

Een favicon is het kleine icoontje dat in je browsertab staat, naast je site verschijnt in bladwijzers en geschiedenis, en naast de zoekresultaten opduikt. Het is klein, maar het is een van de meest zichtbare onderdelen van je merk. Elke keer dat iemand een tab met jouw site opent, is dat kleine vierkantje het eerste wat hij opmerkt. Daarom is een scherp, herkenbaar favicon veel belangrijker dan de grootte doet vermoeden. Je hebt er met deze tool maar één goede afbeelding en een paar klikken voor nodig.

Hier is de valkuil die de meeste mensen niet verwachten: één enkel favicon is zelden genoeg. Desktopbrowsers vragen favicons aan in 16 en 32 pixels, Android-apparaten en progressive web apps gebruiken 192 en 512, het beginscherm van iOS wil een groot touch-icon, en appstores vragen om artwork in 1024 pixels. Een logo met de hand naar al deze formaten brengen betekent designsoftware openen, canvasformaten aanpassen en de ene na de andere file exporteren. Deze favicon-generator doet dat allemaal voor je in een paar seconden: één geüploade afbeelding wordt omgezet in acht correct geschaalde PNG-iconen.

Wanneer je je afbeelding uploadt, maakt de generator iconen van 16x16, 32x32, 48x48, 64x64, 128x128, 192x192, 512x512 en 1024x1024 pixels. Die set dekt bijna elke situatie waarmee je te maken krijgt: het kleine tab-icoon, de middelgrote formaten die browsers en besturingssystemen aanvragen, de grote iconen voor mobiele beginschermen en web-app-manifests, en de afbeelding op volledig formaat die appstores eisen. Je bekijkt elk resultaat in een voorbeeldraster en downloadt alleen de formaten die je daadwerkelijk nodig hebt.

De makkelijkste manier om goede resultaten te krijgen is beginnen met een vierkante afbeelding. Iconen zijn altijd vierkant, en de tool schaalt je bron zo dat die een vierkant canvas vult. Een niet-vierkante afbeelding wordt dus uitgerekt. Een transparante PNG van 512x512 of groter is het ideale uitgangspunt. Als je logo bijvoorbeeld duizend pixels breed is maar maar vierhonderd hoog, snijd het dan vóór het uploaden bij tot een vierkant in plaats van de generator het te laten vervormen.

Een groot logo terugschalen naar 16 pixels is echt moeilijk. Tekst verdwijnt, dunne lijnen lopen door elkaar en fijne verloopjes veranderen in ruis. De generator gebruikt de hoogwaardige beeldverfijning van de browser om de randen bij elke grootte zo schoon mogelijk te houden, maar elke tool heeft zijn grenzen als een ontwerp druk is. Eenvoudige, gedurfde tekens met sterk contrast overleven de reis naar 16 pixels; ingewikkeld artwork zelden.

Privacy is een van de belangrijkste redenen waarom mensen deze aanpak verkiezen. De hele omzetting gebeurt in je browser met de HTML5-canvas-API. Je afbeelding wordt nooit geüpload, opgeslagen of ergens naartoe gestuurd. Daardoor is de tool geschikt voor nog niet uitgebrachte producten, klantlogo's en alles wat je liever niet op een server van een derde partij ziet staan. Sluit het tabblad als je klaar bent en elk spoor van je upload is verdwenen.

Het is ook goed om duidelijk te zijn over wat de tool niet doet. Het levert PNG-iconen, wat vrijwel elk modern platform accepteert. Het maakt geen .ico-bestand, bundelt niets in een zip-archief en genereert geen web-app-manifest voor je. In de praktijk is dat zelden een probleem: moderne browsers gebruiken al jaren zonder problemen PNG-favicons, en het .ico-formaat is vooral een erfenis uit het verleden. Download de formaten die je wilt en voeg daarna een paar link-tags toe aan je pagina.

De iconen in een website verwerken is eenvoudig. In de head van je pagina voeg je een link-tag toe die naar je hoofdfavicon verwijst, bijvoorbeeld een 32x32-PNG, plus een apple-touch-icon-link voor iOS en, als je een progressive web app beheert, 192x192- en 512x512-vermeldingen in je manifest.json-bestand. Upload de bestanden naar je server, verwijs er met de tags naar, en het icoon verschijnt in tabs, bladwijzers en op beginschermen.

Denk aan de alledaagse situaties waarin dit voorkomt. Een blogger wil een net site-icoon voor WordPress en hoeft geen Photoshop te openen. Een ontwikkelaar levert een web app op en heeft een favicon plus PWA-iconen in de projectmap nodig. Een startup bereidt een App Store-vermelding voor en heeft een vierkant 1024x1024-icoon nodig dat ook werkt als kleine launcher. Een student bouwt een schoolproject en wil dat het er afgewerkt uitziet. Ze kunnen allemaal in minder dan een minuut dezelfde tool gebruiken.

Ontwerpkeuzes zijn hier belangrijker dan de tool. Houd het favicon dicht bij de eenvoudigste vorm van je logo, gebruik je merkkleuren en vermijd tekst die alleen bij grote formaten zin heeft. Als je icoon een transparante achtergrond heeft, onthoud dan dat browsertabs in lichte en donkere thema's komen, dus test het tegen allebei. Heeft het een effen achtergrond, dan ziet het er overal consistent uit zonder extra moeite.

Nog een praktische noot: browsers cachen favicons agressief. Nadat je het icoon van je site hebt bijgewerkt, kun je nog een tijdje het oude blijven zien. Een harde refresh of een snelle controle in een incognitovenster bevestigt dat het nieuwe icoon live is. Ook een klein bestand helpt, want het favicon wordt bij elke paginaweergave opgevraagd en is vaak een van de eerste bestanden die worden opgehaald.

Je hebt geen designervaring of geïnstalleerde software nodig om dit te gebruiken. Het draait volledig in je browser, werkt op Windows, macOS, Linux en zelfs op een telefoon, en er is geen account om aan te maken en niets om voor te betalen. Upload zo veel afbeeldingen als je wilt, zo vaak als je wilt, en download alleen de formaten die je nodig hebt. Het is een van die kleine hulpmiddelen die je stilletjes redden van een verrassend tijdrovende klus.