DevToolPal
NL

Favicon generator

Maak een favicon van tekst, een emoji of je logo: favicon.ico, PNG-formaten, Apple touch icon, web manifest en HTML-tags in één ZIP.

Draait lokaal, wordt nooit geüpload

Opties

Bron
Vorm

Voorbeeld

HTML voor <head>

Wat deze tool doet

De favicon generator maakt van een letter, een emoji of je logo alle iconen die een moderne website nodig heeft. Hij rendert het icoon in elk formaat, verpakt favicon.ico, schrijft een web app manifest en geeft je de <link>-tags om in de <head> van je pagina te plakken. Download alles als één ZIP.

Beginnen met tekst is de snelste weg naar een strak icoon: typ één tot drie tekens of een emoji en kies kleuren, een lettertype en een vorm (vierkant, afgerond of cirkel). Teksticonen krijgen ook een schaalbare favicon.svg, die op elk formaat en op schermen met hoge pixeldichtheid scherp blijft.

Zo gebruik je het

  1. Kies Tekst of Afbeelding als bron. Voor een afbeelding klik je op Afbeelding kiezen… en kies je een vierkante PNG, SVG of JPG.
  2. Stel de Vorm in, en zet Achtergrond vullen aan om het icoon op een gekleurde tegel te zetten, of uit om het transparant te houden.
  3. Vul je Sitenaam in: dat is het label onder het icoon wanneer iemand je site aan het startscherm van een telefoon toevoegt, en het wordt in site.webmanifest (Android) en de apple-mobile-web-app-title-tag (iOS) gezet. Stel daarna de Map voor iconen in waar je de bestanden uploadt, meestal /.
  4. Bekijk het voorbeeld: het icoon van 16 px is wat mensen in een browsertabblad zien.
  5. Klik op ZIP downloaden, upload de bestanden naar je site en plak de HTML in de <head>.

Voorbeeld

De standaardinstellingen leveren deze tags op:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="apple-mobile-web-app-title" content="My Site">

Tips

  • Browsers cachen favicons agressief. Open de pagina na het vervangen van een icoon in een privévenster om de wijziging te zien.
  • iOS negeert transparantie in het Apple touch icon en vult die met zwart, dus houd de achtergrond gevuld voor een strak icoon op het beginscherm.

Veelgestelde vragen

› Welke bestanden krijg ik?

favicon.ico (16, 32 en 48 px), PNG-iconen van 16, 32 en 48 px, een Apple touch icon van 180 px, Android-iconen van 192 en 512 px, site.webmanifest, de HTML-tags, en favicon.svg als je met tekst begint.

› Wordt mijn logo ergens geüpload?

Nee. De afbeelding wordt in je browser met een canvas gelezen en geschaald; ook de ZIP wordt op je apparaat gemaakt.

› Welke afbeelding werkt het best?

Een vierkante PNG of SVG van minstens 512 × 512 px met een transparante achtergrond. Eenvoudige, krachtige vormen blijven leesbaar op 16 px; fijne details en dunne tekst niet.

› Heb ik favicon.ico nog nodig?

Ja, voor oudere browsers en voor tools die /favicon.ico rechtstreeks opvragen. Moderne browsers gebruiken de PNG- of SVG-links in de HTML.