Favicon erstellen — favicon.ico und PNG-Icons
Browser-Tool, das favicon.ico, PNG-Icons in mehreren Größen, ein Manifest und HTML-Code erstellt
Verarbeitung im Browser · kein Hochladen
Ein oder zwei Zeichen sind am besten lesbar. Bis zu 4 sind möglich.
Wird als „name“ in site.webmanifest eingetragen.
Worum es geht
Ein Favicon ist das kleine Symbol in Browser-Tabs, Lesezeichen und auf dem Home-Bildschirm. Dieses Tool macht aus einem Logo, ein paar Buchstaben oder einem Emoji alle benötigten Größen und liefert die passenden HTML-Tags und das Web-App-Manifest gleich mit. Das Bild wird nur in Ihrem Browser verarbeitet.
So funktioniert es
- Wählen Sie unter Erstellen aus: Bei Text oder Emoji bestimmen Sie Text, Schrift und Hintergrund, bei Einem Bild verwenden Sie Ihre Logodatei.
- Legen Sie bei einem Bild unter So wird es quadratisch fest, ob die Mitte zugeschnitten oder ein Rand hinzugefügt wird, und ob Transparenter Hintergrund aktiv ist. Wählen Sie eine Form: Quadrat, abgerundetes Quadrat oder Kreis.
- Füllen Sie bei Bedarf Name der Website, Kurzname und Designfarbe aus; diese Angaben landen in site.webmanifest und im HTML-Code.
- Prüfen Sie die Vorschau jeder Größe und laden Sie die Dateien einzeln herunter oder klicken Sie auf Alle herunterladen (ZIP).
- Laden Sie die Dateien ins Stammverzeichnis Ihrer Website hoch und fügen Sie den Code für den
<head>Ihres HTML ein.
Dateien und Regeln
| Datei | Größe | Verwendung |
|---|---|---|
| favicon.ico | 16, 32, 48 | Standard-Icon des Browsers, ältere Umgebungen |
| favicon-16x16.png, favicon-32x32.png | 16, 32 | Browser-Tab |
| favicon-48x48.png | 48 | Desktop-Verknüpfung |
| apple-touch-icon.png | 180 | iOS-Home-Bildschirm (deckendes Quadrat bis an den Rand) |
| android-chrome-192x192.png, android-chrome-512x512.png | 192, 512 | Android, PWA |
| android-chrome-maskable-512x512.png (optional) | 512 | adaptives Android-Icon: Motiv in der sicheren Zone in der Mitte, Hintergrund bis an den Rand |
- Masterbild: Zuerst wird ein Quadrat mit 512 px gezeichnet, aus dem alle Größen entstehen. Kleine Größen werden Schritt für Schritt halbiert, das ergibt sauberere Kanten als ein einziger großer Sprung.
- ICO-Aufbau: ein 6-Byte-Header, pro Bild ein 16-Byte-Verzeichniseintrag, danach die PNG-Daten.
- Textgröße: Die Textbreite bleibt unter etwa 78 % der Kachel, die Schriftgröße unter 72 %.
- Textfarbe: Sie richtet sich nach dem Hintergrund und wird gut lesbares Schwarz oder Weiß; ändern können Sie sie trotzdem.
Codebeispiel
<link rel="icon" href="/favicon.ico" sizes="48x48">
<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">Häufige Fragen
Wird mein Bild hochgeladen?
Nein. Das Skalieren und das Zusammensetzen der ICO-Datei passieren in Ihrem Browser, und die Ergebnisse werden nur auf Ihr Gerät heruntergeladen.
Welche Dateien werden erstellt?
favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180), android-chrome-192x192.png, android-chrome-512x512.png und eine favicon.ico mit 16, 32 und 48. Dazu kommen eine site.webmanifest und die HTML-Link-Tags, und alles lässt sich als eine ZIP-Datei herunterladen.
Was steckt in der favicon.ico?
Bilder mit 16, 32 und 48 Pixeln, als PNG-Datenströme in einem ICO-Container gespeichert. Dieses Format lesen aktuelle Browser und Windows seit Vista. Header und Verzeichnis der ICO schreibt das Tool selbst, und die Tests prüfen die Magic Bytes (00 00 01 00) und die Zahl der Einträge.
Was passiert mit einem nicht quadratischen Bild?
Ein Favicon ist quadratisch, daher wird standardmäßig das größte mittige Quadrat ausgeschnitten. Würde das Ihr Logo beschneiden, wählen Sie „Ganz zeigen, Rand hinzufügen“. Dann bleiben die Proportionen erhalten und der zusätzliche Platz bleibt transparent.
Worauf sollte ich bei Text oder Emoji achten?
Bei 16 Pixeln sind nur ein oder zwei große Zeichen lesbar. Emoji sehen auf jeder Plattform anders aus, deshalb verwendet das Icon das Bild, das Ihr Gerät zeichnet. Auch die Schriften stammen von Ihrem Gerät, sodass einzelne Buchstaben auf verschiedenen Computern leicht anders aussehen können.
Wohin kommen die Dateien?
Laden Sie sie ins Stammverzeichnis Ihrer Website hoch und fügen Sie die Link-Tags in den head Ihres HTML ein. Liegen sie in einem anderen Ordner, passen Sie die Pfade im Code an. Browser speichern Favicons lange im Cache. Leeren Sie ihn, wenn eine Änderung nicht sofort erscheint.
