Je hebt al een logo. Wat je nodig hebt is dat logo omgezet in de stapel piepkleine icoonbestanden die een browser verwacht — een favicon.ico, een handvol PNG's op specifieke formaten, een webmanifest, en de HTML om het allemaal aan te sluiten. Die conversie is mechanisch, en je kunt het in ongeveer een minuut doen zonder iets te installeren.
De adder is dat niet elk logo elegant verkleint. Dus dit behandelt zowel het snelle pad als hoe je een logo repareert dat op 16 pixels tot pap wordt.
De korte versie
- Zorg dat je logo een vierkante afbeelding is — idealiter 512×512 of groter, op een transparante of effen achtergrond.
- Sleep het in de Favicon Generator.
- Download de gegenereerde set en zet de bestanden in je site-root.
- Plak het meegeleverde HTML-fragment in je
<head>.
Dat is de hele klus. De generator voert favicon.ico uit, PNG's op 16, 32, 48, 180, 192 en 512, een webmanifest, en de exacte <link>-tags — zodat je geen zes afbeeldingen met de hand bijsnijdt of naar manifest-syntaxis gokt.
Bereid eerst je logo voor — hier wordt kwaliteit gewonnen of verloren
Een favicon woont op 16×16 in het browsertabblad. Welk detail dat formaat niet overleeft, is verspild. Besteed hier twee minuten en het resultaat oogt overal scherp.
Maak het vierkant. Favicons zijn vierkant. Een breed, horizontaal logo wordt geletterboxed of geplet. Snij tot het meest herkenbare element — meestal het merk of één initiaal — en centreer het in een vierkant kader.
Laat het woordmerk weg. Je bedrijfsnaam voluit is niet leesbaar op tabbladgrootte. "Acme Corporation" wordt een grijze veeg. Behoud het symbool, of één letter, en laat de tabbladtitel de naam dragen.
Controleer het contrast tegen beide thema's. Browsertabbladen zijn er in licht en donker. Een donkerblauw icoon verdwijnt op een donker tabblad; een bleek icoon verdwijnt op een licht. Is je merk één vlakke kleur, zorg dan dat die kleur op beide leest. Een subtiele omlijning of een klein effen achtergrondblokje kan helpen.
Laat ademruimte. Voeg wat marge toe binnen het vierkant zodat het icoon niet tegen de randen aan komt. Het oogt gebalanceerder in elke plek.
Begin groot. Een bron van 512×512 (of groter) geeft de generator schoon detail om vanaf te verkleinen. Een piepklein logo eerst opschalen bakt alleen vervaging in.
Transparante of effen achtergrond?
Beide werken — het hangt af van de look die je wilt.
- Transparant laat de tabblad- of startschermachtergrond doorschijnen. Schoon en modern, en het past zich aan lichte/donkere omgeving aan. Het best wanneer je merk een duidelijke vorm is.
- Effen achtergrondblokje (een gekleurd afgerond vierkant achter het merk) garandeert dat het icoon leest ongeacht wat erachter zit. Dit is wat de meeste app-iconen doen, en het is de veiligere keuze als je logo dun of contrastarm is.
Bij twijfel is een effen blokje in je merkkleur de robuuste optie — het verdwijnt nooit in een bijpassende achtergrond.
Na het downloaden: waar bestanden heen gaan
De generator geeft je een set bestanden en een fragment. Twee plaatsingsregels dekken het:
favicon.icogaat naar je site-root (/favicon.ico). Browsers en Windows zoeken het daar op naam, zelfs zonder een<link>-tag.- Al het andere kan wonen waar je wilt zolang de paden in het HTML-fragment overeenkomen. De meeste mensen zetten ze allemaal in de root en plakken het fragment zoals het is.
Dan is het alleen het <head>-fragment — icoonlinks, de apple-touch-icon, en de manifest-referentie. Plak, deploy, hard-verversen, en je zou je logo in het tabblad moeten zien.
Waarom het in de browser doen?
Omdat je logo nooit je machine verlaat. Het hele proces — de afbeelding lezen, verkleinen naar elk formaat, de .ico inpakken, de manifest schrijven — gebeurt lokaal in je browser met Canvas. Er wordt niets naar een server geüpload, er is geen aanmelding of watermerk, en na je eerste bezoek werkt de tool offline. Voor een merkasset die je misschien nog niet hebt gepubliceerd, is het weghouden van servers van derden de verstandige standaard.
Zodra je logo vierkant, contrastrijk en klein leesbaar is, is de volledige set genereren het makkelijke deel.