Zum Inhalt springen
TextArray1.87.0
100% lokal

Favicon-HTML-Generator

Erzeugen Sie die <head>-Tags, die Ihre Website für ihr Favicon, Touch-Icon und Theme-Farben benötigt.

Ausgabe
Verwandte Tools
Meta-Tag-GeneratorEntwickler-Tools
Web-App-Manifest-GeneratorEntwickler-Tools
Humans.txt-GeneratorEntwickler-Tools
i18n SchlüsseldiffEntwickler-Tools
TOML-zu-JSON-KonverterEntwickler-Tools
SQL zu JSONEntwickler-Tools
Favicon-HTML-Generator
Ein Favicon ist mehr als eine Datei: Ein Browser-Tab benötigt eine .ico-Datei, ein Home-Screen eines Smartphones benötigt ein 180×180 apple-touch-icon, der gepinnte Safari-Tab benötigt ein einfarbiges SVG-Mask, und ein PWA-Installationsdialog liest die Icons aus dem Manifest. Dieses Tool schreibt die exakten <link>- und <meta>-Tags für alle aus einem Basispfad und einer Reihe von Icon-Größen, damit Sie einen Block in <head> kopieren, anstatt ihn aus fünf verschiedenen Spezifikationen zusammenzustellen.
Geben Sie den Basispfad an, wo die Icon-Dateien verbleiben – das Stammverzeichnis oder ein Unterordner wie /icons/ – und jedes href wird entsprechend erstellt. Toggle ICO, PNG und SVG unabhängig: PNG fügt auch das apple-touch-icon in der festen Größe 180×180 hinzu, die Apple erwartet, und SVG fügt ein mask-icon hinzu, dessen Farbe von Ihrer Light-Theme-Color stammt (oder Dark, falls nur das gesetzt ist). Jede Light- und Dark-Theme-Color wird zu einem separaten <meta name="theme-color">-Tag mit einer prefers-color-scheme-Abfrage, damit die Browser-Chrome-Anpassung in beiden Modi der Seite entspricht. Ein separater Schalter fügt die älteren msapplication-Tags hinzu, die einige Windows-Tile-Szenarien noch benötigen.
Das Feld "Größen" akzeptiert komma- oder zeilengetrennte Einträge – "16x16, 32x32, 192x192" – und eine bloße Zahl wie "48" ist eine Kurzform für ein quadratisches Icon; unerkannte Einträge werden gelöscht, nicht abgelehnt. Aktivieren Sie die Datei-Checkliste, und die Ausgabe endet mit einem Kommentar, der jeden referenzierten Pfad in der richtigen Reihenfolge auflistet – das ist die Liste, die Sie tatsächlich hochladen müssen.
Alles läuft in Ihrem Browser ab: Nichts, was Sie eingeben, wird irgendwo versendet. Kopieren Sie das Ergebnis in den <head> Ihrer Seite, laden Sie es als .txt-Datei herunter, oder senden Sie es an das Input eines anderen Tools, um es weiter anzupassen.
Häufige Fragen
Erstellt dieses Tool die tatsächlichen Icon-Bilddateien?
Nein. Es erzeugt nur das HTML, das auf sie verweist – Sie müssen favicon.ico, die PNGs, favicon.svg und safari-pinned-tab.svg in den Größen, die Sie aufgelistet haben, immer noch mit einem Bild-Editor oder einem speziellen Icon-Exporter exportieren.
Warum ist apple-touch-icon immer 180×180?
Das ist die Größe, die Apples eigene Richtlinien für das größte moderne iPhone-Home-Screen-Icon angeben; iOS skaliert es für ältere Geräte herunter, sodass eine Datei den gesamten Bereich abdeckt.
Welche Farbe verwendet das mask-icon?
Ihre Light-Theme-Color, oder die Dark-Farbe, falls Sie Light leer gelassen haben. Das gepinnte Safari-Tab-Icon wird in einer einzelnen flachen Farbe gerendert, die Sie wählen, nicht in den eigenen Farben des Kunstwerks.
Benötige ich die Windows-Tile-Tags?
Nur, wenn Sie ältere Windows/Edge-Tile-Pinning-Szenarien unterstützen. Die meisten Websites können das deaktiviert lassen – modernes Windows verwendet dieselben Manifest- und PNG-Icons wie alles andere.
Wird alles, was ich eingebe, irgendwo hochgeladen?
Nein. Das HTML wird vollständig in Ihrem Browser aus den von Ihnen eingestellten Optionen erzeugt – nichts wird an einen Server versendet.