Favicon-Generator

Was ist ein Favicon-Generator?#

Ein Favicon ist das winzige Icon, das in einem Browser-Tab, in einer Lesezeichenliste, in der Vorschau „Zum Startbildschirm hinzufügen“ eines Handys und in einer Windows-Kachel erscheint. Das Unbequeme daran ist, dass „ein Favicon“ keine einzelne Datei ist — verschiedene Plattformen erwarten verschiedene Größen und verschiedene Dateinamen. Ein Desktop-Browser will ein klassisches favicon.ico, iOS will ein 180×180 apple-touch-icon.png, eine installierbare PWA will 192 und 512 in einer site.webmanifest, und moderne Browser greifen zudem eigenständige PNGs ab. All diese manuell zu erzeugen plus die <head>-Tags, die sie verdrahten, ist genau die Art fummelige Aufgabe, die man nie zweimal von Hand machen sollte.

Diese Seite erzeugt das vollständige Set aus einer einzigen Quelle: entweder einem Bild, das Sie liefern, oder einem Buchstaben auf einem einfarbigen Hintergrund (praktisch für ein schnelles „Anfangsbuchstabe“-Markenzeichen). Wählen Sie die Größen, die Sie brauchen, und sie packt alles in eine .zip — Multi-Image-ICO, eigenständige PNGs, das Webmanifest und ein HTML-Schnipsel, das die exakten <link>- und <meta>-Tags zum Einfügen auflistet. Die gesamte Rasterung passiert in Ihrem Browser.

Verwendung#

1. Wählen Sie eine Quelle:
   • Bild — ziehen Sie (oder wählen Sie) ein ungefähr quadratisches Bild. Es wird in jede gewählte Größe gezeichnet.
   • Buchstabe — tippen Sie ein oder zwei Zeichen (Standard A), wählen Sie eine Hintergrundfarbe (Standard Himmelblau) und eine Textfarbe (Standard Weiß). Der Buchstabe wird in jeder Größe auf dem Hintergrund zentriert.
2. Aktivieren Sie die Größen, die Sie wollen: 16, 32, 48, 180, 192, 512. Alle sechs sind standardmäßig aktiviert. Die 48 lebt ausschließlich innerhalb von favicon.ico (kein eigenständiges PNG) und wird automatisch mit gebündelt, wenn 16 und 32 aktiv sind.
3. Beobachten Sie die Vorschau-Canvas — sie rendert die größte aktivierte Größe auf einer Transparenz-Schachbrettfläche, damit Sie etwaige transparente Bereiche sehen.
4. Klicken Sie auf .zip herunterladen. Das Archiv enthält bei der Standardeinstellung aller Größen:
   • favicon.ico — ein Multi-Image-ICO, das 16, 32 und 48 als eingebettete PNGs bündelt (das Vista+-Format, das jeder moderne Browser akzeptiert).
   • favicon-16x16.png, favicon-32x32.png — eigenständige PNGs.
   • apple-touch-icon.png — das 180×180-iOS-Icon.
   • android-chrome-192x192.png, android-chrome-512x512.png — PWA-Manifest-Icons.
   • site.webmanifest — referenziert die 192/512-Icons, mit Theme- und Hintergrundfarben.
   • html-snippet.html — die <link rel="icon">, <link rel="apple-touch-icon">, <link rel="manifest">- und <meta name="theme-color">-Tags.
5. Entpacken Sie in Ihr Site-Root, fügen Sie den Schnipsel in Ihren <head> ein, und die Icons werden von / aufgelöst.

Hauptfunktionen#

• Ein vollständiges, konventionell benanntes Set in einer Zip. Die Dateinamen (favicon.ico, apple-touch-icon.png, android-chrome-512x512.png, site.webmanifest) entsprechen dem, was Browser und Build-Tools standardmäßig im Site-Root suchen.
• Selbst geschriebener ICO-Kodierer. Ein echtes Multi-Image-Vista+-ICO (ICONDIR + ICDIRENTRY-Tabelle + eingebettete PNG-Payloads), von Grund auf neu geschrieben — kein einziges 32×32-Stub-Bild.
• Buchstaben-Modus für sofortige Marken-Markierungen. Zwei Zeichen, zwei Farbwähler, fertig — nützlich für interne Tools und Demos, die in dreißig Sekunden ein erkennbares Icon brauchen.
• Nur die Dateien, die Sie tatsächlich brauchen. Deaktivieren Sie eine Größe und weder ihr PNG noch ihr Manifest-Eintrag wird erzeugt; der HTML-Schnipsel wird passend neu erzeugt.
• Direkt einfügbarer Head-Schnipsel. Die exakten <link>- und <meta>-Zeilen, beschränkt auf nur die vorhandenen Assets, sodass Sie keine Referenzen auf Dateien einfügen, die Sie nicht erzeugt haben.
• 100 % lokal. Das Quellbild oder der Buchstabe wird im Browser gerastert; die Zip wird im Browser zusammengesetzt. Kein Upload.

Ausführliches Beispiel#

Sie wollen ein Favicon für ein Nebenprojekt namens „Glide“. Wählen Sie Quelle: Buchstabe, tippen Sie G, setzen Sie Hintergrund auf #0ea5e9 und Textfarbe auf #ffffff, belassen Sie alle sechs Größen aktiviert und klicken Sie auf .zip herunterladen. Das Entpacken liefert:

favicon.ico
favicon-16x16.png
favicon-32x32.png
apple-touch-icon.png
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest
html-snippet.html

html-snippet.html enthält exakt:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">

Legen Sie diese acht Dateien in Ihr Site-Root, fügen Sie die sechs Zeilen in Ihren <head> ein, und jede Plattform — Browser-Tab, iOS-Startbildschirm, Android-PWA — löst das richtige Icon auf.

FAQ#

Warum gibt es kein eigenständiges 48×48-PNG?#

48 wird ausschließlich innerhalb von favicon.ico verbraucht (einige Legacy-Tools lesen den 48-Eintrag aus dem ICO). Ein eigenständiges favicon-48x48.png wäre nur Ballast, den kein Browser abruft, daher bündelt das Werkzeug 48 im ICO und lässt die eigenständige Datei weg.

Brauche ich wirklich alle sechs Größen?#

Für volle Abdeckung, ja. Wenn Sie nur den Browser-Tab interessiert und nicht iOS oder PWA, deaktivieren Sie 180, 192 und 512 und Sie erhalten nur das ICO plus die 16/32-PNGs — ein viel kleineres Bündel. Der Schnipsel enthält dann nur die icon-Links, keine Manifest- oder Apple-Touch-Zeilen.

Das ICO wird als „eingebettetes PNG“ beschrieben — ist das gültig?#

Ja. Seit Windows Vista kann ein ICO PNG-Payloads einbetten (statt des alten BMP-Formats), und jeder moderne Browser liest diese Form. Das vermeidet einen separaten BMP-Kodierer und erzeugt kleinere Dateien für die Größe 48.

Mein Buchstabe wirkt auf einer Größe leicht dezentriert.#

Der Buchstabe wird bei jeder Größe mit einer konsistenten Schrift auf der Canvas zentriert; sehr quadratische Buchstaben (wie M) und Buchstaben mit Ober- oder Unterlängen können aufgrund der Schriftmetriken leicht hoch oder niedrig wirken. Wenn pixelperfekte Zentrierung wichtig ist, rendern Sie die Markierung in einem Bildeditor und verwenden Sie Quelle: Bild.