"Favicon Generator: Wie man ein Favicon aus einem PNG erstellt"

Jede Website braucht ein Favicon. Es ist das kleine quadratische Symbol, das in Browser-Tabs, der Lesezeichenleiste, der Browserhistorie und auf dem iOS- oder Android-Startbildschirm erscheint, wenn ein Besucher eine Verknüpfung zu Ihrer Website speichert. Es erscheint auch in den Google-Suchergebnissen neben Ihrem Website-Namen – ein Detail, das das Erscheinungsbild Ihrer Marke für jeden beeinflusst, der Sie über die organische Suche findet. Ohne Favicon greifen Browser auf ein generisches leeres Seiten-Symbol zurück, das selbst eine polierte Website unfertig aussehen lässt. Wenn Sie bereits ein Logo als PNG haben, verwandelt ein Favicon-Generator es in weniger als einer Minute in ein funktionierendes favicon.ico, ohne Installation und ohne erforderliches Konto.

Welche Favicon-Größen benötigen Sie tatsächlich?

Es gibt keine einzige universelle Favicon-Größe, da verschiedene Kontexte unterschiedliche Auflösungen aus demselben Dateisatz ziehen. Der praktische Satz umfasst sechs Größen:

Größe	Format	Anwendungsfall
16×16	ICO / PNG	Browser-Tab-Leiste, Adressleiste
32×32	ICO / PNG	Taskleistenverknüpfung, Tab auf hochauflösenden Bildschirmen
48×48	ICO	Windows-Desktop-Verknüpfung
180×180	PNG	Apple Touch Icon — iOS-Startbildschirm
192×192	PNG	Android-Startbildschirm-Verknüpfung über Web-Manifest
512×512	PNG	Android-Splashscreen über Web-Manifest

Die Favicon-Größe, mit der Sie beginnen, ist wichtig. Arbeiten Sie immer von einer großen quadratischen Quelle – 512×512 oder größer – damit jede kleinere Größe sauber herunterskaliert wird. Das Hochskalieren von einem 16×16-Thumbnail führt zu Unschärfe, die selbst das beste Schärfen nicht beheben kann.

Für die meisten Websites verarbeitet die ICO-Datei die Layer 16×16, 32×32 und 48×48 in einem Container. Die Größen 180×180, 192×192 und 512×512 sind separate PNGs, die in HTML oder einem Web-Manifest referenziert werden.

ICO vs. PNG vs. SVG

Alle drei Formate funktionieren als Favicons für eine Website. Die richtige Antwort ist, mehr als eines zu verwenden.

ICO ist ein Microsoft-Containerformat, das mehrere Größen in einer einzigen Datei bündelt. Legen Sie favicon.ico in das Stammverzeichnis Ihrer Domäne, und jeder Browser – einschließlich älterer – findet es automatisch ohne HTML-Markup. Eine Datei, null Konfiguration.

PNG wird von allen modernen Browsern unterstützt, wenn es mit einem <link>-Tag deklariert wird. Es ist das einzige Format, das für Apple Touch Icons und Android-Manifest-Icons funktioniert. PNG bewahrt auch die volle Alpha-Kanal-Transparenz, sodass Ihr Icon vor jeder Tab-Hintergrundfarbe sauber aussieht.

SVG ist ein Vektorformat, das von Chrome, Firefox und Edge unterstützt wird. Da es sich ohne Pixelbildung auf jede Auflösung skalieren lässt, deckt eine einzige SVG-Datei jede Anzeigedichte ab. SVG unterstützt auch eingebettete prefers-color-scheme-Medienabfragen, die es dem Favicon ermöglichen, automatisch zwischen einer dunklen und einer hellen Version zu wechseln. Safari unterstützt SVG-Favicons immer noch nicht, daher kann SVG ICO nicht ersetzen – aber es ist eine starke Ergänzung.

Praktische Empfehlung: liefern Sie favicon.ico (enthält 16×16, 32×32, 48×48) als Fallback, fügen Sie ein SVG für moderne Browser und den Dunkelmodus hinzu und schließen Sie ein 180×180 PNG für das Apple Touch Icon ein. Diese Kombination deckt jeden wichtigen Browser und jedes Gerät ab.

So erstellen Sie ein Favicon aus einem PNG

Die folgenden Schritte führen Sie durch die Erstellung eines Favicons für eine Website mithilfe des PNG-zu-ICO-Konverters auf privateconvert.org. Das Tool läuft vollständig in Ihrem Browser – die Datei verlässt Ihr Gerät nie, es muss kein Konto erstellt werden, und Ihrem Ergebnis wird kein Wasserzeichen hinzugefügt.

1. Bereiten Sie Ihr Quell-PNG vor. Verwenden Sie ein quadratisches Bild mit 512×512 Pixeln oder größer. Wenn Ihr Logo eine horizontale Wortmarke ist, schneiden Sie es nur auf das Symbol oder den Anfangsbuchstaben zu – Wortmarken werden bei 16 Pixeln Breite unleserlich. Stellen Sie sicher, dass das PNG einen transparenten Hintergrund hat, wenn das Symbol vor jeder Tab-Farbe sauber aussehen soll.

2. Öffnen Sie den Konverter. Gehen Sie zu privateconvert.org/tools/png-to-ico.

3. Ziehen Sie Ihr PNG auf die Seite. Keine Upload-Schaltfläche zum Suchen – ziehen Sie die Datei direkt auf die Ablagefläche.

4. Laden Sie die ICO-Datei herunter. Der Konverter generiert ein favicon.ico, das die Standard-Layer 16×16, 32×32 und 48×48 enthält. Klicken Sie auf „Download“. Die Datei ist bereit zur Bereitstellung.

5. Erstellen Sie bei Bedarf die zusätzlichen PNG-Größen. Für das Apple Touch Icon ändern Sie die Größe Ihres Quell-PNGs auf 180×180. Für Android-Manifest-Icons erstellen Sie ein 192×192 und ein 512×512. Jeder Bildeditor oder Online-Resizer funktioniert; der ICO-Konverter bei privateconvert.org erledigt die ICO-Seite.

Einige Tipps vor der Konvertierung:

• Beginnen Sie mit der höchstauflösenden Version Ihres Logos, nicht mit einem komprimierten Vorschaubild.
• Der Konverter bewahrt die Alpha-Kanal-Transparenz, sodass ein PNG mit einer geformten oder transparenten Kante im ICO-Output scharf bleibt.
• Wenn Sie neben der Produktion auch eine Staging-Umgebung betreiben, verwenden Sie auf dem Staging-Favicon eine andere Hintergrundfarbe. Der sofortige visuelle Unterschied im Tab zeigt Ihnen auf einen Blick, in welcher Umgebung Sie sich befinden.

So fügen Sie ein Favicon zu Ihrer Website (HTML) hinzu

Platzieren Sie favicon.ico im Stammverzeichnis Ihrer Domain. Die meisten Browser prüfen ihreseite.com/favicon.ico automatisch – kein Markup erforderlich. Für eine explizite Kontrolle über jedes Format und jede Größe fügen Sie die folgenden Tags innerhalb Ihres <head> ein:

<!-- ICO-Fallbacks – funktioniert in allen Browsern ohne weiteres Markup -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- PNG-Größen für moderne Browser -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

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

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

Wenn Sie nur eine Datei haben und die einfachst mögliche Einrichtung wünschen, ist der einzelne ICO-Tag der minimal brauchbare Fallback:

<link rel="icon" href="/favicon.ico">

Für die Unterstützung von Android-Startbildschirmen und Progressive Web Apps fügen Sie ein Web-Manifest hinzu, das Ihre 192×192 und 512×512 PNGs referenziert:

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512", "purpose": "any maskable" }
  ]
}

Speichern Sie das Manifest als manifest.webmanifest und referenzieren Sie es im <head>:

<link rel="manifest" href="/manifest.webmanifest">

Der Wert "purpose": "any maskable" beim 512×512-Eintrag weist Android an, ein adaptives Launcher-Icon zu verwenden, das in das geformte Icon-Raster passt, ohne abgeschnitten zu werden.

So fügen Sie ein Favicon in WordPress, Shopify und Squarespace hinzu

Jede Plattform bietet ein dediziertes UI-Feld, sodass Sie HTML nicht bearbeiten oder Dateien per FTP hochladen müssen.

WordPress: Gehen Sie zu Design > Anpassen > Website-Informationen. Suchen Sie nach dem Feld “Website-Icon” unten. Klicken Sie auf “Website-Icon auswählen”, laden Sie Ihr PNG hoch und schneiden Sie es bei Bedarf zu. WordPress akzeptiert jedes quadratische Bild und übernimmt die Größenänderung. Verwenden Sie für die Quelle mindestens 512×512. Klicken Sie auf “Veröffentlichen”, um zu speichern.

Shopify: Gehen Sie zu Online Shop > Themes, klicken Sie auf “Anpassen” bei Ihrem aktiven Theme und öffnen Sie dann “Theme-Einstellungen” (oder den Header-Bereich, je nach Ihrem Theme). Suchen Sie das Feld “Favicon”, klicken Sie auf “Bild auswählen” und laden Sie ein quadratisches PNG oder ICO hoch. Speichern und veröffentlichen Sie das Theme. Das Symbol erscheint innerhalb weniger Minuten.

Squarespace: Gehen Sie zu Website > Seiten, klicken Sie dann unten in der linken Seitenleiste auf “Website-Tools”. Wählen Sie “Favicon”. Laden Sie ein quadratisches PNG hoch – Squarespace passt die Größe automatisch an. Speichern Sie die Seite.

In allen drei Fällen ist der Workflow derselbe: Erstellen Sie ein sauberes, quadratisches PNG mit 512×512 oder größer mit einem Favicon-Generator und lassen Sie die Plattform die Größenanpassung übernehmen.

Warum Ihr Favicon nicht angezeigt wird

Ein Favicon, das in der Entwicklung funktioniert, sich aber in der Produktion weigert, angezeigt zu werden – oder nach einem Update verschwindet –, ist in der Regel auf eine von fünf Ursachen zurückzuführen.

Browser-Cache. Favicons werden aggressiv gecacht. Führen Sie einen Hard-Refresh mit Strg+Umschalt+R (Windows/Linux) oder Cmd+Umschalt+R (Mac) durch. Wenn das Icon immer noch nicht erscheint, leeren Sie den Browser-Cache vollständig oder testen Sie in einem privaten/Inkognito-Fenster. Einige Browser erfordern das Schließen und erneute Öffnen des Tabs, bevor der Cache für Favicons gelöscht wird.

Falscher Dateipfad. favicon.ico muss sich genau im Stammverzeichnis Ihrer Domain befinden – ihreseite.com/favicon.ico, nicht ihreseite.com/assets/favicon.ico. Wenn Sie einen <link>-Tag mit einem relativen Pfad verwenden, überprüfen Sie, ob der Pfad von der von Ihnen getesteten Seite aus korrekt aufgelöst wird, nicht nur von der Startseite.

Umbenanntes PNG, das sich als ICO tarnt. Das Ändern der Dateierweiterung von .png in .ico konvertiert die Datei nicht. Das ICO-Format ist ein binärer Container; ein umbenanntes PNG ist immer noch ein PNG, und Browser, die den Dateikopf untersuchen, ignorieren es. Führen Sie die Datei durch einen echten Favicon-Generator, um ein echtes ICO zu erstellen.

HTTPS vs. HTTP-Diskrepanz. Browser blockieren Anfragen mit gemischten Inhalten. Wenn Ihre Website über HTTPS läuft, der Favicon-<link>-Tag jedoch auf http:// verweist, wird die Anfrage stillschweigend blockiert. Überprüfen Sie, ob die Favicon-URL https:// verwendet.

CDN-Caching. Wenn Ihre Website hinter einem CDN (Cloudflare, Fastly usw.) liegt, können die Edge-Nodes eine veraltete Version von favicon.ico liefern, selbst nachdem Sie diese auf dem Ursprung ersetzt haben. Leeren Sie den CDN-Cache speziell für die Favicon-URL oder fügen Sie eine Cache-Busting-Abfragezeichenfolge an: href="/favicon.ico?v=2".

Häufig gestellte Fragen

Was ist die kleinste Favicon-Größe? 16×16 Pixel ist die kleinste Größe, die Browser in Tabs anzeigen. Allerdings sollten Sie immer auch 32×32 einschließen – hochauflösende Bildschirme und Taskleistenverknüpfungen benötigen die größere Version, um scharf zu bleiben. Wenn Sie privateconvert.org/tools/png-to-ico verwenden, enthält das ausgegebene ICO automatisch beide Größen.

Soll ich PNG oder ICO für mein Favicon verwenden? Verwenden Sie beides. ICO funktioniert als universeller Fallback, den Browser automatisch finden, ohne HTML-Markup – es ist das, wonach Browser suchen, wenn kein <link>-Tag vorhanden ist. PNG funktioniert für moderne Browser, wenn es explizit deklariert wird, und ist für Apple Touch Icons und Android-Manifest-Icons erforderlich. Die beiden Formate dienen unterschiedlichen Zwecken und sind nicht austauschbar.

Beeinflusst ein Favicon die SEO? Nicht direkt – Google verwendet das Favicon nicht als Ranking-Signal. Es erscheint jedoch in den Google-Suchergebnissen neben Ihrem Website-Namen in den SERP. Ein sauberes, wiedererkennbares Favicon stärkt die Markenbekanntheit und kann zur Klickrate beitragen. Ein fehlendes oder defektes Favicon zeigt in den Suchergebnissen ein generisches Globus-Symbol an.

Wie erstelle ich ein Favicon, das für den Dunkelmodus umschaltet? Verwenden Sie ein SVG-Favicon mit einer eingebetteten prefers-color-scheme-Medienabfrage:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    .icon { fill: #000000; }
    @media (prefers-color-scheme: dark) {
      .icon { fill: #ffffff; }
    }
  </style>
  <circle class="icon" cx="50" cy="50" r="40"/>
</svg>

Referenzieren Sie das SVG neben Ihrem ICO-Fallback:

<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="48x48">

Browser, die SVG-Favicons unterstützen, verwenden die skalierbare, farbumschaltende Version. Safari und ältere Browser greifen auf ICO zurück.

Was ist ein Apple Touch Icon und brauche ich eines? Das Apple Touch Icon ist das Bild, das iOS verwendet, wenn ein Besucher Ihre Website auf seinem Startbildschirm speichert. Ohne eines macht iOS entweder einen Screenshot Ihrer Seite oder verwendet Ihr normales Favicon, beides sieht bei der Anzeigegröße von 180×180 schlecht aus. Erstellen Sie ein 180×180 PNG mit einem einfarbigen Hintergrund (iOS füllt Transparenz mit Weiß und schneidet Ecken ab), fügen Sie 20 Pixel Polsterung hinzu, damit das Artwork die Maske mit abgerundeten Ecken freigibt, und referenzieren Sie es:

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

Was ist ein maskierbares Icon? Der adaptive Launcher von Android schneidet Symbole je nach Gerät in einen Kreis, eine Träne oder ein Squircle. Ein maskierbares Symbol enthält zusätzliche Polsterung um das Artwork herum – eine sogenannte „Sicherheitszone“ –, sodass das Symbol nach dem Zuschneiden beabsichtigt und nicht versehentlich beschnitten aussieht. Fügen Sie "purpose": "any maskable" zu Ihrem 512×512-Eintrag im Web-Manifest hinzu, um Android mitzuteilen, dass es die adaptive Maske anwenden kann.

Welches Bild funktioniert am besten als Favicon? Einfache, kontrastreiche Formen. Ein einzelner Buchstabe, ein geometrisches Zeichen oder ein auffälliges Logosymbol bleiben bei 16 Pixeln lesbar. Detaillierte Illustrationen, feine Linien und vollständige Wortmarken zerfallen bei kleinen Größen zu Rauschen. Wenn Ihr Logo nur als horizontale Verriegelung funktioniert, nutzen Sie das Favicon als Gelegenheit, ein eigenes App-Icon zu erstellen – nur das Symbol, ohne den Text. Sie können in Sekundenschnelle ein Favicon aus PNG erstellen unter privateconvert.org/tools/png-to-ico, um zu testen, wie Ihr Kunstwerk bei kleinen Größen aussieht, bevor Sie es festlegen.

---

Bereit, Ihr Favicon zu erstellen? Öffnen Sie den PNG-zu-ICO-Konverter auf privateconvert.org – legen Sie Ihr PNG ab, laden Sie das ICO herunter, und Ihr Favicon ist fertig. Kein Konto, kein Wasserzeichen, kein Datei-Upload.