Geen upload, 100% lokaal, geen account

Favicon-generator

Upload je logo of pictogram en download alle standaard favicon-formaten als PNG. Inclusief Apple Touch Icon en PWA-pictogrammen. Er verlaat niets je apparaat.

Hoe Favicon-generator werkt

Favicon-generator neemt elke door jou aangeleverde afbeelding en schaalt deze naar de standaard favicon-afmetingen via de Canvas drawImage API: 16x16, 32x32, 48x48, 180x180 (Apple-aanraakpictogram), 192x192 (Android Chrome) en 512x512 (PWA-manifest). Alle zes formaten worden in je browser gegenereerd en gedownload als afzonderlijke PNG-bestanden. Je bronafbeelding verlaat je apparaat nooit.

Een volledige favicon-set dekt het volledige bereik van browsertabblad-pictogrammen, bladwijzers, beginschermsnelkoppelingen en PWA-spashschermen. Het gebruik van een bronafbeelding in hoge resolutie (ten minste 512x512 pixels) geeft het downscaling-algoritme de meeste details om mee te werken. De HTML link-tags die je nodig hebt om naar elk gegenereerd bestand te verwijzen, worden weergegeven in een snippet dat je direct in het head-element van je pagina kunt kopiëren.

Geschreven door Bastien Sulyan

Hoe je Favicon-generator gebruikt, stap voor stap

  1. Sleep je bronafbeelding naar het uploadgebied. Gebruik een vierkante afbeelding van 512 px of groter voor de beste resultaten.
  2. Bekijk de zes gegenereerde formaten in het resultatenvenster.
  3. Download elk van de zes PNG-bestanden afzonderlijk vanuit het resultatenpaneel.
  4. Kopieer de HTML-snippet met de link-tags voor alle formaten.
  5. Plaats de PNG-bestanden in de root van je site en plak de link-tags in je paginahoofd.

Veelvoorkomende toepassingen

  • Een ontwikkelaar zet een nieuwe website op en heeft alle favicon-formaten nodig die worden gegenereerd uit het merklogo zonder een abonnement op een ontwerptool.
  • Een PWA-auteur genereert de 192x192- en 512x512-pictogrammen die nodig zijn in het webappmanifest voor installatie op het beginscherm.
  • Een blogger vernieuwt zijn siteidentiteit en vervangt het standaard favicon door een aangepast pictogram gemaakt van zijn logo.
  • Een freelancer produceert snel de volledige favicon-set voor een klantproject zonder te wachten op de installatie van offline ontwerpsoftware.

Veelgestelde vragen

Welke afbeeldingsformaten kan ik gebruiken als bron?

Elk formaat dat de browser kan decoderen werkt als invoer: JPEG, PNG, WebP, GIF en SVG. Voor SVG-bronnen rasteriseert de browser de vector naar een Canvas vóór het schalen, dus de uitvoer-PNG's zijn rasterafbeeldingen ongeacht.

Waarom is mijn favicon wazig in het browsertabblad?

De 16x16- en 32x32-formaten zijn zeer klein. Als de bronafbeelding fijne details of dunne lijnen bevat, overleven ze de verkleining niet. Een eenvoudig, gedurfd ontwerp met duidelijke vormen werkt bij kleine formaten veel beter dan een complexe illustratie.

Genereert het hulpmiddel ICO-bestanden?

Ja. Naast de zes PNG's stelt het hulpmiddel ook een favicon.ico samen met de afbeeldingen van 16x16, 32x32 en 48x48 in één bestand, wat oudere Windows-browsers en sommige crawlers nog steeds verwachten in de root van de site. Moderne browsers zijn tevreden met de PNG-links, dus het publiceren van beide kost niets en laat elke client zelf kiezen.

Wordt de bronafbeelding verwerkt op een server?

Nee. De Canvas drawImage-aanroepen die elk formaat produceren, worden uitgevoerd in je browsertabblad. De bronafbeelding wordt ingelezen van je lokale schijf en de zes PNG-uitvoers worden in het geheugen aangemaakt en aangeboden als downloads. Er worden geen bestandsdata via een server doorgegeven.

Welk formaat moet ik gebruiken voor het Apple-aanraakpictogram?

iOS en iPadOS gebruiken de PNG van 180x180 pixels waarnaar wordt verwezen door de apple-touch-icon link-tag. Dit formaat wordt gebruikt wanneer een gebruiker je site aan zijn beginscherm toevoegt op een Apple-apparaat. Het hulpmiddel genereert dit bestand samen met de andere formaten.

Kan ik een rechthoekige afbeelding als bron gebruiken?

Ja, maar de uitvoer wordt letter-boxed of pillar-boxed om op het vierkante canvas te passen. Voor de beste resultaten begin je met een vierkante afbeelding of snij je je bronafbeelding bij tot een vierkant voordat je het hulpmiddel gebruikt.

Gerelateerde tools

Houd alles lokaal, verken aanvullende tools.

Alle afbeeldingstools