So erstellen Sie ein favicon.ico (Mehrfachgrößen) aus PNG oder SVG

Ein Favicon ist das kleine Icon, das in Browser-Tabs, Lesezeichen, Verlaufslisten und Adressleisten erscheint. Es ist eines der ersten visuellen Elemente, die Benutzer an Ihrer Website bemerken, und es richtig zu machen, ist wichtiger, als die meisten Entwickler denken. Ein unscharfes, fehlendes oder falsch dimensioniertes Favicon lässt eine Website unfertig und unprofessionell wirken.

Das ICO-Format bleibt die zuverlässigste Wahl für Favicons, da es mehrere Bildgrößen in einer einzigen Datei bündeln kann. Wenn ein Browser ein 16x16-Icon für die Tab-Leiste benötigt, holt er das 16x16-Bild aus der ICO-Datei. Wenn das Betriebssystem ein 32x32-Icon für eine Taskleisten-Verknüpfung benötigt, holt es die 32x32-Version. So sieht Ihr Favicon in jeder Größe immer scharf aus, anstatt von einer einzigen Auflösung hoch- oder herunterskaliert zu werden.

In diesem Leitfaden bereiten Sie ein Quellbild vor, konvertieren es mit Any2ICO in eine ICO-Datei mit mehreren Größen, wählen die richtigen Favicon-Größen und fügen die korrekten HTML-Tags hinzu, damit Browser Ihr Icon finden und anzeigen. Der gesamte Vorgang dauert weniger als zwei Minuten, und die Konvertierung findet direkt in Ihrem Browser statt.

Schritt 1: Bereiten Sie Ihr Quellbild vor

Ein großartiges Favicon beginnt mit einem großartigen Quellbild. Die Qualität Ihrer Eingabe bestimmt direkt die Qualität Ihrer Ausgabe, daher lohnt es sich, einen Moment darauf zu verwenden, bevor Sie etwas konvertieren.

Verwenden Sie ein quadratisches Bild. Favicons werden immer als Quadrate angezeigt, daher sollte Ihre Quelle quadratisch oder nahezu quadratisch sein. Wenn Ihr Logo breiter als hoch ist, erwägen Sie, es auf einen quadratischen Ausschnitt zuzuschneiden oder ein vereinfachtes Zeichen anstelle des vollständigen Wortzeichens zu verwenden. Any2ICO bietet sowohl Einpassen- als auch Ausfüllen-Skalierungsmodi, wenn Ihr Bild nicht perfekt quadratisch ist. Einpassen passt das gesamte Bild in das Quadrat mit optionaler Hintergrundfüllung ein, während Ausfüllen das Bild skaliert, um das Quadrat vollständig zu füllen, wobei die Ränder beschnitten werden.

Beginnen Sie mit der höchsten verfügbaren Auflösung. Ein Bild mit mindestens 256x256 Pixeln gibt Any2ICO saubere Quelldaten für jede Favicon-Größe von 16x16 bis 256x256. Wenn Ihre Quelle nur 32x32 groß ist, kann das Tool durch Herunterskalieren noch kleinere Größen erstellen, aber es kann keine scharfe 256x256-Version aus einem winzigen Original erzeugen. Im Zweifel wählen Sie größer.

PNG ist das ideale Eingabeformat. PNG bewahrt Transparenz und ist verlustfrei, was es zum besten Ausgangspunkt für die Icon-Konvertierung macht. Wenn Ihr Logo einen transparenten Hintergrund hat, überträgt PNG diese Transparenz perfekt in die ICO-Ausgabe. JPG funktioniert ebenfalls, unterstützt aber keine Transparenz und kann Kompressionsartefakte in der Quelle einführen.

SVG funktioniert, aber mit Einschränkungen. SVG ist ein Vektorformat, das theoretisch auf jede Auflösung skaliert werden kann, was ideal für Favicons klingt. Any2ICO akzeptiert SVG-Dateien und rastert sie während der Konvertierung. SVGs mit externen Schriftreferenzen, verknüpften Bildern oder komplexem CSS werden jedoch möglicherweise nicht wie erwartet gerendert, wenn sie im Browser rastert werden. Wenn Ihr SVG in einem Webbrowser korrekt aussieht, wird es mit ziemlicher Sicherheit korrekt konvertiert.

Schritt 2: Mit Any2ICO in ein Mehrfachgrößen-ICO konvertieren

Mit Ihrem vorbereiteten Quellbild gehen Sie zu Any2ICO, um es in eine korrekt strukturierte ICO-Datei mit mehreren Größen zu konvertieren. Der Vorgang ist unkompliziert und erfordert nur wenige Klicks.

Laden Sie Ihr Bild hoch. Ziehen Sie Ihre PNG-, SVG-, JPG-, WebP-, GIF-, BMP- oder AVIF-Datei per Drag & Drop auf den Konvertierungsbereich. Sie können auch ein Bild direkt aus Ihrer Zwischenablage einfügen, von einer URL importieren oder eine Verbindung zu Google Drive oder OneDrive herstellen. Any2ICO akzeptiert Dateien bis zu 10 MB, was weit mehr ist, als jede Favicon-Quelle benötigen sollte.

Wählen Sie Ihre ICO-Größen. Any2ICO lässt Sie auswählen, welche Größen in die ICO-Datei eingebettet werden sollen: 16, 32, 48, 64, 128 und 256 Pixel. Für die meisten Websites deckt die Auswahl von 16, 32 und 48 die wesentlichen Anwendungsfälle ab. Wenn Sie volle Abdeckung einschließlich Windows-Anwendungs-Icons und High-DPI-Displays wünschen, fügen Sie auch 64, 128 und 256 hinzu. Jede gewählte Größe fügt eine separate Bildebene innerhalb der einzelnen ICO-Datei hinzu.

Wählen Sie Ihren Skalierungsmodus. Wenn Ihre Quelle nicht perfekt quadratisch ist, wählen Sie Einpassen, um das gesamte Bild innerhalb der quadratischen Begrenzung einzupassen (mit Hintergrundfüllung für leere Bereiche) oder Ausfüllen, um das gesamte Quadrat durch Beschneiden zu füllen. Für die meisten Logos ist Einpassen die sicherere Wahl, da es das gesamte Bild bewahrt, ohne etwas abzuschneiden.

Legen Sie den Hintergrund fest. Wenn Ihre Quelle Transparenz hat und Sie diese beibehalten möchten, wählen Sie transparenten Hintergrund. Wenn Sie einen soliden Hintergrund bevorzugen, wählen Sie Weiß. Transparente Hintergründe sehen in modernen Browsern und Betriebssystemen am besten aus, während ein weißer Hintergrund nützlich sein kann, wenn Ihr Logo sehr dünne oder helle Elemente hat, die vor dunklen Tab-Leisten verschwinden könnten.

Laden Sie Ihr ICO herunter. Klicken Sie auf die Konvertierungsschaltfläche und laden Sie die generierte favicon.ico-Datei herunter. Die Konvertierung wird von der Canvas-API direkt in Ihrem Browser durchgeführt. Um genau zu verstehen, wie Any2ICO Ihre Dateien beim Upload und Import behandelt, besuchen Sie unsere Über-Seite.

Schritt 4: Favicon-Tags zu Ihrer Website hinzufügen

Sobald Sie Ihre favicon.ico-Datei haben, müssen Sie sie auf Ihrem Server platzieren und den Browsern mitteilen, wo sie sie finden.

Platzieren Sie die Datei im Stammverzeichnis Ihrer Domain. Speichern Sie Ihre favicon.ico-Datei im Stammverzeichnis Ihres Webservers, sodass sie unter https://ihredomain.de/favicon.ico erreichbar ist. Die meisten Browser suchen automatisch nach einer Datei an genau diesem Pfad, auch ohne HTML-Tags, die darauf verweisen. Diese Konvention stammt aus den frühesten Tagen der Favicons und bleibt die zuverlässigste Methode.

Fügen Sie ein Link-Tag in Ihrem HTML-Head hinzu. Obwohl das Platzieren der Datei im Stammverzeichnis oft ausreicht, stellt ein explizites <link>-Tag in Ihrem <head>-Bereich sicher, dass jeder Browser sie zuverlässig findet, einschließlich solcher, die an nicht-Stamm-Pfaden oder Subdomains suchen. Hier ist das minimale Snippet, das Sie benötigen:

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

Das sizes="any"-Attribut teilt dem Browser mit, dass die ICO-Datei mehrere Größen enthält und der Browser die beste für seinen aktuellen Kontext auswählen soll. Wenn Sie explizit angeben möchten, welche Größen enthalten sind, können Sie sie auflisten:

<link rel="icon" href="/de/favicon.ico" sizes="16x16 32x32 48x48">

Für die meisten Websites ist die Einzeiler-Version mit sizes="any" völlig ausreichend. Browser sind klug genug, die richtige Größe aus einer ICO-Datei mit mehreren Größen auszuwählen. Für eine vollständige Referenz zu Favicon-Link-Tags, Attributwerten und Sonderfällen lesen Sie unseren Leitfaden Favicon-HTML-Tags.

Überprüfen Sie die Funktionsfähigkeit. Öffnen Sie Ihre Website in einem Browser und prüfen Sie das Tab-Icon. Wenn Sie das alte Favicon oder gar kein Favicon sehen, müssen Sie wahrscheinlich Ihren Browser-Cache leeren. Favicons werden von jedem großen Browser aggressiv zwischengespeichert, sodass ein hartes Neuladen (Strg+Umschalt+R oder Cmd+Umschalt+R) oder das Öffnen der Seite in einem Inkognito-Fenster der schnellste Weg ist, um zu bestätigen, dass Ihr neues Icon korrekt geladen wird.

Zusammenfassung

Die Erstellung eines ordnungsgemäßen Mehrfachgrößen-favicon.ico ist ein Vier-Schritte-Prozess: Bereiten Sie ein hochwertiges quadratisches Quellbild vor (vorzugsweise PNG oder SVG mit 256x256 oder größer), konvertieren Sie es mit den richtigen Größen mit Any2ICO in ICO, wählen Sie Größen, die zu Ihrer Zielgruppe passen (mindestens 16, 32 und 48), und fügen Sie ein einfaches <link>-Tag zu Ihrem HTML-Head hinzu. Der gesamte Vorgang dauert weniger als zwei Minuten und erzeugt ein Favicon, das in jedem Browser-Tab, jeder Lesezeichenleiste und jeder Desktop-Verknüpfung scharf aussieht.

Eine ICO-Datei mit mehreren Größen ist nach wie vor das universellste Favicon-Format über Browser und Betriebssysteme hinweg. Während moderne Browser auch PNG- und SVG-Favicons akzeptieren, garantiert das ICO-Format Kompatibilität bis zurück zum Internet Explorer und funktioniert nahtlos mit Windows-Desktop-Verknüpfungen. Durch das Bündeln mehrerer Größen in einer einzigen Datei stellen Sie sicher, dass der Browser immer die richtige Auflösung verfügbar hat, ohne separate Dateien für jeden Kontext herunterladen zu müssen.

Bereit, Ihr Favicon zu erstellen? Gehen Sie zu Any2ICO, laden Sie Ihr Logo hoch, wählen Sie Ihre Größen und laden Sie Ihr fertiges favicon.ico in Sekunden herunter. Keine Registrierung, keine Wasserzeichen, und die Konvertierung findet direkt in Ihrem Browser statt.