Favicon erstellen: ICO, PNG-Icons und Manifest

Ein Favicon ist das kleine Icon, das in Browser-Tabs, Lesezeichen, Verlaufslisten und Suchergebnissen neben dem Namen Ihrer Website erscheint. Auf Handys erscheinen größere Versionen auf dem Startbildschirm, wenn jemand Ihre Website speichert. Ein klares Icon macht Ihre Website zwischen Dutzenden offenen Tabs leicht auffindbar und wirkt professioneller.

Verschiedene Orte brauchen verschiedene Größen und Formate. Browser suchen nach wie vor nach favicon.ico, Apple-Geräte nutzen ein PNG mit 180 px, Android und installierbare Web-Apps lesen Icons aus einem Web-Manifest, und Suchmaschinen bevorzugen Icons ab 48 px.

Die Größen, die Sie brauchen

Favicon-Größen kurz erklärt: 16 und 32 px sind für Browser-Tabs, 48 px für Windows und Suchergebnisse, 180 px für Apple-Touch-Icons, 192 und 512 px für Android und Web-App-Manifeste. Dieser Generator erstellt alle davon, plus Versionen mit 64, 96, 128, 256 und 384 px für andere Zwecke.

Fügen Sie ein Logo hinzu, idealerweise quadratisch und mindestens 512 × 512 Pixel groß. Ein PNG mit transparentem Hintergrund oder ein SVG liefert die schärfsten Ergebnisse. Wählen Sie einen transparenten oder festen Hintergrund, fügen Sie Innenabstand hinzu, wenn die Grafik an die Ränder stößt, und runden Sie die Ecken für einen App-Look ab. Die Vorschau zeigt das Icon in 16, 32, 48 und 180 px auf hellem und dunklem Hintergrund, damit Sie beurteilen können, wie es in echten Tabs wirkt.

Geben Sie App-Namen und Designfarbe für das Manifest ein und klicken Sie auf „Favicon-Paket herunterladen“. Sie können auch nur favicon.ico oder ein PNG mit 512 px herunterladen.

Von einem PNG ausgehen

Um ein Favicon aus einem PNG zu erstellen, beginnen Sie mit der größten Version, die Sie haben. Ein großes Bild zu verkleinern ergibt scharfe kleine Icons, ein winziges zu vergrößern ergibt Unschärfe. Ist Ihr Logo breit, nutzen Sie besser nur das Symbol oder den Anfangsbuchstaben, denn Text wird bei 16 px unlesbar.

favicon.ico

Die Datei favicon.ico entsteht durch eine Umwandlung von PNG in ICO, die Bilder in 16, 32 und 48 px in einer Datei speichert. Moderne Browser und Windows lesen PNG-komprimierte Icons – das hält die Datei klein und die Kanten sauber.

Apple-Geräte

Das Apple-Touch-Icon ist 180 × 180 Pixel groß. iOS füllt transparente Bereiche schwarz – ist Ihr Hintergrund transparent, gibt der Generator diesem Icon daher automatisch einen festen Hintergrund in Ihrer Designfarbe.

Android und Web-Apps

Die Icons im Web-Manifest site.webmanifest sind PNGs mit 192 und 512 px, inklusive einer maskierbaren Version für Android, das Icons in Kreise oder abgerundete Quadrate beschneidet. Halten Sie wichtige Grafikteile in den mittleren 80 % des Icons, damit nichts abgeschnitten wird.

Entpacken Sie das Paket und laden Sie die Dateien ins Stammverzeichnis Ihrer Website hoch, also dorthin, wo auch Ihre Startseite liegt. Kopieren Sie dann das HTML-Snippet in den Head-Bereich jeder Seite oder in Ihre Website-Vorlage. Das Snippet verlinkt das ICO, die PNGs mit 16 und 32 px, das Apple-Icon und das Manifest.

Website-Baukästen und Content-Systeme haben oft stattdessen eine Einstellung für das Website-Icon. Laden Sie dort das PNG mit 512 px hoch, die Plattform erstellt die übrigen Größen selbst.

Problemlösung

Wird Ihr Favicon nach dem Hochladen nicht angezeigt, nutzen Browser vielleicht eine zwischengespeicherte Version. Öffnen Sie die Icon-URL direkt und laden Sie Ihre Seite dann mit einem harten Neuladen neu, oder versuchen Sie ein privates Fenster. Suchmaschinen können Tage oder Wochen brauchen, um das Icon in den Suchergebnissen zu aktualisieren.

Vereinfachen Sie. Bei 16 × 16 Pixeln verschwinden feine Linien und kleiner Text. Nutzen Sie ein kräftiges Symbol, einen einzelnen Buchstaben oder eine vereinfachte Version Ihres Logos mit starkem Kontrast. Prüfen Sie die helle und die dunkle Vorschau: Ein dunkles Logo auf transparentem Hintergrund kann in einem dunklen Browser-Design verschwinden – ein guter Grund für einen festen Hintergrund oder eine helle Kontur.

Auch Einheitlichkeit zählt. Nutzen Sie dieselben Farben wie Ihre Marke, die Sie mit unserem Farbwähler aufnehmen können, und halten Sie das Icon in allen Größen wiedererkennbar.

Bilder werden in Ihrem Browser verarbeitet und nie hochgeladen. SVG-Dateien werden vor dem Rendern von Skripten und externen Verweisen bereinigt. Unterstützt werden PNG, JPG, WebP, GIF und SVG. Das Tool ist kostenlos und unbegrenzt und verbraucht keine EnhancerPro-Credits.

Nächste Schritte

Gibt es Ihr Logo nur als Pixelbild, kann unser Bild-in-SVG-Konverter eine Vektorversion erstellen, und unser SVG-in-PNG-Tool exportiert Vektorlogos in jeder Größe.

Browser-Tabs

Desktop-Browser zeigen in Tabs meist das Icon mit 16 oder 32 px, auf hochauflösenden Bildschirmen das mit 32 px. Chrome und Edge nutzen die größeren PNG-Icons zudem für Verknüpfungen und die neue Tab-Seite. Weil diese Größen winzig sind, prüfen Sie die 16-px-Vorschau sorgfältig; wirkt das Icon matschig, vereinfachen Sie die Grafik oder erhöhen Sie den Innenabstand leicht.

Suchergebnisse

Suchmaschinen zeigen auf Mobilgeräten und Desktop ein Favicon neben Ihrer Website. Sie bevorzugen ein quadratisches Icon mit einem Vielfachen von 48 px, das für ihre Crawler erreichbar ist. Die Icons im Head Ihrer Startseite zu verlinken, wie im erzeugten Snippet, ist der übliche Weg, sie leicht auffindbar zu machen.

Startbildschirme

Wenn jemand Ihre Website zum Startbildschirm des Handys hinzufügt, nutzen iPhones das Apple-Touch-Icon und Android-Handys die Icons aus dem Manifest. Beide sehen mit festem Hintergrund und etwas Innenabstand am besten aus, damit das Symbol nicht an die abgerundeten Ecken stößt, die das System hinzufügt.

Dunkelmodus

Viele Menschen nutzen dunkle Browser-Designs. Ein schwarzes Logo auf transparentem Hintergrund verschwindet dort. Die dunkle Vorschau im Tool zeigt das sofort. Eine feste Hintergrundfarbe, eine helle Kontur oder eine zweifarbige Version des Logos halten das Icon überall sichtbar.

Ein bestehendes Icon aktualisieren

Wenn Sie ein Favicon ersetzen, behalten Sie dieselben Dateinamen, damit bestehende Links funktionieren. Browser speichern Icons hartnäckig zwischen, daher kann das neue bei wiederkehrenden Besuchern etwas dauern. Eine Versionsangabe wie favicon.ico?v=2 in den Links Ihres HTML zwingt Browser, die neuen Dateien zu laden.

Checkliste vor dem Veröffentlichen

Prüfen Sie vor dem Veröffentlichen vier Dinge: Die Datei favicon.ico öffnet sich im Browser unter ihre-domain/favicon.ico. Das HTML-Snippet steht im Head Ihrer Startseite. Das Apple-Icon hat einen festen Hintergrund und sieht gut aus, wenn Sie die Website zum iPhone-Startbildschirm hinzufügen. Name und Designfarbe im Manifest passen zu Ihrer Marke. Stimmt das alles, erscheint Ihr Icon einheitlich in Tabs, Lesezeichen, Suchergebnissen und auf Startbildschirmen, und Besucher erkennen Ihre Website auf einen Blick.

Quelldateien aufbewahren

Bewahren Sie das Originallogo und das ZIP zusammen in Ihrem Projekt auf. Ändern Sie später Farben oder gestalten das Logo neu, erzeugen Sie das komplette Set mit denselben Einstellungen in einer Minute neu, und alle Größen bleiben einheitlich. Notieren Sie auch die verwendete Designfarbe, damit Manifest und Icons wieder zu Ihrer Marke passen. Ein aufgeräumter Ordner mit Logo, Einstellungen und erzeugten Dateien spart allen Zeit, die die Website nach Ihnen pflegen – auch Ihrem zukünftigen Ich.