Welche Favicon-Dateien eine Website braucht und in welchen Größen

Eine Website braucht nur wenige Icon-Dateien, und bei den meisten geht es um die Größe. Lege im Hauptverzeichnis der Seite eine favicon.ico mit Bildern in 16, 32 und 48 Pixel ab, für Browser-Tabs und Windows. Ergänze ein 180 Pixel großes Apple-Touch-Icon für den Home-Bildschirm von iPhone und iPad sowie PNG-Icons mit 192 und 512 Pixel, die im Web-App-Manifest eingetragen sind. Der Favicon-Generator erstellt alle diese Dateien aus einem einzigen Logo und schreibt die HTML-Zeilen, die du in deine Seiten einfügst.

Die Dateien und ihre Größen

Das ZIP, das der Generator herunterlädt, enthält alle sieben Dateien. Die Datei favicon.ico besteht aus drei PNG-Bildern mit 16, 32 und 48 Pixel, die in einer einzigen Datei gespeichert sind. Jedes Icon ist dasselbe Logo, nur kleiner gezeichnet. Der Generator arbeitet mit einer 512 Pixel großen Version deines Bildes und erstellt daraus jede Größe.

Die HTML-Zeilen

Der Generator schreibt vier Zeilen für den Kopfbereich (head) deiner Seiten:

<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" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Die erste Zeile verweist auf favicon.ico und gibt die Größe 48 mal 48 an. Die zweite bindet das 32 Pixel große PNG ein. Die dritte nennt das Apple-Touch-Icon, und die vierte verweist auf das Manifest, in dem die Icons mit 192 und 512 Pixel eingetragen sind. Das 16 Pixel große PNG liegt im ZIP, taucht aber nicht in diesen Zeilen auf. Browser suchen außerdem von sich aus nach /favicon.ico, sodass die Datei auch dann gefunden wird, wenn die erste Zeile fehlt. Behalte die Pfade so bei, wie sie sind, außer deine Dateien liegen an einem anderen Ort.

Warum kleine Größen einfache Formen brauchen

Ein Icon mit 16 mal 16 Pixel hat insgesamt 256 Pixel. Ein Icon mit 48 Pixel hat 2.304, und die 512 Pixel große Vorlage hat 262.144. Bis ein Logo auf 16 Pixel verkleinert ist, geht der größte Teil seiner Details verloren. Dünne Linien oder kleine Wörter werden dann unscharf. Verwende deshalb eine einfache Marke oder ein bis zwei Buchstaben mit starkem Kontrast.

Die Buchstabenoption akzeptiert ein oder zwei Zeichen und setzt sie groß in die Mitte des Icons. Ist die Breite zu groß, verkleinert sie die Zeichen. Zur Auswahl stehen die Formen Quadrat, Abgerundet und Kreis. In der Vorschau siehst du die Ergebnisse für 16, 32, 48, 180 und 512 Pixel nebeneinander, dazu Tabs für helle und dunkle Darstellung. So kannst du die kleinen Größen beurteilen, bevor du herunterlädst. Die Vorschau aktualisiert sich, sobald du Form, Abstand oder Hintergrund änderst. Du kannst also jede Einstellung ausprobieren.

Abstand, Hintergrund und das Apple-Icon

Beim Abstand stehen drei Einstellungen zur Wahl: Ohne Abstand, Klein und Groß. Bei Klein bleiben an jeder Seite 10 Prozent des Icons frei, bei Groß sind es 20 Prozent. Im Bildmodus schneidet Ohne Abstand das Bild auf sein mittiges Quadrat zu, sodass die Ränder eines breiten Logos verloren gehen. Mit Abstand passt das ganze Bild dagegen vollständig in das Quadrat.

Für den Hintergrund gibt es Transparent, Weiß und Benutzerdefiniert, und Transparent ist voreingestellt. Das Apple-Touch-Icon ist immer deckend. Im Bildmodus bekommen seine transparenten Bereiche die gewählte Hintergrundfarbe, bei Transparent Weiß. Im Buchstabenmodus nehmen sie die Hintergrundfarbe des Buchstabens an. Transparente Bereiche in einem Apple-Touch-Icon können auf iPhone und iPad schwarz erscheinen, deshalb füllt der Generator sie aus. Die anderen Größen behalten die Transparenz, die du gewählt hast. Warum ein transparentes PNG schwarz wird erklärt die Ursache.

Ein Favicon ist quadratisch, ein breites Logo braucht deshalb zuerst einen quadratischen Rahmen. Der Foto-quadratisch-Generator passt das ganze Bild in einen 1:1-Rahmen ein, mit unscharfem, weißem, schwarzem oder frei gewähltem Rand, sodass nichts abgeschnitten wird. Bildgröße ändern setzt exakte Pixelmaße. Wenn du „Seitenverhältnis beibehalten“ aktivierst und beide Seiten ausfüllst, passt das Bild ohne Verzerrung in den Rahmen. Seitenverhältnisse von Fotos erklärt behandelt die gängigen Formate.

Änderungen, die Zeit brauchen

Browser speichern Favicons im Cache. Eine geänderte Datei unter derselben Adresse zeigt deshalb oft noch eine Weile das alte Icon, und ein normales Neuladen reicht häufig nicht. Öffne die Adresse des Icons direkt, um zu prüfen, ob die neue Datei auf dem Server liegt. Lade die Seite danach mit umgangenem Cache neu. Wird weiterhin das alte Icon angezeigt, gib der neuen Datei einen anderen Namen und passe den Link so an, dass er darauf zeigt.

So geht’s mit fixmint

1. Wähle Bild und ziehe dein Logo in das Feld, oder wähle Buchstabe und tippe ein bis zwei Zeichen ein.
2. Stelle Abstand auf Ohne, Klein oder Groß und Hintergrund auf Transparent, Weiß oder Benutzerdefinierte Farbe.
3. Prüfe die Icons mit 16, 32 und 48 px auf den hellen und dunklen Tabs sowie die Vorschauen mit 180 und 512 px.
4. Klicke auf ZIP herunterladen für alle sieben Dateien oder auf favicon.ico herunterladen für nur diese Datei.
5. Klicke auf HTML kopieren und füge die Zeilen aus HTML für deinen Kopfbereich in den Kopfbereich jeder Seite ein.

Sonderfälle

• Dein Bild bleibt auf deinem Gerät. Der Generator erstellt die Icons in deinem Browser, es wird nichts hochgeladen.
• Zwei Buchstaben. Zwei Zeichen werden akzeptiert und kleiner gezeichnet, damit beide hineinpassen. Bei 16 Pixel sind sie dadurch schwerer lesbar als ein einzelner Buchstabe.
• Dateinamen. Behalte die Namen bei, die im HTML verwendet werden, denn die Links verweisen auf sie.
• Nicht lesbare Dateien. Lässt sich aus einem Bild kein Icon erstellen, zeigt der Generator die Meldung „Aus dieser Eingabe konnten keine Icons erstellt werden. Probiere ein anderes Bild.“ und leert die Ausgaben. Probiere dann eine andere Datei aus oder speichere das Bild in einem gängigen Format neu.