So erstellen Sie ein Favicon.

Öffnen Sie den Favicon / ICO Generator und wählen Sie Bild. Laden Sie ein PNG, JPG, JPEG, WebP oder GIF hoch oder wählen Sie Beispiel ausprobieren. Das Arbeitsbeispiel verwendet favicon-orbit.png, ein 512 × 512 Pixel violettes Orbit-Zeichen mit transparenten Ecken. Die Eingabe beträgt 202,491 Bytes.

Für eine Marke ohne fertiges Logo wählen Sie auf der Tool-Seite Text. Geben Sie ein oder zwei Buchstaben ein und wählen Sie Weiter. Der Editor bietet Modern Sans, Classic Serif und Monospace-Schriftarten sowie separate Text- und Hintergrundfarben. Bis zu drei Zeichen werden akzeptiert, aber zusätzliche Zeichen können bei kleinen Größen schwer zu erkennen sein.

Behalten Sie das Original-Artwork. Der Generator erstellt neue Icon-Dateien und überschreibt die Quelle nicht. GIF Eingabe wird zu einem Standbild-Icon anstelle eines animierten Favicons.

Für ein Monogramm beginnt das Schriftarten-Menü mit drei enthaltenen Stilen. Wählen Sie Systemschriftarten verwenden auf einem unterstützten Desktop-Browser und erlauben Sie den Zugriff, um die auf Ihrem Gerät installierten Schriftarten hinzuzufügen. Verwenden Sie die Pfeile für Zurück und Weiter, um benachbarte Schriftarten zu vergleichen, oder wählen Sie eine Familie und prüfen Sie die Live-Vorschau, insbesondere bei 16 Pixeln. Schriftarten bleiben auf Ihrem Gerät; die enthaltenen Stile funktionieren ohne Berechtigung.

Der Editor zeigt helle und dunkle Browser-Tabs sowie Vorschauen in gängigen Icon-Größen an. Prüfen Sie zuerst das 16-Pixel-Beispiel; es ist der strengste Test dafür, ob das Zeichen erkennbar bleibt. Die Apple Touch-Vorschau stellt einen 180-Pixel-Export dar und wird im Arbeitsbereich kleiner angezeigt.

Öffnen Sie auf einem Telefon die Einstellungen. Lassen Sie Erstellen aus auf Hochgeladenes Bild und Bildanpassung auf Das ganze Bild anzeigen eingestellt. Setzen Sie für dieses Beispiel Abstand um Inhalt auf 0 und aktivieren Sie Transparenter Hintergrund. Die Quelle enthält bereits ihre eigene abgerundete violette Form und klare Ränder, daher benötigt sie keinen zusätzlichen farbigen Hintergrund.

Bei einer anderen Quelle behält Das ganze Bild anzeigen die Kanten bei, während Icon füllen sie beschneiden kann. Abgerundetes Quadrat, Quadrat und Kreis definieren die äußere Form. Transparenter Hintergrund bewahrt klare Bereiche, kann aber keinen undurchsichtigen Hintergrund entfernen, der bereits in ein Foto gezeichnet wurde. Überprüfen Sie die kleinste Vorschau nach jeder Rahmenänderung.

Wählen Sie unter Download für dieses Beispiel das Website-Icon-Paket (ZIP). Belassen Sie den Websitenamen bei My website für das Beispiel oder ersetzen Sie ihn durch den echten Markennamen für Ihr eigenes Projekt. Dieser Name wird in der site.webmanifest verwendet; er wird nicht als Text über das Bild gelegt.

Wählen Sie Start. Der Browser generiert ein favicon.ico mit sieben Frames und quadratischen Bildern in 16, 24, 32, 48, 64, 128 und 256 Pixeln. Er erstellt außerdem PNG-Icons in 16, 32, 48, 180, 192 und 512 Pixeln, ein Manifest und Installationsanweisungen. Das Ergebnis ist eine ZIP-Datei anstelle eines separaten Download-Buttons für jedes Icon.

Wenn Sie nur ein klassisches favicon.ico benötigen, wählen Sie stattdessen Multi-size ICO. Dies ist nützlich, wenn eine Website-Plattform einen ICO-Upload akzeptiert und kein separates Paket benötigt.

Download speichert website-icons.zip. Das tatsächliche Arbeitsbeispiel enthält neun Dateien und ist 304,351 Bytes groß. Der obige Vergleich zeigt die 512-Pixel-Quelle neben dem echten 256-Pixel-Frame, der aus der exportierten ICO extrahiert wurde, anstatt eines simulierten Browser-Screenshots.

Entpacken Sie die ZIP-Datei, laden Sie die Icon-Dateien in das Stammverzeichnis Ihrer Website hoch und lesen Sie INSTALL.txt. Es enthält HTML Link-Tags für das ICO, PNG-Icon, Apple Touch Icon und Web-Manifest. Wenn Sie die Dateien in einem Unterordner ablegen, aktualisieren Sie sowohl die HTML-Pfade als auch die Icon-Pfade innerhalb der site.webmanifest.

Überprüfen Sie Ihre Website in einem neuen Browser-Tab und auf den Geräten, die für Sie wichtig sind. Browser können Favicons zwischenspeichern, daher beweist ein altes Icon nicht sofort, dass die Installation fehlgeschlagen ist. Behalten Sie das Quellbild und das heruntergeladene Paket, bevor Sie den Editor aktualisieren, da ein Aktualisieren zur Hauptseite des Tools zurückführt.