Favicon-generator
Over deze tool
Het favicon, een afkorting van "favorite icon" (favoriet icoon), werd in 1999 voor het eerst geïntroduceerd door Microsoft in Internet Explorer 5. Oorspronkelijk was het een klein ICO-bestand van 16x16 pixels dat in de hoofdmap van een website werd geplaatst en verscheen naast bladwijzers in de favorietenlijst van de browser. De naam bleef hangen en favicons werden al snel een fundamenteel onderdeel van de webidentiteit. In de loop der jaren zijn favicons ingrijpend geëvolueerd. Wat begon als een klein pictogram in een browsertabblad, is uitgegroeid tot een uitgebreide set afbeeldingen die door meerdere platforms en apparaten worden vereist. Apple introduceerde touch-iconen in 2007 met de originele iPhone, waarvoor PNG-bestanden van 180x180 pixels nodig waren voor bladwijzers op het startscherm. Google volgde met eigen vereisten voor Progressive Web Apps, waarbij iconen van 192x192 en 512x512 pixels werden gespecificeerd in het web-app-manifest. Microsoft voegde mstile-iconen toe voor Windows Start-menutegels. Vandaag de dag vereist een volledige favicon-implementatie meerdere bestanden in verschillende formaten en maten. Dit omvat het klassieke favicon.ico (met versies van 16x16, 32x32 en 48x48 pixels), Apple touch-iconen, Android Chrome-iconen en platformspecifieke tegels. Moderne browsers ondersteunen ook SVG-favicons, die perfect schalen naar elk formaat. Favicons spelen een cruciale rol bij branding en gebruikerservaring. Ze helpen gebruikers om snel tabbladen te herkennen in drukke browservensters, opgeslagen sites te identificeren en apps op mobiele startschermen te onderscheiden. Een goed ontworpen favicon versterkt merkherkenning en straalt professionaliteit uit. Deze generator maakt alle vereiste formaten aan vanuit één bronafbeelding, volgens de W3C Web App Manifest-specificaties en Apple Human Interface Guidelines. Alle verwerking gebeurt lokaal in uw browser — uw afbeeldingen worden nooit naar een server geüpload.
Hoe te gebruiken
- Upload een vierkante afbeelding (512×512px of groter aanbevolen). Ondersteunt PNG, JPG, SVG en WebP.
- Pas zo nodig de modus en marge aan en selecteer daarna bij een SVG-upload favicon.svg en de gewenste ICO-, PNG-, Apple touch- en webappformaten.
- Download individuele iconen of krijg alle geselecteerde formaten als een ZIP-pakket met kant-en-klare HTML-codefragmenten.
Methodologie
De aanpassingsmodus en marge bepalen één vierkante compositie voor alle uitvoer. Contain houdt de volledige illustratie zichtbaar, terwijl Cover het vierkant vult door vanuit het midden bij te snijden. Bij een SVG-upload maakt de tool vanuit die compositie een veilig, zelfstandig favicon.svg-bestand en gebruikt dezelfde illustratie voor alle rastervarianten. Rasteruploads volgen dezelfde instellingen. Er worden PNG-bestanden gemaakt van 16×16, 32×32, 48×48, 64×64, 128×128, 180×180, 192×192 en 512×512 pixels. De exacte PNG-bytestromen voor 16×16, 32×32 en 48×48 worden in favicon.ico ingesloten, zodat deze ICO-items overeenkomen met de downloadbare PNG-bestanden. Dezelfde bestanden voeden de voorbeelden, afzonderlijke downloads en het ZIP-pakket. Het pakket bevat ook HTML-linkelementen en een web-app-manifest voor de geselecteerde uitvoer. Alles wordt in uw browser uitgevoerd en de bronafbeelding wordt niet geüpload.
Je resultaten begrijpen
Gebruik voor rasterillustraties waar mogelijk minstens 512×512 pixels, zodat het grootste PNG-bestand niet hoeft te worden vergroot. SVG-illustraties blijven schaalbaar in favicon.svg en worden voor de PNG- en ICO-varianten ook op hoge resolutie gerenderd. Kies Contain wanneer de volledige illustratie zichtbaar moet blijven, Cover wanneer het vullen van het vierkant belangrijker is dan de randen, en marge wanneer het symbool meer transparante ruimte nodig heeft. Controleer vooral de voorbeelden van 16×16 en 32×32. Fijne lijnen, kleine letters en details met weinig contrast kunnen op die formaten moeilijk herkenbaar worden, ook na een nette verkleining. Een eenvoudig symbool met duidelijke randen blijft doorgaans beter herkenbaar. Plaats de geselecteerde bestanden na het downloaden van het ZIP-pakket op de paden die in de gegenereerde HTML en het manifest staan, of pas die paden aan uw site aan. Test het resultaat in de browsers en op de apparaten die u ondersteunt en houd bij een bijgewerkt pictogram rekening met faviconcaching.
Geschiedenis en Evolutie van Favicons
Het faviconverhaal begint in maart 1999 toen Microsoft Internet Explorer 5 uitbracht met een stille maar belangrijke functie: de browser vroeg automatisch een bestand genaamd favicon.ico op uit de hoofdmap van een website en toonde het naast bladwijzers in het Favorieten-menu. Dit eenvoudige 16x16 pixel icoon in het proprietary ICO-formaat was de eerste stap naar een blijvende visuele identiteit voor websites in de browserinterface. Het W3C heeft het oorspronkelijke ICO-gebaseerde faviconmechanisme nooit formeel gestandaardiseerd, maar elke grote browser adopteerde het via de facto conventie. Halverwege de jaren 2000 ondersteunden Firefox, Opera en Safari favicons, en het icoon migreerde van de bladwijzerlijst naar het browsertabblad zelf—een veel zichtbaarder en waardevoller stuk schermruimte. Ontwerpers begonnen het favicon te behandelen als een miniatuur merkasset. Het smartphonetijdperk transformeerde favicons van een enkel bestand naar een familie van assets. Apple introduceerde het apple-touch-icon in 2007 voor iPhone-startschermbladwijzers, waarvoor een veel groter 180x180 pixel PNG nodig was. Google volgde met de Web App Manifest-specificatie, die meerdere icoonformaten declareerde voor PWA s op Android. Microsoft droeg zijn eigen mstile-formaat bij voor Windows 8 live-tegels. Vandaag omvat een grondige favicon-implementatie minstens zes bestanden in drie formaten. De nieuwste evolutie is het SVG-favicon, ondersteund door Chrome en Firefox, dat perfect schaalt naar elk formaat en zelfs dark mode media queries ondersteunt. Ondanks dat het meer dan vijfentwintig jaar oud is, blijft het bescheiden favicon een van de meest duurzame en universeel erkende interfaceconventies.
Praktische voorbeelden
Een startup die zijn eerste website lanceert uploadt een 512x512 logosymbool en downloadt het complete faviconpakket. De gegenereerde ZIP bevat alle vereiste bestanden en de HTML-metatags, wat uren handmatig schalen en formaatconversie bespaart. Een freelance webontwikkelaar die klantsites bouwt gebruikt de generator om consistente faviconpakketten per project te produceren. In plaats van Photoshop te openen voor elke nieuwe klant uploadt hij het merkicoon eenmalig en ontvangt direct alle platformspecifieke formaten. Een open-source projectbeheerder voegt favicons toe aan zijn documentatiesite om de herkenbaarheid tussen tientallen browsertabbladen te verbeteren. Het PWA-manifest stelt mobiele gebruikers in staat de documentatie als startscherm-app te installeren.
Tips & Best Practices
Ontwerp uw favicon eerst op 512x512 pixels en controleer vervolgens of het herkenbaar blijft wanneer het wordt verkleind naar 16x16. Gebruik een effen achtergrondkleur in plaats van transparantie als uw icoon dunne lijnen bevat, omdat transparante favicons kunnen verdwijnen tegen bepaalde browserthema s. Beperk het ontwerp tot maximaal een of twee kleuren. Fijne verlopen en fotografische details gaan verloren bij kleine formaten. Als uw merklogo horizontaal is of een woordmerk bevat, gebruik dan alleen het icoonelement of maak een vereenvoudigd monogram. Test het gegenereerde favicon.ico altijd in minimaal Chrome, Firefox en Safari, aangezien elke browser het icoon iets anders weergeeft. Gebruik na implementatie een cache-busting querystring zoals favicon.ico?v=2 om browsers te dwingen uw bijgewerkte icoon te laden in plaats van de oude gecachte versie.
Bronnen
Alle berekeningen worden lokaal in je browser uitgevoerd. Er worden geen gegevens naar een server gestuurd.