jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

Bild- und Asset-Tools

Kostenlose Favicon-HTML-Tag-Generator

Erzeuge Favicon- und Web-App-Icon-Tags für statische Websites.

Tool wird geladen...

Was ist Favicon-HTML-Tag-Generator?

Favicon-Markup teilt Browsern und Geraten mit, welche Symbole fur Tabs, Lesezeichen, Startbildschirm-Verknupfungen und Web-App-Installationen verwendet werden sollen. Eine kleine statische Site kann dennoch mehrere Symbolformate benotigen, da Desktop-Browser, Mobilbrowser und gespeicherte Web-Apps unterschiedliche Dateien verwenden.

Kurze Antwort

Generieren Sie Favicon-HTML-Tags, Apple-Touch-Icon-Referenzen und Web-App-Manifest-Eintrage fur statische Websites. SchlieBen Sie sowohl SVG- als auch Fallback-Symbolpfade fur eine breite Browser-Unterstutzung ein.

Last updated: 2026-06-11

Einschränkungen

  • Symboldateien mussen an den angegebenen Pfaden in der veroffentlichten Ausgabe existieren. Die generierten Tags sind nur Referenzen; Sie mussen die tatsachlichen Symboldateien an diesen Pfaden erstellen oder platzieren.
  • Das Apple-Touch-Icon hat spezifische GroBenerwartungen. Apple-Gerate erwarten ein 180x180 Pixel groBes PNG fur beste Ergebnisse, wenn Benutzer die Seite auf ihrem Startbildschirm speichern.
  • Das Web-Manifest-Snippet erfordert gultiges JSON. Ein einzelner Syntaxfehler in der Manifest-Datei kann Browser daran hindern, die App-Metadaten vollstandig zu lesen.

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

So nutzt du dieses Tool

  1. Geben Sie den Basispfad ein, unter dem Ihre Symboldateien veroffentlicht werden.
  2. Fugen Sie den App- oder Site-Namen sowie Themen- und Hintergrundfarben hinzu.
  3. Kopieren Sie die generierten Link- und Meta-Tags in Ihren HTML-head.
  4. Kopieren Sie das Manifest-JSON-Snippet in Ihre site.webmanifest-Datei, falls Sie eine verwenden.

Wofür du es nutzen kannst

  • Favicon-Markup zu einer einfachen HTML-Website hinzufugen.
  • Symbolpfade fur GitHub Pages vorbereiten.
  • Ein kleines Web-Manifest-JSON-Snippet erstellen.

Anwendungsfalle

Praxisbeispiele

Beispiel

Statische Site-Symbolkonfiguration

Eine GitHub-Pages-Site speichert Symbole in /icons. Der Generator erstellt die Favicon-, SVG-Symbol-, Apple-Touch-Icon-, Manifest-Link- und Theme-Color-Tags.

Beispiel

Unterstutzung fur Startbildschirm-Speicherung

Ein mobiler Besucher speichert die Site auf seinem Telefon-Startbildschirm. Das Apple-Touch-Icon und die Manifest-Eintrage helfen dabei, dass die gespeicherte Verknupfung professionell aussieht.

Haufige Fehler

  • Symbolpfade zu verwenden, die nach der Bereitstellung in einem Unterordner brechen.
  • Ein Apple-Touch-Icon fur mobile Startbildschirm-Speicherungen zu vergessen.
  • Eine Themenfarbe zu verwenden, die nicht zur tatsachlichen Site-Kopfzeile passt.

Überprüfung

  1. Offnen Sie die veroffentlichte Seite und prufen Sie den Browser-Tab auf das Favicon. Wenn das Symbol nicht erscheint, uberprufen Sie, ob der Bildpfad mit dem tatsachlichen Dateispeicherort ubereinstimmt.
  2. Verwenden Sie auf einem iOS-Gerat oder Simulator Teilen > Zum Startbildschirm und bestatigen Sie, dass die gespeicherte Verknupfung das Apple-Touch-Icon-Bild verwendet.

FAQ

Fragen zu Favicon-HTML-Tag-Generator

Benotige ich immer noch favicon.ico?

Es ist immer noch als breiter Fallback nutzlich. Viele moderne Konfigurationen enthalten auch SVG- und PNG-Symbole.

Wo sollen Symboldateien liegen?

Verwenden Sie einen stabilen offentlichen Ordner wie /icons oder /assets/icons und stellen Sie sicher, dass derselbe Pfad in der Build-Ausgabe existiert.

Ist ein Web-Manifest erforderlich?

Nein. Es ist fur eine normale Website optional, aber nutzlich, wenn Sie ein besseres Verhalten fur gespeicherte Apps auf mobilen Geraten und Desktop wunschen.

Verwandte Tools

Weitere bild- und asset-tools

Auch ausprobieren

Auch ausprobieren

Css

CSS Carousel Generator

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

Tool öffnen