Zuletzt aktualisiert am 10.12.2025 von Dirk Veit

PNG Favicon: Der ultimative Leitfaden für 2025

Ein Favicon ist das kleine Symbol, das in deinem Browser-Tab erscheint und deine Website auf einen Blick erkennbar macht. Doch welches Format ist das richtige? Die kurze Antwort: PNG hat sich als moderner Standard durchgesetzt und bietet dir mehr Flexibilität als das veraltete ICO-Format.

In diesem Leitfaden erfährst du alles, was du über PNG-Favicons wissen musst: von der Erstellung über die optimalen Größen bis hin zur korrekten Einbindung in HTML. Außerdem zeige ich dir, welche Anforderungen Google 2025 an Favicons stellt, damit dein Icon auch in den Suchergebnissen erscheint. Denn ein professionelles Favicon ist Teil einer erfolgreichen Content-Strategie und stärkt das Vertrauen deiner Besucher.

Was ist ein PNG Favicon?

Ein PNG Favicon ist ein Favicon im Portable Network Graphics Format. Im Gegensatz zum klassischen ICO-Format, das Microsoft 1999 mit dem Internet Explorer 5 einführte, bietet PNG einige entscheidende Vorteile für moderne Websites.

Das PNG-Format unterstützt Transparenz mit Alpha-Kanal, was bedeutet, dass du halbtransparente Bereiche in deinem Favicon haben kannst. Bei ICO-Dateien war Transparenz lange Zeit auf 1-Bit beschränkt. Entweder ein Pixel war sichtbar oder nicht, ohne Abstufungen dazwischen.

Außerdem ist PNG ein offener Standard, der von allen modernen Browsern nativ unterstützt wird. Du brauchst keine speziellen Tools mehr, um PNG-Dateien zu erstellen. Jedes Bildbearbeitungsprogramm kann damit umgehen.

Die meisten Websites verwenden heute Favicons im PNG-Format. Der Grund liegt auf der Hand: PNG-Favicons sehen auf modernen Browsern und Geräten besser aus und lassen sich einfacher erstellen als ICO-Dateien.

PNG vs ICO vs SVG: Welches Format ist das beste für Favicons?

Bei der Wahl des richtigen Favicon-Formats stehst du vor drei Optionen. Jede hat ihre Berechtigung, aber für die meisten Anwendungsfälle gibt es klare Empfehlungen.

ICO: Das Legacy-Format

Das ICO-Format ist ein Container, der mehrere Bildgrößen in einer einzigen Datei speichern kann. Das war früher praktisch, weil Browser je nach Anwendungszweck unterschiedliche Größen brauchten: 16×16 für Tabs, 32×32 für Lesezeichen, 48×48 für Desktop-Verknüpfungen.

Der größte Vorteil von ICO ist die Abwärtskompatibilität. Selbst uralte Browser wie der Internet Explorer 6 können ICO-Dateien darstellen. Allerdings ist dieser Vorteil 2025 kaum noch relevant, da der Marktanteil solcher Browser praktisch bei null liegt.

Die Nachteile überwiegen heute: ICO-Dateien sind typischerweise größer als vergleichbare PNGs, die Erstellung erfordert spezielle Tools, und die Bildqualität ist oft schlechter.

PNG: Der moderne Standard

PNG hat sich aus guten Gründen als bevorzugtes Format für Favicons durchgesetzt:

Für die meisten Websites ist PNG die beste Wahl. Du erstellst einfach mehrere PNG-Dateien in verschiedenen Größen und bindest sie per HTML ein. Das ist unkompliziert, flexibel und zukunftssicher.

SVG: Die Zukunft?

SVG-Favicons sind vektorbasiert und skalieren verlustfrei auf jede Größe. Theoretisch bräuchtest du damit nur eine einzige Datei für alle Anwendungszwecke.

In der Praxis gibt es allerdings Einschränkungen: Nicht alle Browser unterstützen SVG-Favicons vollständig. Google akzeptiert zwar SVG-Favicons, bevorzugt aber weiterhin PNG oder ICO für die Darstellung in den Suchergebnissen. Außerdem sehen komplexe Logos als SVG bei sehr kleinen Größen oft schlechter aus als optimierte Pixel-Grafiken.

Meine Empfehlung: Nutze PNG als Hauptformat und ergänze optional ein SVG für moderne Browser. Eine favicon.ico im Root-Verzeichnis schadet nicht als Fallback, ist aber nicht mehr zwingend erforderlich.

Welche Größen braucht ein PNG Favicon?

Die Zeiten, in denen ein einziges 16×16-Pixel-Icon ausreichte, sind vorbei. Moderne Websites müssen verschiedene Größen bereitstellen, um auf allen Geräten und in allen Kontexten optimal auszusehen.

Die wichtigsten Favicon-Größen 2025

Google empfiehlt seit 2024 ausdrücklich eine Mindestgröße von 48×48 Pixeln für Favicons in den Suchergebnissen. Zwar akzeptiert Google auch 8×8 Pixel als absolutes Minimum, aber für eine gute Darstellung sollte dein Favicon mindestens 48×48 Pixel groß sein oder ein Vielfaches davon (96×96, 144×144, 192×192).

Praktische Empfehlung

Wenn du nur minimalen Aufwand betreiben willst, reicht eine 32×32 PNG-Datei für die grundlegende Funktionalität. Google skaliert diese automatisch herunter. Allerdings verschenkst du damit Potenzial bei der Darstellung auf mobilen Geräten.

PNG Favicon erstellen: Schritt-für-Schritt-Anleitung

Die Erstellung eines PNG-Favicons ist unkompliziert, wenn du ein paar Grundregeln beachtest.

Schritt 1: Das richtige Ausgangsformat wählen

Starte mit einer quadratischen Grafik in hoher Auflösung, idealerweise 512×512 Pixel oder größer. Von diesem Original kannst du dann alle kleineren Versionen ableiten.

⚠️ Wichtig:

Dein Design muss auch in 16×16 Pixel noch erkennbar sein. Komplexe Logos mit vielen Details funktionieren bei dieser Größe nicht.

Verwende stattdessen:

• Den ersten Buchstaben deines Firmennamens
• Ein vereinfachtes Symbol aus deinem Logo
• Eine markante Farbe oder Form

Schritt 2: Transparenz richtig nutzen

PNG unterstützt volle Alpha-Transparenz, aber nutze sie mit Bedacht. Ein Favicon mit transparentem Hintergrund sieht auf dunklen Browser-Themes anders aus als auf hellen.

Wenn dein Logo auf allen Hintergründen funktioniert, verwende Transparenz. Ansonsten füge einen dezenten Hintergrund hinzu oder erstelle separate Versionen für Light und Dark Mode.

Schritt 3: Dateigröße optimieren

Ein Favicon sollte möglichst klein sein, um die Ladezeit nicht zu beeinträchtigen. Schnelle Ladezeiten sind ein wichtiger Ranking-Faktor, den Google in seinem Algorithmus berücksichtigt. Für ein 32×32 PNG-Favicon sind Dateigrößen unter 5 KB problemlos erreichbar.

Tools zur PNG-Optimierung:

• TinyPNG (tinypng.com): Online-Komprimierung
• ImageOptim (Mac): Lokale Batch-Optimierung
• OptiPNG: Kommandozeilen-Tool
• Squoosh (squoosh.app): Google-Tool mit vielen Optionen

Schritt 4: Alle benötigten Größen exportieren

Exportiere dein Favicon in allen benötigten Größen. Die meisten Grafikprogramme haben Export-Funktionen für mehrere Größen gleichzeitig.

Alternativ nutze einen Favicon-Generator wie RealFaviconGenerator.net oder Favicon.io. Du lädst dein Originalbild hoch und erhältst alle benötigten Größen plus den fertigen HTML-Code.

PNG Favicon in HTML einbinden

Die Einbindung eines PNG-Favicons erfolgt über Link-Tags im Head-Bereich deiner HTML-Datei.

Minimale Einbindung

Für eine grundlegende Favicon-Unterstützung reicht dieser Code:

<link rel="icon" type="image/png" href="/favicon-32x32.png">

Das Attribut type="image/png" teilt dem Browser mit, welches Format die Datei hat. Bei PNG-Favicons ist diese Angabe empfehlenswert, damit der Browser die Datei korrekt interpretiert.

Vollständige Einbindung für alle Geräte

Für optimale Kompatibilität mit allen Browsern, Geräten und Plattformen verwendest du diesen erweiterten Code:

<!-- Standard Favicons -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android/Chrome -->
<link rel="manifest" href="/site.webmanifest">

<!-- Optional: SVG für moderne Browser -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- Optional: ICO als Fallback -->
<link rel="shortcut icon" href="/favicon.ico">

Das Web App Manifest für PWAs

Für Progressive Web Apps und Android-Geräte brauchst du zusätzlich eine site.webmanifest-Datei:

{
  "name": "Deine Website",
  "short_name": "Website",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Diese Datei speicherst du im Root-Verzeichnis deiner Website und verlinkst sie wie oben gezeigt.

PNG Favicon für WordPress einbinden

WordPress macht die Favicon-Einbindung besonders einfach. Du brauchst keinen Code zu schreiben.

Über den Customizer

WordPress generiert aus deinem Upload automatisch die verschiedenen Größen für Browser, iOS und Android. Der nötige HTML-Code wird ebenfalls automatisch eingefügt.

Manuelle Einbindung über functions.php

Falls du mehr Kontrolle brauchst, kannst du das Favicon auch manuell einbinden:

function custom_favicon() {
    echo '<link rel="icon" type="image/png" sizes="32x32" href="' . get_template_directory_uri() . '/favicon-32x32.png">';
    echo '<link rel="icon" type="image/png" sizes="16x16" href="' . get_template_directory_uri() . '/favicon-16x16.png">';
    echo '<link rel="apple-touch-icon" sizes="180x180" href="' . get_template_directory_uri() . '/apple-touch-icon.png">';
}
add_action('wp_head', 'custom_favicon');

Google SERP: So erscheint dein PNG Favicon in den Suchergebnissen

Seit 2019 zeigt Google Favicons in den mobilen Suchergebnissen an, seit März 2023 auch auf dem Desktop. Ein gut gestaltetes Favicon kann die Klickrate (CTR) deutlich verbessern, weil deine Website in den Suchergebnissen professioneller und vertrauenswürdiger wirkt. Das ist besonders wichtig für Finanzdienstleister und Versicherungen, wo Vertrauen eine entscheidende Rolle spielt.

Googles Anforderungen an Favicons

Google hat klare Richtlinien für Favicons in den Suchergebnissen:

Google empfiehlt ausdrücklich, Favicons in einer Größe zu erstellen, die ein Vielfaches von 48 Pixeln ist. Also 48×48, 96×96, 144×144 oder 192×192 Pixel.

Warum zeigt Google mein Favicon nicht an?

Manchmal erscheint statt deines Favicons ein generisches Globus-Symbol in den Suchergebnissen. Die häufigsten Ursachen:

1. Favicon ist zu klein Google akzeptiert zwar 8×8 Pixel, aber bei so kleinen Icons kann die Darstellung problematisch sein. Verwende mindestens 48×48 Pixel.

2. Favicon ist nicht erreichbar Prüfe, ob dein Favicon unter der angegebenen URL abrufbar ist. Rufe https://deine-domain.de/favicon-32x32.png direkt im Browser auf.

3. robots.txt blockiert das Favicon Der Googlebot-Image muss das Favicon crawlen können. Stelle sicher, dass deine robots.txt den Zugriff nicht blockiert. Ein korrekt konfiguriertes technisches SEO-Setup ist Voraussetzung dafür, dass Google deine Website vollständig indexieren kann. Weitere technische SEO-Fehler, die du vermeiden solltest, findest du im Artikel 7 fatale SEO-Irrtümer in der Finanzbranche.

4. Falscher oder fehlender HTML-Code Das <link>-Tag muss im <head>-Bereich deiner Startseite stehen. Prüfe den Quellcode.

5. Google braucht Zeit zum Indexieren Nach einer Änderung kann es mehrere Wochen dauern, bis Google das neue Favicon in den Suchergebnissen anzeigt. Das Crawling-Intervall variiert je nach Website.

Favicon-Darstellung in Google SERPs optimieren

Google skaliert Favicons auf etwa 26×26 Pixel herunter und zeigt sie in einem kleinen Rahmen an.

PNG Favicon konvertieren: Von PNG zu ICO und umgekehrt

Manchmal brauchst du dein Favicon in einem anderen Format. Die Konvertierung ist in beide Richtungen möglich.

PNG zu ICO konvertieren

Für die Konvertierung von PNG zu ICO gibt es mehrere Optionen:

Online-Tools: – Favicon.io: Erzeugt ICO mit mehreren Größen – ConvertICO: Einfache Konvertierung – RealFaviconGenerator: Komplettlösung mit allen Formaten

Lokale Software: – GIMP: Kostenlos, unterstützt ICO-Export – ImageMagick: Kommandozeilen-Tool – IcoFX: Spezialisierter ICO-Editor für Windows

Bei der Konvertierung zu ICO kannst du mehrere Größen in einer Datei kombinieren. Standard ist eine ICO-Datei mit 16×16, 32×32 und 48×48 Pixel.

ICO zu PNG konvertieren

Die umgekehrte Konvertierung ist einfacher, weil ICO-Dateien bereits PNG-Daten enthalten können:

# Mit ImageMagick
convert favicon.ico favicon.png

Online-Tools wie CloudConvert oder Convertio bieten ebenfalls ICO-zu-PNG-Konvertierung an.

Häufige Probleme mit PNG Favicons und ihre Lösungen

Bei der Arbeit mit PNG-Favicons tauchen immer wieder dieselben Probleme auf. Hier sind die häufigsten Fehler und wie du sie behebst.

Problem: Favicon wird nicht angezeigt

Mögliche Ursachen und Lösungen:

1. Falscher Pfad: Prüfe, ob der Pfad in deinem HTML-Code stimmt. Absolute Pfade (/favicon-32x32.png) sind zuverlässiger als relative. Achte auch auf die korrekte URL-Struktur deiner Website.

2. Dateiname falsch: Achte auf korrekte Schreibweise, auch Groß- und Kleinschreibung. Linux-Server unterscheiden zwischen Favicon.png und favicon.png.

3. MIME-Type falsch: Der Server muss PNG-Dateien mit dem MIME-Type image/png ausliefern. Bei Apache kannst du das in der .htaccess konfigurieren:

AddType image/png .png

Problem: Altes Favicon wird weiterhin angezeigt

⚠️ Achtung:

Browser cachen Favicons extrem aggressiv. Nach einer Aktualisierung kann es Tage oder sogar Wochen dauern, bis das neue Icon bei allen Besuchern erscheint.

Lösungen:

1. Browser-Cache leeren: Strg+Shift+Delete in den meisten Browsern

2. Query-Parameter anhängen: Füge einen Versionsparameter hinzu:

<link rel="icon" type="image/png" href="/favicon-32x32.png?v=2">

1. Inkognito-Modus testen: Im privaten Browserfenster wird kein Cache verwendet

2. Chrome-Favicon-Cache leeren: Chrome speichert Favicons separat unter chrome://settings/clearBrowserData

Problem: Favicon sieht im Dark Mode schlecht aus

Wenn dein Favicon einen transparenten Hintergrund hat, kann es auf dunklen Themes unsichtbar werden.

Lösungen:

1. Kontrastfarben verwenden: Wähle Farben, die auf hellem und dunklem Hintergrund funktionieren

2. Hellen Rand hinzufügen: Ein dezenter weißer oder heller Rand verbessert die Sichtbarkeit

3. Media Query für Dark Mode: Mit SVG-Favicons kannst du verschiedene Versionen für Light und Dark Mode bereitstellen:

<link rel="icon" href="/favicon-light.svg" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)">

Problem: Unterschiedliche Icons in verschiedenen Browsern

Browser wählen aus mehreren angegebenen Favicons das für sie passende aus. Das kann zu Inkonsistenzen führen.

Lösung: Verwende für alle Favicon-Typen (Standard, Apple Touch Icon, Android Chrome) dasselbe Motiv. So zeigen Google und alle Browser ein einheitliches Icon an.

Die besten Tools für PNG Favicons

Favicon-Generatoren

Bildbearbeitungsprogramme

Für die manuelle Erstellung empfehle ich:

• Adobe Photoshop/Illustrator: Professionell, aber kostenpflichtig
• GIMP: Kostenlos, unterstützt ICO-Export
• Figma: Browserbasiert, gut für Teams
• Affinity Designer: Einmalkauf, gute Alternative zu Adobe

Optimierungstools

Für die Dateigröße-Optimierung:

• TinyPNG: Online, sehr effektiv
• Squoosh: Google-Tool mit vielen Optionen
• ImageOptim (Mac): Batch-Verarbeitung
• SVGOMG: Für SVG-Favicons

Fazit: „PNG ist der sichere Standard für Favicons in 2025″

Das PNG-Format hat sich zu Recht als Standard für Favicons durchgesetzt. Es bietet volle Transparenz-Unterstützung, wird von allen modernen Browsern akzeptiert und lässt sich mit jedem Grafikprogramm erstellen.

Für eine vollständige Favicon-Implementierung brauchst du mehrere PNG-Dateien in verschiedenen Größen, mindestens 32×32 für Browser und 180×180 für iOS. Google empfiehlt für die Suchergebnisse eine Mindestgröße von 48×48 Pixeln.

Die Einbindung erfolgt über simple <link>-Tags im HTML-Head. WordPress-Nutzer können das Favicon bequem über den Customizer hochladen, ohne Code anzufassen.

Investiere ein paar Minuten in ein ordentliches Favicon. Es ist ein kleines Detail, das große Wirkung auf die Wahrnehmung deiner Website hat: in Browser-Tabs, Lesezeichen und den Google-Suchergebnissen. Gerade im YMYL-Bereich (Your Money or Your Life) tragen solche vertrauensbildenden Details zur Glaubwürdigkeit bei.

FAQ: Häufig gestellte Fragen zu PNG Favicons

Welches Format ist besser für Favicons: PNG oder ICO?

PNG ist für die meisten Websites die bessere Wahl. Es bietet kleinere Dateigrößen, volle Transparenz-Unterstützung und lässt sich mit jedem Grafikprogramm erstellen. ICO ist nur noch für die Abwärtskompatibilität mit sehr alten Browsern relevant.

Wie groß sollte ein PNG Favicon sein?

Erstelle dein Favicon in mindestens 32×32 Pixeln für Browser-Tabs. Für Google-Suchergebnisse empfiehlt Google mindestens 48×48 Pixel. Für Apple-Geräte brauchst du zusätzlich 180×180 Pixel, für Android und PWAs 192×192 und 512×512 Pixel.

Warum wird mein PNG Favicon nicht in Google angezeigt?

Die häufigsten Gründe: Das Favicon ist zu klein (unter 48×48 Pixel), der Googlebot kann es nicht crawlen (robots.txt blockiert), oder der HTML-Code ist fehlerhaft. Prüfe auch, ob das Favicon direkt über die URL abrufbar ist.

Kann ich ein PNG direkt als Favicon verwenden?

Ja, alle modernen Browser unterstützen PNG-Favicons direkt. Du musst das PNG nicht erst in ICO konvertieren. Binde es einfach mit <link rel="icon" type="image/png" href="/favicon.png"> ein.

Wie ändere ich das Favicon bei WordPress?

Gehe zu Design → Customizer → Website-Informationen → Website-Icon. Lade dort dein PNG-Favicon hoch (empfohlen: 512×512 Pixel). WordPress erstellt automatisch alle benötigten Größen.

Unterstützen alle Browser PNG Favicons?

Ja, alle modernen Browser (Chrome, Firefox, Safari, Edge, Opera) unterstützen PNG-Favicons vollständig. Nur der Internet Explorer vor Version 11 hatte Einschränkungen, aber dieser Browser ist praktisch nicht mehr im Einsatz.