Favicon (ICO) aus einem PNG erstellen

So funktioniert es

Wählen Sie Ihr Logo — am besten ein quadratisches PNG mit transparentem Hintergrund —, bestimmen Sie den Größensatz und tippen Sie auf ICO erstellen. Aus einem logo.png mit 512×512 Pixeln entsteht so eine einzige favicon.ico, die drei Fassungen mit 16, 32 und 48 Pixeln enthält; der Browser greift für den Reiter selbst zur 16er-Fassung und für Lesezeichen und Taskleiste zu einer größeren. Legen Sie die Datei unter dem Namen favicon.ico in das Stammverzeichnis Ihrer Website, damit ist die Sache erledigt. Ein nicht quadratisches Bild wird an den Rändern nicht beschnitten: Das Seitenverhältnis bleibt erhalten, das Bild wird zentriert und die restliche Fläche bleibt transparent.

Dieses Werkzeug ist auch als favicon erstellen, png in ico umwandeln, favicon generator, ico datei erstellen, favicon aus logo erstellen, ico aufsetzen, favicon png format bekannt.

Was ist Favicon?

Das Favicon ist das kleine Symbol, das neben Ihrer Website im Browserreiter, in den Lesezeichen, im Verlauf und in Suchergebnissen auftaucht. Es wird bis hinunter zu 16×16 Pixeln angezeigt und muss deshalb schlicht, wiedererkennbar und detailarm sein; ein verspieltes Logo ist in dieser Größe schlicht nicht mehr lesbar. Es zu setzen ist mehr als Zierde: Es macht Ihren Reiter unter einem Dutzend anderer auffindbar und erspart dem Server die 404-Antwort auf eine Anfrage, die der Browser ohnehin stellt.

Was ist ICO?

ICO ist ein Symbolbehälter aus der Windows-Welt: Eine einzige Datei trägt dasselbe Symbol in mehreren Größen zugleich, üblicherweise 16×16, 32×32 und 48×48. Browser und Betriebssystem greifen sich daraus die Größe, die sie gerade brauchen, sodass das Symbol in jedem Maßstab scharf bleibt, statt aus einer einzigen Rastergrafik heruntergerechnet zu werden. Die Adresse /favicon.ico im Stammverzeichnis gehört zu den ältesten Gepflogenheiten des Webs und wird von zahlreichen Systemen bis heute automatisch abgefragt.

Worin unterscheiden sich eine ICO und ein PNG-Favicon?

Aktuelle Browser nehmen auch ein PNG-Favicon an; der Unterschied liegt in der Abdeckung. Ein PNG trägt genau eine Größe, jede weitere braucht eine eigene Datei und ein eigenes Element im Seitenkopf. Eine ICO fasst alle Größen in einer Datei zusammen und bedient zusätzlich ältere Browser, Suchmaschinen-Crawler und die vielen Werkzeuge, die /favicon.ico von sich aus abfragen. Am stabilsten fahren Sie mit beidem: eine favicon.ico mit mehreren Größen im Stammverzeichnis, daneben ein PNG-Satz für moderne Seiten. Dieses Werkzeug erledigt den ICO-Teil in einem Schritt.

Transparenz und die Güte der Vorlage

In der ICO steckt für jede Größe ein eigenes PNG, deshalb bleibt Transparenz erhalten. Eine JPG-Vorlage trägt allerdings überhaupt keine Transparenzinformation: Das Symbol erscheint dann in dunkel gestalteten Browsern als gefüllter Kasten. Ein PNG mit freiem Hintergrund ist hier also keine Kleinigkeit.

Ist die Vorlage kleiner als die größte gewählte Kantenlänge, wird sie hochgerechnet — und Hochrechnen erfindet keine neuen Details, das Symbol wird nur weich. Nehmen Sie für den Standardsatz mindestens 48 und für den großen Satz mindestens 64 Pixel.

Welchen Größensatz wählen?

Für die meisten Websites ist der Standardsatz richtig: 16 Pixel erscheinen im Reiter, 32 Pixel in Lesezeichen und Adresszeile, 48 Pixel in Windows-Verknüpfungen.

Soll das Seitengewicht so klein wie möglich bleiben, genügt 16 + 32. Rechnen Sie damit, dass Besucher Ihre Seite auf dem Schreibtisch verknüpfen, nehmen Sie den großen Satz mit der 64er-Fassung.

• Übliche Website → 16 + 32 + 48
• Kleinstmögliche Datei → 16 + 32
• Verknüpfungen auf dem Schreibtisch wichtig → 16 + 32 + 48 + 64

Entwerfen Sie für 16 Pixel, nicht für das Plakat

Ein Symbol wird in der Größe beurteilt, in der es erscheint, und das ist meist ein Quadrat von 16 Pixeln. Ein Schriftzug, eine dünne Kontur oder eine detailreiche Illustration wird dort zum Fleck; ein einzelner Buchstabe, eine einfache Form oder eine kräftige Silhouette hält stand.

Sehen Sie sich die heruntergeladene Datei in Originalgröße an, bevor Sie sie veröffentlichen. Ist sie bei 16 Pixeln nicht zu erkennen, liegt die Lösung in der Grafik und nicht im Größensatz.

Häufige Fragen

Was passiert bei einem nicht quadratischen Bild?

Es wird weder verzerrt noch beschnitten: Das Seitenverhältnis bleibt erhalten, das Bild wird in einer quadratischen Fläche zentriert und die übrigen Ränder bleiben transparent.

Lesen aktuelle Browser eine ICO mit eingebettetem PNG?

Ja. PNG-Daten in einer ICO werden seit Windows Vista unterstützt; alle aktuellen Browser und Betriebssysteme lesen sie.

Ich nutze bereits ein SVG-Favicon — brauche ich trotzdem eine ICO?

Sie ist zu empfehlen. Viele Programme und Lesezeichendienste fragen unmittelbar /favicon.ico ab; liegt im Stammverzeichnis keine ICO, werden diese Anfragen mit 404 beantwortet.

Wie groß muss die Vorlage mindestens sein?

Mindestens so groß wie die größte gewählte Kantenlänge: 48 Pixel für den Standardsatz, 64 für den großen. Eine kleinere Vorlage wird hochgerechnet und wirkt unscharf.

Verliert ein großes Logo bei 16 Pixeln seine Details?

Von 512 auf 16 Pixel ist eine 32-fache Verkleinerung; ein grobes Skalieren liest fast keinen der Vorlagepunkte, und das Symbol wird zum Fleck. Bei den kleinen Größen rechnet dieses Werkzeug detailerhaltend (Lanczos-Verfahren): Jeder Bildpunkt des Symbols ist der gewichtete Mittelwert aller Vorlagepunkte, die auf diese Stelle fallen. Haarfeine Striche und kleine Schrift überstehen 16 Pixel trotzdem nicht — halten Sie das Symbol kräftig und einfach.

Favicon als PNG oder als ICO aufsetzen — was ist richtig?

Beides, in dieser Reihenfolge: Die ICO-Datei ist der Rückfall, den jeder Browser liest, auch ältere Versionen und die Adressleiste von Windows-Verknüpfungen; ein PNG-Favicon ergänzt sie für Geräte, die ein größeres, scharfes Symbol wollen (Lesezeichen, Startbildschirm). Setzen Sie die ICO unter dem Namen favicon.ico ins Stammverzeichnis Ihrer Seite auf und verweisen Sie im HTML-Kopf zusätzlich mit <link rel="icon" type="image/png"> auf das PNG. Dieses Werkzeug baut die ICO; das PNG ist Ihre Vorlage selbst, auf 32 oder 48 Pixel verkleinert.