So funktioniert’s
Wähle eine von zwei Möglichkeiten.
- Aus einem Bild: Zieh dein Logo hinein, klick zum Auswählen oder füg ein kopiertes Bild mit Strg+V (auf dem Mac ⌘+V) ein. PNG, JPG, WebP und SVG bis 10 MB werden unterstützt. Ist das Bild nicht quadratisch, nimm „Einpassen (Rand)“, um das ganze Bild zu behalten, oder „Mitte zuschneiden“, um nur den mittleren Teil zu verwenden. Rand und transparente Bereiche können transparent bleiben oder mit einer Farbe deiner Wahl gefüllt werden.
- Aus Text oder Emoji: Gib 1–2 Zeichen ein und wähle Hintergrundfarbe, Textfarbe und Form (Quadrat, abgerundet oder Kreis). Verwendet wird die Systemschrift deines Geräts, deshalb können Emojis je nach Gerät etwas anders aussehen.
Im Ergebnis siehst du die Icons mit 16, 32, 48 und 180 px in tatsächlicher Größe, die mit 16, 32 und 48 px zusätzlich vergrößert, und dazu, wie das Icon in einem Browser-Tab mit hellem und dunklem Design aussieht. Du kannst jede Datei einzeln herunterladen oder mit „Alle herunterladen (ZIP)“ alle auf einmal.
Empfohlen ist ein Ausgangsbild ab 512 px. Ist es kleiner, werden Icons, die größer als das Ausgangsbild sind, hochskaliert und können unscharf wirken; deshalb erscheint eine Warnung. Welche Seite dafür zählt, hängt von der Einstellung „Quadratisch machen“ ab: bei „Einpassen (Rand)“ die längere, bei „Mitte zuschneiden“ die kürzere. Ein Bild mit 800 × 400 px zum Beispiel bekommt mit „Einpassen (Rand)“ keine Warnung; mit „Mitte zuschneiden“ zählen die 400 px, und die Warnung erscheint. Hochskaliert wird dann nur das Icon mit 512 px, die anderen fünf Größen entstehen durch Verkleinern der 400 px. Eine SVG wird für jede Größe neu gezeichnet, bei ihr erscheint keine Warnung. Lädt deine SVG allerdings externe Schriften oder Bilder, können diese Teile in den ICO- und PNG-Dateien fehlen – prüf das in der „Vorschau“. Große Bilder werden schrittweise um jeweils die Hälfte verkleinert, damit die kleinen Größen nicht pixelig werden.
SVGs werden über ein img-Element gerendert; Skripte innerhalb der SVG werden dabei nicht ausgeführt.
Formoptionen im Bild- und Textmodus: Die Einstellung „Form“ (Quadrat, Abgerundet, Kreis) gibt es nur bei „Aus Text oder Emoji“. „Aus einem Bild“ passt das Bild lediglich in ein Quadrat ein und schneidet keine Ecken ab. Brauchst du ein rundes Icon, lad ein Bild hoch, bei dem die Ecken außerhalb der runden Form transparent sind, und lass „Hintergrund für Rand und Transparenz“ auf „Transparent“. Die transparenten Stellen deines Bilds bleiben in favicon.ico, icon-192.png und icon-512.png erhalten.
Dateien und Größen
| Datei | Größe | Verwendung |
|---|---|---|
favicon.ico |
16, 32, 48 px | Browser-Tabs |
favicon.svg |
Original | Browser-Tabs (nur wenn du eine SVG hochlädst) |
apple-touch-icon.png |
180 × 180 px | Home-Bildschirm auf iPhone und iPad |
icon-192.png, icon-512.png |
192, 512 px | Web-App-Manifest (Android-Startbildschirm u. a.) |
site.webmanifest |
— | Web-App-Manifest-Datei |
Die Microsoft-Dokumentation zum ICO-Format nennt 16, 32 und 48 px als gängige Icon-Größen, deshalb enthält favicon.ico diese drei. Diese drei Icons gibt es nicht als einzelne PNGs, sie stecken nur in der favicon.ico. Die Apple-Dokumentation nennt 180 × 180 px als Beispiel für die apple-touch-icon-Größe bei iPhones mit Retina-Display und erklärt, dass ohne <link> im Root der Website nach Dateien wie apple-touch-icon.png gesucht wird. Laut web.dev brauchen Chromium-basierte Browser im Web-App-Manifest mindestens ein Icon mit 192 × 192 px und eines mit 512 × 512 px; die Manifest-Datei bekommt die von der Spezifikation empfohlene Endung .webmanifest.
Das apple-touch-icon liegt auf dem Home-Bildschirm und wird deshalb ohne Transparenz mit ausgefülltem Hintergrund erstellt. Hast du bei einem Bild unter „Hintergrund für Rand und Transparenz“ die Option „Transparent“ gewählt, wird weiß gefüllt. Bei Text oder Emoji wird unabhängig von der gewählten Form das ganze Quadrat mit der Hintergrundfarbe gefüllt.
So steckt PNG in einer ICO-Datei
Eine ICO-Datei fasst Bilder in mehreren Größen in einer Datei zusammen. Am Anfang steht ein 6 Byte langer Kopf (ICONDIR) mit dem reservierten Wert 0, dem Typ 1 (Icon) und der Anzahl der Bilder. Danach folgt für jedes Bild ein 16 Byte langer Eintrag (ICONDIRENTRY) mit Breite, Höhe, Datenlänge und der Position, an der die Daten beginnen. Deshalb beginnt jede ICO-Datei mit den Bytes 00 00 01 00.
Ursprünglich enthielten ICO-Dateien Bitmap-Daten, seit Windows Vista kann ein Bildeintrag aber auch eine komplette PNG-Datei aufnehmen. Die Daten sind dann ein 32-Bit-ARGB-PNG, das mit der PNG-Signatur beginnt, und die Transparenz stammt aus dem Alphakanal des PNG. Dieses Tool baut favicon.ico auf diese Weise aus PNGs mit 16, 32 und 48 px. Es schreibt die Dateistruktur selbst im Browser, ohne zusätzliche Bibliothek.
Auch die ZIP-Datei von „Alle herunterladen“ entsteht im Browser. PNG und ICO sind bereits komprimiert und werden nicht erneut komprimiert: Sie werden mit der unkomprimierten Methode (store) und CRC-32-Prüfsummen nach der ZIP-Spezifikation von PKWARE gepackt.
Einbinden ins HTML
- Lade die heruntergeladenen Dateien in den obersten Ordner (Root) deiner Website hoch.
- Kopier den „Code für den HTML-
<head>“ aus dem Ergebnis und füg ihn auf jeder Seite in den<head>ein.
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Hast du eine SVG hochgeladen, kommt <link rel="icon" href="/favicon.svg" type="image/svg+xml"> in der Zeile nach favicon.ico dazu. Laut MDN wählt der Browser bei mehreren rel="icon"-Links anhand von type, sizes und media den passendsten aus, und sind mehrere gleich gut geeignet, nimmt er den letzten. Browser ohne SVG-Unterstützung nehmen favicon.ico. Die Datei favicon.svg ist unverändert deine hochgeladene Datei: Zuschnitt und Hintergrund („Mitte zuschneiden“, „Mit Farbe füllen“) wirken nur auf die ICO- und PNG-Dateien, nie auf favicon.svg. Sollen alle Icons gleich aussehen, lösch die Zeile mit favicon.svg aus dem HTML-Code und lad diese Datei nicht hoch.
Dieser Code verknüpft nur zwei Dateien mit rel="icon", nämlich favicon.ico und (nur nach einem SVG-Upload) favicon.svg. Hast du das Favicon aus Text, einem Emoji oder einem PNG-, JPG- oder WebP-Bild erstellt und löschst die Zeile mit favicon.ico aus dem HTML-Code, bleibt deshalb keine einzige Zeile mit rel="icon" übrig. Die Datei apple-touch-icon.png ist nur über rel="apple-touch-icon" verknüpft, icon-192.png und icon-512.png nur über site.webmanifest.
Laut HTML-Standard kann der Browser, wenn eine Seite keinen rel="icon"-Link hat, stattdessen /favicon.ico anfragen. Auch mit den Links ist es am sichersten, favicon.ico im Root zu lassen. Hast du schon ein Web-App-Manifest, übernimm statt der neuen Datei nur den icons-Teil aus dem Ergebnis in dein bestehendes Manifest.