Welche Favicon-Größen eine Website heute braucht
Ein einziges 16-Pixel-Bildchen reicht seit Jahren nicht mehr. Browser-Tabs auf hochauflösenden Bildschirmen zeigen 32 Pixel, die Google-Suche empfiehlt mehr als 48 Pixel, das iPhone legt für ein Lesezeichen auf dem Startbildschirm 180 Pixel zugrunde und Android-Browser verlangen für das Web-App-Manifest 192 und 512 Pixel. Der Generator erzeugt genau diesen Satz. Die Zahlen stammen aus den Dokumentationen von Google, Apple und web.dev, alle am 01.10.2026 abgerufen:
| Datei | Größe | Wofür | Quelle |
|---|---|---|---|
| favicon.ico | 16, 32, 48 px in einer Datei | Browser-Tab, Lesezeichen, ältere Programme | Microsoft „Icons“ (Dateiaufbau) |
| favicon-16x16.png, favicon-32x32.png | 16 und 32 px | Browser-Tab, normal und hochauflösend | HTML-Standard, rel="icon" mit sizes |
| apple-touch-icon.png | 180 × 180 px | „Zum Home-Bildschirm“ auf dem iPhone | Apple, Configuring Web Applications |
| icon-192.png, icon-512.png | 192 und 512 px | Android, installierte Web-App | web.dev, Web App Manifest |
| icon-maskable-512.png | 512 px, Motiv im Kreis mit 40 % Radius | Android-Startbildschirm in Kreis- oder Tropfenform | web.dev, Maskable Icons |
| favicon.svg | beliebig | Browser mit SVG-Unterstützung zeichnen es in jeder Größe scharf | nur bei SVG-Vorlage oder Buchstaben |
Für die Google-Suche gilt zusätzlich: Das Symbol muss quadratisch sein und mindestens 8 × 8 Pixel haben, empfohlen ist laut der englischen Fassung der Google-Seite ein Favicon „larger than 48x48px“, also größer als 48 × 48 Pixel (Google Search Central, Stand 28.08.2026; die deutsche Übersetzung schreibt „mindestens 48 × 48 Pixel“). Deshalb verweist der HTML-Code neben der ICO-Datei auch auf das 192-Pixel-Symbol. Unterstützt werden unter anderem ICO, PNG, GIF und JPEG. Ein nicht quadratisches Logo setzt der Generator deshalb mittig auf eine quadratische Fläche, statt es zu verzerren.
favicon.ico: drei Größen in einer Datei
Eine ICO-Datei ist ein kleiner Container. Am Anfang steht ein Verzeichnis mit der Zahl der Bilder, danach folgt für jedes Bild ein Eintrag von 16 Byte mit Breite, Höhe, Farbtiefe und Position in der Datei. Microsoft beschreibt diesen Aufbau in der Dokumentation „Icons“. Der Generator schreibt die drei Bilder mit 16, 32 und 48 Pixeln als 32-Bit-Bitmaps mit Alphakanal hinein, dazu die alte Transparenzmaske, die nur noch sehr alte Programme lesen. Das Ergebnis öffnet jedes Bildprogramm, das ICO versteht; wir haben jede Datei mit der Python-Bibliothek Pillow gegengeprüft. Der Browser sucht sich aus der Datei die Größe aus, die er gerade braucht. Ein 16-Pixel-Bild wird dabei nicht aus 48 Pixeln hochgerechnet, sondern aus einer 512-Pixel-Vorlage in mehreren Halbierungsschritten verkleinert. So bleiben Kanten auch in der kleinsten Stufe sauber.
Bei feinen Logos lohnt ein Blick auf die 16-Pixel-Vorschau. Schriftzüge mit mehr als zwei, drei Buchstaben sind in dieser Größe nicht lesbar. Viele Betriebe nehmen deshalb für das Favicon nur das Bildzeichen oder den Anfangsbuchstaben. Für diesen Fall gibt es den Modus „Buchstaben“: Kürzel eintippen, Farben wählen, fertig.
Apple-Touch-Icon und Android: Symbole für den Startbildschirm
Wer eine Website auf dem iPhone über „Teilen“ und „Zum Home-Bildschirm“ ablegt, bekommt das Apple-Touch-Icon zu sehen. Apple nennt dafür 180 × 180 Pixel. Die Ecken rundet das iPhone selbst ab; der Generator liefert das Symbol deshalb eckig und vollflächig in Ihrer Hintergrundfarbe, auch wenn Sie für das Favicon einen durchsichtigen Hintergrund gewählt haben.
Android schneidet Symbole je nach Hersteller als Kreis, Quadrat mit runden Ecken oder Tropfen aus. Ein
gewöhnliches Logo verliert dabei schnell seine Ränder. Für diesen Fall gibt es das „maskable“ Symbol: Laut
web.dev muss alles Wichtige in einem Kreis in der Mitte liegen, dessen Radius 40 Prozent der Symbolbreite
beträgt. Der Generator verkleinert Ihr Motiv dafür auf 56,5 Prozent der Kantenlänge. Das ist das größte
Quadrat, das in diesen Kreis passt. Im Manifest steht das Symbol mit "purpose": "maskable", das
normale Symbol bleibt daneben erhalten.
So binden Sie das Favicon in Ihre Website ein
Entpacken Sie das ZIP und laden Sie alle Dateien in das Wurzelverzeichnis Ihrer Website, also dorthin, wo
auch die Startseite liegt. Dann fügen Sie den HTML-Code aus der Datei favicon-snippet.html in den
<head> jeder Seite ein. Er enthält einen Verweis mit rel="icon" auf die ICO-Datei
und die PNG-Favicons, einen mit rel="apple-touch-icon" und einen mit rel="manifest"
auf die site.webmanifest. Google liest für das Suchergebnis die Verweise mit rel="icon" und
rel="apple-touch-icon".
Liegen die Dateien nicht im Wurzelverzeichnis, tragen Sie oben unter „Ablageort“ den Ordner ein, etwa
/assets/icons; Code und Manifest zeigen dann auf diesen Ordner.
Bei WordPress und den meisten Homepage-Baukästen fügen Sie keinen Code ein. Dort gibt es in den Einstellungen ein eigenes Feld für das Website-Symbol; laden Sie dort icon-512.png hoch, das System erzeugt die übrigen Größen selbst. Wenn Ihre Website von einer Agentur oder von uns betreut wird, gehört das Favicon zum Auftrag: Bei Kundenprojekten der Website-Entwicklung richten wir es mit ein.
Warum das neue Favicon noch nicht erscheint
Browser speichern Favicons hartnäckiger als den Rest der Seite. Nach dem Austausch zeigt der eigene Browser oft noch tagelang das alte Symbol. Prüfen Sie das neue Favicon deshalb in einem privaten Fenster oder in einem zweiten Browser. Bei Lesezeichen und Verknüpfungen auf dem Startbildschirm hilft nur Löschen und neu Anlegen.
In der Google-Suche dauert es länger. Google liest das Favicon von der Startseite, und zwar nur eines je Hostname: www.beispiel.de und shop.beispiel.de können verschiedene Symbole haben, ein Unterordner wie beispiel.de/shop nicht. Die Startseite und die Favicon-Datei dürfen nicht per robots.txt gesperrt sein. Nach einer Änderung vergehen laut Google mehrere Tage bis Wochen, bis das neue Symbol in den Ergebnissen steht. Wer es eilig hat, beantragt in der Search Console eine erneute Indexierung der Startseite. Ob Ihre Website sonst technisch sauber dasteht, zeigt der kostenlose Website-Check.
Ihre Bilder bleiben auf Ihrem Gerät
Der Generator arbeitet vollständig in Ihrem Browser. Das Bild wird mit den Zeichenfunktionen des Browsers verkleinert, ICO-Datei, Manifest und ZIP entstehen in diesem Seitenskript, das keine Bibliothek nachlädt. Wir haben das im Browsertest mit einem Netzwerkmitschnitt geprüft: Zwischen dem Laden des Logos und dem Download des ZIP geht keine Anfrage mit Bilddaten hinaus. Zählen lassen wir nur, dass ein Paket erzeugt wurde, ohne Bild und ohne Namen. Wie alle kostenlosen Werkzeuge dieser Website lädt die Seite außerdem Google Analytics und Google AdSense, je nach Ihrer Auswahl im Einwilligungsdialog; Ihr Logo bekommen auch diese Dienste nicht. Einzelheiten stehen in der Datenschutzerklärung.
Ein Logo als SVG legt der Generator zusätzlich als favicon.svg ins Paket, mit Hintergrund und Rundung. Übernommen wird dabei nur eine feste Liste von Elementen: Pfade, Grundformen, Gruppen, Text, Farbverläufe, Masken und Verweise innerhalb der Datei. Skripte, Animationen, Links, eingebettete Bilder und HTML sowie Verweise auf fremde Adressen fallen weg, auch wenn sie mit Entities oder Steuerzeichen getarnt sind. Die Datei wird danach neu geschrieben, nicht im Original ausgebessert. Das ist wichtig, weil favicon.svg später auf Ihrem Server liegt und dort auch direkt aufgerufen werden kann. Aus Fotos und PNG-Logos entsteht dagegen keine SVG-Datei: Eine Pixelgrafik in einer SVG-Hülle wäre nicht schärfer, nur größer. Soll umgekehrt aus einer SVG eine einzelne PNG in fester Größe werden, ist SVG in PNG umwandeln der kürzere Weg.