TF

Ontwerp en CSS

Favicon-generator

Maak een favicon van tekst, emoji of een afbeelding en download favicon.ico, PNG-pictogrammen, apple-touch-icon en een manifest.

180×180
48×48
32×32
16×16
My App

De ZIP bevat favicon.ico (16, 32, 48 px), PNG-pictogrammen tot 512 px, apple-touch-icon.png, site.webmanifest en de HTML-tags hieronder.

Toevoegen aan je <head>
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#0f766e" />

Wat is deze tool?

Een favicon is het kleine pictogram in browsertabbladen, bladwijzers en op startschermen. Typ initialen of een emoji, of upload een logo, kies kleuren en een vorm en bekijk het op echte formaten. Download een kant-en-klare ZIP met alle bestanden die moderne browsers en telefoons verwachten, plus de HTML voor je pagina.

De ZIP bevat favicon.ico met afbeeldingen van 16, 32 en 48 px, PNG-pictogrammen, een apple-touch-icon van 180 px voor het startscherm van iPhone en iPad, pictogrammen van 192 en 512 px voor Android en PWA’s, en een site.webmanifest die ernaar verwijst.

Kleine formaten worden apart getekend in plaats van alleen verkleind, zodat letters scherp blijven. Alles wordt in je browser op een canvas getekend — geüploade afbeeldingen gaan nergens naartoe.

Zo gebruik je: Favicon-generator

  1. Kies Tekst of emoji en typ tot vier tekens, of kies Afbeelding en upload een logo.
  2. Kies een achtergrondkleur, vorm (vierkant, afgerond of cirkel) en inhoudsgrootte — of een transparante achtergrond.
  3. Bekijk de voorbeelden op 16, 32, 48 en 180 pixels, inclusief het browsertabblad.
  4. Download de ZIP (of alleen favicon.ico) en plak de HTML-tags in de <head> van je pagina.

Voorbeelden

HTML-tags

<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Veelgestelde vragen

Welke faviconformaten heb ik nodig?

Een favicon.ico met afbeeldingen van 16, 32 en 48 px dekt desktopbrowsers. Voeg een apple-touch-icon van 180 px toe voor iOS en PNG’s van 192 en 512 px in een webmanifest voor Android en installeerbare webapps. De ZIP bevat ze allemaal.

Waar zet ik de bestanden?

Upload ze naar de hoofdmap van je site (dezelfde map als je startpagina) en plak de HTML-tags in de <head> van elke pagina.

Kan ik een emoji als favicon gebruiken?

Ja. Typ een emoji in het tekstveld. Die wordt getekend met het emoji-lettertype van je apparaat en ziet er als afbeelding overal hetzelfde uit.

Waarom zie ik mijn nieuwe favicon niet?

Browsers cachen favicons hardnekkig. Herlaad de pagina geforceerd, open haar in een privévenster of wis de browsercache.

Later meer mogelijkheden nodig?

Premiumtools, hogere limieten en API-toegang staan op de planning. V1 blijft gratis en privé in je browser.