Favicon Generator - Text to Favicon.ico

Maak direct aangepaste favicons - perfect voor websites, apps en PWA's

Genereer uw favicon

Schakel SVG in

Hoe u favicons op uw website installeert

Verbeter de weergave van uw website op alle apparaten door aangepaste favicons te installeren. Volg deze eenvoudige stappen om uw nieuw gegenereerde favicon-pakket te integreren:

  1. Genereer uw Favicon: gebruik onze Favicon Generator om aangepaste pictogrammen te maken met de gewenste tekst, kleuren, vorm en lettertype. Klik op 'Genereer Favicon' om uw faviconpakket te downloaden.

  2. Downloaden en uitpakken: Eenmaal gegenereerd, downloadt u het favicon-pakket en extraheert u de bestanden naar de hoofdmap van uw website.

  3. HTML-code toevoegen: plaats de volgende code in het head-gedeelte van uw HTML-bestand om compatibiliteit tussen verschillende apparaten en browsers te garanderen:

<link rel="apple-touch-icon" sizes="57x57" href="/favicon-57x57.png" type="image/png" />
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60x60.png" type="image/png" />
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72x72.png" type="image/png" />
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114x114.png" type="image/png" />
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120x120.png" type="image/png" />
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144x144.png" type="image/png" />
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152x152.png" type="image/png" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png" type="image/png" />
<link rel="icon" sizes="16x16" href="/favicon-16x16.png" type="image/png" />
<link rel="icon" sizes="32x32" href="/favicon-32x32.png" type="image/png" />
<link rel="icon" sizes="96x96" href="/favicon-96x96.png" type="image/png" />
<link rel="icon" sizes="192x192" href="/favicon-192x192.png" type="image/png" />
<link rel="icon" sizes="512x512" href="/favicon-512x512.png" type="image/png" />
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#FFFFFF" />
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="/favicon-512x512.png" />

Hoe de Favicon Generator te Gebruiken

  1. Voer de gewenste tekst in (1-2 tekens).
  2. Pas de kleuren, vorm en lettertype aan.
  3. Klik op 'Genereer Favicon'.
  4. Download je favicon-pakket.
  5. Implementeer het met de verstrekte code.

Grootten van de gegenereerde Favicons

Onze favicon-generator maakt iconen in deze essentiële afmetingen:

Veelvoorkomende Apple Touch Icon Grootten:

  • 57x57px: iPhone en iPod touch.
  • 60x60px: Touch-iconen voor de nieuwste iPhones.
  • 72x72px: Iconen voor iPad.
  • 76x76px: iPad met Retina-display.
  • 114x114px: iPhone met Retina-display.
  • 120x120px: Retina-touch-iconen voor de nieuwste iPhones.
  • 144x144px: iPad met Retina-display.
  • 152x152px: iPad met Retina-display.
  • 180x180px: iPhone 6+ en nieuwe Retina-iconen.

Algemene Icon Grootten:

  • 16x16px: Favicons voor browsertabbladen.
  • 32x32px: Standaardgrootte favicons.
  • 48x48px: Windows snelkoppelingen.
  • 64x64px: Windows snelkoppelingen.
  • 96x96px: Chrome- en Android-apparaten.
  • 192x192px: Android-apparaten.
  • 512x512px: Iconen voor hoge resolutie schermen en bepaalde Progressive Web Apps (PWA's).

Aanvullende Formaten:

  • favicon.ico (32x32px): Een icoonbestand met meerdere resoluties voor maximale compatibiliteit met oudere systemen en browsers.
  • SVG-formaat: Indien ingeschakeld, bevat het pakket ook een schaalbare vectorafbeelding-icoon (SVG), ideaal voor verschillende groottes en apparaten vanwege zijn schaalbaarheid.

Waarom Meerdere Favicon Grootten Belangrijk Zijn

In de huidige multi-device wereld is het hebben van meerdere favicon-groottes cruciaal:

  • Zorgt voor compatibiliteit op alle apparaten en browsers
  • Verbetert de visuele helderheid op hoge resolutie schermen
  • Voldoet aan de eisen voor Progressive Web Apps (PWA's)
  • Verbetert herkenbaarheid in drukke browsertabbladen

Veelgestelde vragen