PNG zu ICO umwandeln für ein gestochenes Favicon
Ein Favicon ist das winzige Bild, das einer Website ihre visuelle Signatur gibt. Sie sehen es im Browser-Tab neben dem Seitentitel, in Ihrer Lesezeichenliste, im Aufklappmenü der Adressleiste Ihres Verlaufs und manchmal neben Suchergebnissen. Es ist klein, leistet aber viel: Ein wiedererkennbares Favicon hilft Nutzern, Ihren Tab unter einem Dutzend anderer zu finden, und signalisiert, dass eine Seite fertig und gepflegt ist. Das klassische Format für dieses kleine Icon ist ICO, und der einfachste Weg, eines zu erstellen, ist, von einem sauberen quadratischen PNG auszugehen und es umzuwandeln.
Dieses Werkzeug nimmt ein PNG-Bild und macht direkt in Ihrem Browser ein ICO-Favicon daraus. Die Umwandlung läuft lokal auf Ihrem eigenen Gerät, sodass das gewählte Bild nie auf einen Server hochgeladen wird. Das zählt, wenn Ihr Icon ein Logo oder Marken-Asset ist, das Sie nicht an einen Dritten geben möchten. Wenn die Datei bereit ist, laden Sie sie einfach herunter.
Was das ICO-Format ist und warum es mehrere Größen fasst
ICO ist ein Icon-Containerformat, das aus Microsoft Windows stammt, wo es die Icons für Programme, Verknüpfungen und Ordner speichert. Sein prägendes Merkmal, und der Grund, warum es zum Standard für Web-Favicons wurde, ist, dass eine einzige ICO-Datei dasselbe Bild gleichzeitig in mehreren Auflösungen fassen kann. Statt einer festen Bitmap packt die Datei einen kleinen Satz quadratischer Bilder und lässt den Browser oder das Betriebssystem die Größe wählen, die zu der Stelle passt, an der das Icon gezeichnet werden muss.
Das ist wirklich nützlich. Ein Browser-Tab braucht ein winziges Icon, eine Lesezeichenleiste mag ein etwas größeres nutzen, und eine angeheftete Verknüpfung auf dem Desktop kann nach etwas noch Größerem verlangen. Mit einem mehrgrößigen ICO greift jeder Kontext die Version, die zu ihm passt, sodass Ihr Icon scharf bleibt, statt aus einer einzigen kleinen Bitmap hochskaliert zu werden und zu verschwimmen. ICO bewahrt zudem Transparenz, was die Ecken eines runden oder unregelmäßigen Logos vor jeder Tab-Farbe sauber hält.
Empfohlene Favicon-Größen
Für ein Website-Favicon sind die drei Größen, die man einbeziehen sollte, 16x16, 32x32 und 48x48 Pixel. Die 16-Pixel-Version ist die, die die meisten Browser im Tab und in der Adressleiste zeigen. Die 32-Pixel-Version wird auf höher auflösenden Displays und in manchen Lesezeichen- und Verlaufsansichten verwendet, sodass sie auf modernen Bildschirmen knackig bleibt. Die 48-Pixel-Version deckt größere Kontexte ab, etwa Windows-Website-Verknüpfungen. Weil sie alle in einer ICO-Datei liegen, liefern Sie ein einziges Asset aus und lassen jede Oberfläche wählen, was sie braucht.
Gehen Sie von einem quadratischen PNG aus, damit nichts gedehnt wird. Ist Ihr Quellbild rechteckig oder zu groß, schneiden oder skalieren Sie es zuerst mit unserem Bildgrößen-Tool zu einem sauberen Quadrat und führen dann die Umwandlung durch. Ein einfaches, kontraststarkes Design liest sich bei 16 Pixeln weit besser als eine detailreiche Illustration, bevorzugen Sie also kräftige Formen vor feinem Text.
Wie Sie das Favicon zu Ihrer Seite hinzufügen
Sobald Sie Ihre ICO-Datei haben, laden Sie sie auf Ihre Website hoch, traditionell ins Stammverzeichnis als favicon.ico. Viele Browser finden sie dort automatisch, aber es ist gute Praxis, sie ausdrücklich im Head Ihres HTML zu deklarieren, damit kein Rätselraten entsteht. Fügen Sie ein Link-Tag wie dieses hinzu:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Platzieren Sie diese Zeile innerhalb des <head>-Abschnitts Ihrer Seiten. Das Attribut rel="icon" teilt dem Browser mit, dass diese Ressource das Seiten-Icon ist, und das href verweist auf den Ort, an dem Sie die Datei abgelegt haben. Wenn Sie einen stammrelativen Pfad wie den oben verwenden, funktioniert dieselbe Deklaration auf jeder Seite Ihrer Site. Nach dem Bereitstellen müssen Sie eventuell hart neu laden oder den Cache leeren, bevor das neue Icon erscheint, da Browser Favicons hartnäckig festhalten.
Private Umwandlung in Ihrem Browser
Alles geschieht auf Ihrem Gerät. Das gewählte PNG wird lokal gelesen, dekodiert und als ICO neu kodiert, und nichts verlässt während des Vorgangs Ihre Maschine. Es gibt kein Konto, keine Warteschlange und keine serverseitige Speicherung, was dies sogar für unveröffentlichte Logos oder Kundenarbeit unter einer Vereinbarung praktisch macht. Für weitere Wege, Grafiken vorzubereiten und aufzuräumen, stöbern Sie durch unser vollständiges Angebot an Bildwerkzeugen.
Häufig gestellte Fragen
Wird mein Bild irgendwo hochgeladen?
Nein. Das PNG wird vollständig in Ihrem Browser auf Ihrem eigenen Gerät zu ICO umgewandelt. Nichts wird an einen Server gesendet und nichts gespeichert, sodass Ihr Bild privat bleibt.
Welche Größen sollte mein Favicon enthalten?
Die nützlichsten Größen sind 16x16, 32x32 und 48x48 Pixel. Das 16-Pixel-Bild wird in Browser-Tabs gezeigt, während die größeren das Icon auf hochauflösenden Displays und Desktop-Verknüpfungen scharf halten.
Warum ICO statt einfach ein PNG verwenden?
ICO ist das altbewährte Favicon-Format und kann mehrere Größen in einer Datei speichern. Browser und das Betriebssystem wählen die Auflösung, die zu jedem Kontext passt, sodass das Icon scharf bleibt, statt aus einer einzigen Bitmap skaliert zu werden.
Behält das ICO die Transparenz meines PNG?
Ja. Das ICO-Format unterstützt Transparenz, sodass die durchsichtigen Bereiche Ihres PNG erhalten bleiben und das Icon sauber mit jeder Tab- oder Hintergrundfarbe verschmilzt.
Wie füge ich das Favicon zu meiner Website hinzu?
Laden Sie die ICO-Datei auf Ihre Site hoch, meist als favicon.ico im Stammverzeichnis, und fügen Sie ein Link-Tag im Head Ihres HTML hinzu, etwa link rel icon type image x-icon href Schrägstrich favicon.ico. Leeren Sie dann Ihren Browser-Cache, um es zu sehen.
Mein Quellbild ist nicht quadratisch. Was soll ich tun?
Schneiden oder skalieren Sie es zuerst auf ein Quadrat, damit es nicht gedehnt wird. Sie können unser Bildgrößen-Tool nutzen, um ein sauberes Quadrat zu erstellen, und dieses dann zu ICO umwandeln, für das bestaussehende Favicon.