LumaTool
Lokale Verarbeitung

Favicon-HTML-Tag-Generator

Favicon-HTML-Tag-Generator generates copy-ready favicon HTML link tags for favicon.ico, PNG favicons, Apple Touch Icon, web manifest, theme color, shortcut icon, and mask icon.

Runs locallyNo uploadYour input is processed in your browser.

Favicon-HTML-Tag-Generator

Erzeuge Head-Tags für favicon.ico, PNG-Favicons, Apple Touch Icon, Manifest, theme-color und mask-icon.

Was ist dieses Tool?

A favicon HTML tag generator writes the link and meta tags that belong in the HTML head. It helps avoid missing sizes, incorrect type attributes, inconsistent paths, or forgetting the web manifest and theme color.

Unterstützte Eingaben

  • No upload is required.
  • /favicon.ico
  • /favicon-16x16.png
  • /favicon-32x32.png
  • /apple-touch-icon.png
  • /site.webmanifest

Ausgabedateien

  • favicon.ico link tag
  • 16x16 and 32x32 PNG link tags
  • apple-touch-icon link tag
  • site.webmanifest link tag
  • theme-color meta tag
  • optional shortcut icon and mask icon tags

Größenguide

  • favicon.ico keeps broad compatibility.
  • 16x16 and 32x32 PNG help modern browsers choose crisp tab icons.
  • 180x180 Apple Touch Icon supports iOS home screen shortcuts.
  • site.webmanifest points browsers to PWA icon metadata.
  • theme-color controls browser UI color on supported devices.

Eingabebeispiele

  • /favicon.ico
  • /favicon-32x32.png
  • /apple-touch-icon.png
  • /site.webmanifest
  • #ffffff theme color

Ausgabebeispiele

  • favicon.ico link tag
  • 16x16 and 32x32 PNG link tags
  • apple-touch-icon link tag
  • site.webmanifest link tag
  • theme-color meta tag
  • optional shortcut icon and mask icon tags

Typische Nutzung

  • Create favicon head code for a static HTML site.
  • Add favicon tags to a React or Vite index.html file.
  • Prepare link tags for a Next.js or WordPress project.
  • Check that generated paths match files in the public folder.
  • Copy a complete favicon code block without hand-writing every tag.

Best Practices

  • Start from high-resolution square artwork when possible.
  • Keep the subject centered and avoid tiny text inside small icons.
  • Use transparent backgrounds only when the mark remains visible on light and dark surfaces.
  • Use consistent file paths between exported files and HTML code.
  • After replacing favicons, clear browser cache or change filenames if the old icon remains visible.

Häufige Fehler

  • Uploading a low-resolution source and expecting sharp large icons.
  • Using artwork that touches the edge and gets clipped after rounding or cover mode.
  • Shipping only favicon.ico and forgetting Apple Touch Icon or manifest icons.
  • Leaving HTML paths that do not match the files in the public folder.
  • Not previewing 16x16 and 32x32 outputs before release.

Datenschutz und lokale Verarbeitung

Deine Datei wird lokal im Browser verarbeitet und nicht auf LumaTool-Server hochgeladen. Bilddecoding, Canvas, ICO, ZIP, Manifest und HTML entstehen clientseitig.

Beispiele

Eingabebeispiele

Beispieleingabe 
/favicon.ico
/favicon-32x32.png
/apple-touch-icon.png
Beispielausgabe 
favicon.ico link tag
16x16 and 32x32 PNG link tags
apple-touch-icon link tag

Favicon-HTML-Tag-Generator generates copy-ready favicon HTML link tags for favicon.ico, PNG favicons, Apple Touch Icon, web manifest, theme color, shortcut icon, and mask icon.

Ausgabebeispiele

Beispieleingabe 
favicon paths and theme color
Beispielausgabe 
favicon.ico link tag
16x16 and 32x32 PNG link tags
apple-touch-icon link tag
site.webmanifest link tag
theme-color meta tag

Deine Datei wird lokal im Browser verarbeitet und nicht auf LumaTool-Server hochgeladen. Bilddecoding, Canvas, ICO, ZIP, Manifest und HTML entstehen clientseitig.

Datenschutzhinweis

Deine Datei wird lokal im Browser verarbeitet und nicht auf LumaTool-Server hochgeladen. Bilddecoding, Canvas, ICO, ZIP, Manifest und HTML entstehen clientseitig.

Verwendung

  1. Schritt 1. Enter your favicon file paths.
  2. Schritt 2. Select which icon tags to include.
  3. Schritt 3. Set the theme color and optional mask icon.
  4. Schritt 4. Copy the generated HTML code into your website head.

Praxisbeispiele

Create favicon head code for a static HTML site

Create favicon head code for a static HTML site.

Add favicon tags to a React or Vite index

Add favicon tags to a React or Vite index.html file.

Prepare link tags for a Next

Prepare link tags for a Next.js or WordPress project.

Typische Anwendungsfälle

  • Create favicon head code for a static HTML site.
  • Add favicon tags to a React or Vite index.html file.
  • Prepare link tags for a Next.js or WordPress project.
  • Check that generated paths match files in the public folder.
  • Copy a complete favicon code block without hand-writing every tag.

FAQ

Where should I place favicon HTML tags?

Place them inside the HTML head. In Vite or React projects this is often index.html; in framework projects use the framework head or metadata system.

Do I still need favicon.ico?

Yes, it is still useful for compatibility even when PNG icons are present.

What is apple-touch-icon?

It is the icon iOS uses when a user saves a website to the home screen.

What is site.webmanifest?

It is a web manifest file that tells browsers about PWA icons, display mode, theme color, and related install metadata.

Why is my favicon not updating?

Favicons are cached heavily. Verify paths, clear cache, and consider changing filenames when replacing icons.

Can I use this code in React or Vite?

Yes. Put the files in public/ and paste the generated tags into index.html unless your framework uses a metadata API.

Wofür eignet sich Favicon-HTML-Tag-Generator besonders?

Favicon-HTML-Tag-Generator eignet sich für schnelle Icon-Tools-Aufgaben im Browser, etwa Prüfen, Umwandeln, Bereinigen oder Formatieren.

Wie wird meine Eingabe verarbeitet?

Deine Datei wird lokal im Browser verarbeitet und nicht auf LumaTool-Server hochgeladen. Bilddecoding, Canvas, ICO, ZIP, Manifest und HTML entstehen clientseitig.

Ähnliche Tools

F

Favicon-Generator

Erstelle favicon.ico, PNGs, Apple Touch Icon, Android-Icons, Manifest, Vorschauen, HTML-Tags und ZIP lokal im Browser.

Icon-Tools Verfügbar Lokale Verarbeitung Kein Upload Jetzt nutzen A

App-Icon-Generator

Erzeuge iOS-, Android- und PWA-Icongrößen aus PNG, JPG, WebP oder SVG mit Safe-Area- und Rundungs-Vorschau.

Icon-Tools Verfügbar Lokale Verarbeitung Kein Upload Jetzt nutzen I

ICO-Konverter

PNG, JPG und WebP in mehrgrößige favicon.ico-Dateien umwandeln.

Bild-Tools Verfügbar Lokale Verarbeitung Kein Upload Jetzt nutzen S

Sichere SVG-Vorschau

SVG-Markup isoliert anzeigen und Größe, Farben und Risiken prüfen.

Bild-Tools Verfügbar Lokale Verarbeitung Kein Upload Jetzt nutzen S

SVG-Optimierer

Komprimiere, bereinige, prüfe, kopiere und lade SVGs herunter, ohne Scripts, Events, Metadaten und riskante Inhalte.

Icon-Tools Verfügbar Lokale Verarbeitung Kein Upload Jetzt nutzen