Afbeelding- en assettools

Gratis Favicon HTML taggenerator

Genereer favicon- en web app icon-tags voor statische websites.

Tool laden...

Wat is Favicon HTML taggenerator?

Favicon-markup vertelt browsers en apparaten welke iconen moeten worden gebruikt voor tabbladen, bladwijzers, snelkoppelingen op het startscherm en web-app-installaties. Een kleine statische site kan nog steeds verschillende iconformaten nodig hebben omdat desktopbrowsers, mobiele browsers en opgeslagen webapps verschillende bestanden gebruiken.

Snel antwoord

Genereer favicon HTML-tags, Apple touch icon-referenties en web app manifest-items voor statische websites. Neem zowel SVG- als fallback-iconpaden op voor brede browserondersteuning.

Last updated: 2026-06-11

Beperkingen

  • Iconbestanden moeten bestaan op de opgegeven paden in de gepubliceerde uitvoer. De gegenereerde tags zijn alleen verwijzingen; u moet de werkelijke iconbestanden op die paden maken of plaatsen.
  • Het Apple touch-icon heeft specifieke formaatverwachtingen. Apple-apparaten verwachten een PNG van 180 bij 180 pixels voor de beste resultaten wanneer gebruikers de pagina aan hun startscherm toevoegen.
  • Het webmanifest-fragment vereist geldige JSON. Een enkele syntaxisfout in het manifestbestand kan voorkomen dat browsers de app-metagegevens helemaal lezen.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Voer het basispad in waar uw iconbestanden worden gepubliceerd.
  2. Voeg de app- of sitenaam plus thema- en achtergrondkleuren toe.
  3. Kopieer de gegenereerde link- en meta-tags naar uw HTML-head.
  4. Kopieer het manifest JSON-fragment naar uw site.webmanifest-bestand als u dat gebruikt.

Waarvoor je het kunt gebruiken

  • Favicon-markup toevoegen aan een gewone HTML-website.
  • Iconpaden voorbereiden voor GitHub Pages.
  • Een klein webmanifest JSON-fragment maken.

Gebruik

Praktische voorbeelden

Voorbeeld

Statische site icon-configuratie

Een GitHub Pages-site slaat iconen op in /icons. De generator maakt de favicon, SVG-icon, Apple touch icon, manifest-link en themakleurtags.

Voorbeeld

Startscherm opslaan ondersteuning

Een mobiele bezoeker slaat de site op het startscherm van hun telefoon op. Het Apple touch-icon en de manifest-items helpen de opgeslagen snelkoppeling er verzorgd uit te laten zien.

Veelgemaakte fouten

  • Iconpaden gebruiken die na implementatie onder een submap breken.
  • Een Apple touch-icon vergeten voor mobiele startschermopslag.
  • Een themakleur gebruiken die niet overeenkomt met de werkelijke site-header.

Verificatie

  1. Open de gepubliceerde pagina en controleer het browsertabblad op het favicon. Als het icon niet verschijnt, controleer dan of het afbeeldingspad overeenkomt met de werkelijke bestandslocatie.
  2. Gebruik op een iOS-apparaat of simulator Delen > Voeg toe aan startscherm en bevestig dat de opgeslagen snelkoppeling het Apple touch-icon gebruikt.

FAQ

Vragen over Favicon HTML taggenerator

Heb ik nog steeds favicon.ico nodig?

Het is nog steeds nuttig als brede fallback. Veel moderne configuraties bevatten ook SVG- en PNG-iconen.

Waar moeten iconbestanden staan?

Gebruik een stabiele openbare map zoals /icons of /assets/icons en zorg ervoor dat hetzelfde pad bestaat in de build-output.

Is een webmanifest vereist?

Nee. Het is optioneel voor een normale website, maar nuttig als u beter gedrag voor opgeslagen apps op mobiel en desktop wilt.

Gerelateerde tools

Meer afbeelding- en assettools

Probeer ook

Probeer ook

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool