Die Wahl der richtigen Favicon-Abmessungen ist entscheidend für ein scharfes, professionelles Symbol auf jedem Gerät. Diese umfassende Leitfaden zur Größe von Favicons deckt alle Abmessungen ab, die Sie im Jahr 2026 benötigen – vom klassischen 16×16-Browser-Tab-Symbol bis hin zum 512×512-PWA-Symbol mit Maskierungsfunktion – sowie die Formate und Best Practices, mit denen Ihre Marke plattformübergreifend ein einheitliches Erscheinungsbild behält.
Warum die Größe des Favicons eine Rolle spielt
Favicons werden in vielen verschiedenen Größen in Browsern, Betriebssystemen und auf Startbildschirmen angezeigt. Eine einzige Quelldatei kann nicht allen Anforderungen gerecht werden, da jede Plattform bestimmte Abmessungen erfordert. Wenn Sie nur eine Größe bereitstellen, skalieren Browser diese nach oben oder unten – was häufig zu unscharfen oder beschnittenen Ergebnissen führt, die Ihrer Marke schaden.
Durch die Angabe der korrekten Favicon-Abmessungen für jede Plattform wird sichergestellt, dass das Bild in nativer Auflösung dargestellt wird – das bedeutet scharfe Kanten, präzise Farben und zuverlässige Transparenz. Dieser Leitfaden listet alle Größen auf, die es sich zu erstellen lohnt, und erklärt, wo die einzelnen Größen verwendet werden, damit Sie ein vollständiges Paket mit gutem Gewissen bereitstellen können.
Vollständige Übersicht über die Favicon-Größen
In der folgenden Tabelle sind die Favicon-Größen aufgeführt, die moderne Websites im Jahr 2026 bereitstellen sollten, sowie das jeweilige Format und die Plattform, für die sie bestimmt sind. Nutzen Sie diese Tabelle als einzige Referenz bei der Erstellung eines Bundles.
| Größe | Format | Verwendungszweck |
|---|---|---|
| 16×16 | ICO / PNG | Klassischer Browser-Tab, Unterstützung für ältere Versionen |
| 32×32 | ICO / PNG | Standard-Browser-Registerkarte auf Retina-Bildschirmen |
| 48×48 | ICO | Windows-Taskleiste, einige Lesezeichenansichten |
| 64×64 | PNG | Browser-Adressleiste auf Bildschirmen mit hoher DPI-Auflösung |
| 96×96 | PNG | Lesezeichen und Verknüpfungen auf dem Desktop |
| 120×120 | PNG | Ältere Android-Startbildschirme |
| 152×152 | PNG | iPad-Touch-Symbol (veraltete Version) |
| 167×167 | PNG | iPad Pro-Touch-Symbol |
| 180×180 | PNG | iPhone apple-touch-icon (aktuell) |
| 192×192 | PNG | Android-Chrome-Startbildschirm, PWA |
| 512×512 | PNG | PWA-Startbildschirm, ausblendbares Symbol |
Die wichtigsten Größen, die generiert werden müssen
Die obige Liste ist zwar vollständig, doch eine vereinfachte Auswahl deckt die Bedürfnisse der allermeisten Nutzer ab. Unsere Favicon-Generator erstellt dieses unverzichtbare Paket aus einem einzigen Upload:
- 16×16 und 32×32—die gängigsten Größen für Browser-Registerkarten auf Desktop-Computern mit Standard- und Retina-Bildschirmen.
- 48×48—in der ICO-Datei enthalten, für die Anzeige in der Windows-Taskleiste und für ältere Lesezeichen.
- 180×180—das „apple-touch-icon“, das von iOS für Verknüpfungen auf dem Startbildschirm benötigt wird.
- 192×192 und 512×512—die in Ihrem Web-Manifest angegebenen Größen für Android und PWA.
Zusammen mit einer SVG-Version für moderne Browser deckt dieses Set praktisch jedes Gerät ab, das ein Besucher im Jahr 2026 nutzen könnte. Sie müssen nicht jede ältere Größe manuell nachverfolgen – der Generator fasst sie für Sie zusammen.
Favicon-Formate im Vergleich
Die Dateigröße ist nur die halbe Wahrheit; das Format bestimmt die Kompatibilität und die Dateigröße. Der folgende Vergleich fasst die drei Formate zusammen, die Sie gemeinsam bereitstellen sollten:
| Format | Beschluss | Dateigröße | Am besten geeignet für |
|---|---|---|---|
| ICO | Feststehend (Behälter in verschiedenen Größen) | Klein bis mittel | Ältere Browser, /favicon.ico als Fallback |
| PNG | Festgelegt (eine Größe pro Datei) | Klein | Moderne Browser, apple-touch-icon, Android |
| SVG | Vektor (auflösungsunabhängig) | Winzig | Safari, Chrome, Symbole, die den Dunkelmodus unterstützen |
SVG ist im Jahr 2026 besonders wertvoll, da es sich perfekt an jede Pixeldichte anpasst und Media-Queries enthalten kann, die sich automatisch an den Dunkelmodus anpassen. Unser Generator generiert automatisch eine SVG-Datei, sobald Sie eine Vektorvorlage hochladen, was es zum zukunftssichersten Format in Ihrem Bundle macht.
Plattformspezifische Größenanforderungen
Desktop-Browser
Desktop-Browser wie Chrome, Firefox, Safari und Edge fordern Favicons in den Größen 16×16 und 32×32 Pixel an. Auf Retina-Displays wird für die Registerkarte die 32×32-Variante verwendet. Das ICO-Format kann beide Größen in einer einzigen Datei bündeln, weshalb die Bereitstellung von /favicon.ico auch heute noch als bewährte Vorgehensweise gilt – sie dient als automatischer Fallback.
Apple iOS und iPadOS
Apple-Geräte ignorieren den Standard-Favicon-Link, wenn eine Website zum Startbildschirm hinzugefügt wird. Stattdessen suchen sie nach einer 180×180-PNG-Datei, die mit ”rel=”apple-touch-icon““ deklariert ist. Ohne diese Datei verwendet iOS einen Screenshot der Seite oder ein generisches Symbol, was unprofessionell wirkt und die Markenkonsistenz auf der beliebtesten mobilen Plattform beeinträchtigt.
Android und Progressive Web Apps
Die Installationsprogramme für Android Chrome und PWAs lesen die Symbole aus dem Manifest der Web-App aus. Die beiden erforderlichen Größen sind 192×192 und 512×512. Die Variante mit 512×512 wird auch für den PWA-Startbildschirm verwendet. Bei maskierbaren Symbolen – also solchen, die sich an verschiedene Android-Symbolformen anpassen – sollten Sie die 512×512-PNG-Datei im Manifest mit “purpose”:”maskable” kennzeichnen.
Bewährte Vorgehensweisen für die Größe von Favicons
Befolgen Sie diese bewährten Vorgehensweisen, damit Ihr Favicon in jeder Größe und auf jeder Plattform gestochen scharf bleibt:
- Fang groß an. Erstellen Sie das Bild aus einer Quelle mit einer Auflösung von mindestens 512×512, damit es auch bei jeder Verkleinerung scharf bleibt.
- Wir versenden alle Größen. Stellen Sie die Auflösungen 16, 32, 48, 180, 192 und 512 sowie SVG bereit, um eine vollständige Abdeckung zu gewährleisten.
- Bewahre die Datei „/favicon.ico“ im Stammverzeichnis auf. Browser verwenden standardmäßig diese URL, wenn kein Link-Tag vorhanden ist.
- Test bei 16×16. Wenn Ihr Entwurf auch in der kleinsten Größe überzeugt, wird er überall gut aussehen.
- Verwenden Sie nach Möglichkeit Vektorgrafiken. SVG passt sich jeder Auflösung an und unterstützt den Dunkelmodus.
So generieren Sie alle Größen auf einmal
All diese Größen von Hand herzustellen, wäre mühsam. Unser kostenloses Favicon-Generator erledigt die Arbeit für Sie in vier einfachen Schritten:
- Laden Sie ein quadratisches Quellbild mit einer Größe von mindestens 512×512 hoch.
- Sehen Sie sich die Live-Vorschauen in den Größen 16×16, 32×32 und 180×180 an.
- Klicken Sie auf „Erstellen“, um eine ZIP-Datei herunterzuladen, die alle oben genannten Größen und Formate enthält.
- Kopieren Sie die mitgelieferten HTML-Link-Tags und das Manifest in Ihre Website.
Der gesamte Vorgang dauert weniger als eine Minute und liefert ein Paket, das alle in dieser Anleitung behandelten Plattformen abdeckt. Sie müssen sich nie merken, welche Größe wohin gehört – der Generator benennt jede Datei korrekt und stellt die passenden Link-Tags bereit.
Häufig gestellte Fragen
Was ist die Standardgröße für ein Favicon einer Website?
Die gängigste Standardgröße für Favicons beträgt 32×32 Pixel für den Browser-Tab, mit einer Ausweichgröße von 16×16 Pixel in einer ICO-Datei. Moderne Websites sollten außerdem eine Größe von 180×180 für iOS sowie 192×192 und 512×512 für Android und die Nutzung als PWA bereitstellen.
Wie groß sollte mein Ausgangsbild sein?
Verwenden Sie ein quadratisches Ausgangsbild mit einer Größe von mindestens 512 × 512 Pixel. Ein größeres Ausgangsbild ermöglicht es dem Generator, das Bild sauber auf jede gewünschte Größe zu verkleinern, sodass Ihr Favicon auch auf Retina-Displays und mobilen Bildschirmen mit hoher Pixeldichte scharf bleibt.
Wie groß ist das „apple-touch-icon“?
Die aktuelle Größe des ”apple-touch-icon” beträgt 180 × 180 Pixel. iOS verwendet dieses PNG-Bild für Verknüpfungen auf dem Startbildschirm und ignoriert den Standard-Favicon-Link. Daher muss es in Ihrem HTML-Code mit rel="apple-touch-icon" deklariert werden.
Welche Größen schreibt Android für Favicons vor?
Android Chrome und Progressive Web Apps erfordern PNG-Symbole mit den Abmessungen 192×192 und 512×512, die im Manifest der Web-App deklariert werden müssen. Das 512×512-Symbol sollte als „maskierbar“ gekennzeichnet sein, damit Android es an verschiedene Formen des Startbildschirms anpassen kann.
Sollte ich für mein Favicon SVG oder PNG verwenden?
Verwenden Sie beides. SVG lässt sich perfekt skalieren und unterstützt den Dunkelmodus in modernen Browsern, während PNG die Kompatibilität mit iOS, Android und älteren Browsern gewährleistet. Wenn Sie alle drei Formate – ICO, PNG und SVG – bereitstellen, stellen Sie sicher, dass Ihr Favicon überall gestochen scharf angezeigt wird.
Wie sich die Größe auf Leistung und Ladezeit auswirkt
Die Bereitstellung der richtigen Favicon-Größe ist nicht nur eine Frage der Optik – sie wirkt sich auch darauf aus, wie schnell Ihre Website geladen wird. Wenn ein Browser ein 32×32-Registerkartensymbol anfordert und Sie stattdessen eine 512×512-PNG-Datei bereitstellen, lädt der Besucher weit mehr Bytes herunter, als für ein winziges Element auf dem Bildschirm erforderlich wäre. Bei vielen Seitenaufrufen durch zahlreiche Besucher summiert sich diese verschwendete Bandbreite. Indem Sie jede Größe als separate Datei bereitstellen und diese in Ihren Link-Tags mit dem korrekten „sizes“-Attribut deklarieren, lassen Sie den Browser automatisch die kleinste geeignete Datei auswählen. Das Ergebnis ist ein schnelleres „First Paint“ und ein schlankeres Seitenprofil, was sowohl für die Benutzererfahrung als auch für die Core Web Vitals im Jahr 2026 von Bedeutung ist. Der Generator übernimmt diese Optimierung für Sie, indem er jede Datei präzise benennt und in der richtigen Größe bereitstellt.
Jetzt alle Favicon-Größen generieren
Sie müssen sich nicht mehr merken, welche Größe jede Plattform benötigt. Laden Sie ein quadratisches Bild in unseren Generator hoch und laden Sie ein komplettes Paket herunter, das jede in diesem Leitfaden beschriebene Abmessung und jedes Format abdeckt, zusammen mit sofort einsetzbarem HTML und einem Manifest. Es ist der einfachste Weg, jeden Browser und jedes Gerät im Jahr 2026 zufriedenzustellen. Ob es Ihnen um Schärfe auf einem Retina-Tablet, eine saubere Home-Screen-Verknüpfung unter iOS oder einen perfekten PWA-Splashscreen geht – ein einziger Download deckt alles ab.
