Zum Tutorial springen
lil cactus

Wie erstellt man eine Favicon-ICO-Datei?

Einsteiger4 MinutenAktualisiert

Kurze Antwort

Öffnen Sie Ihr Motiv in Lil Cactus und wählen Sie Datei dann Exportieren dann ICO… Ersetzen Sie den Inhalt des Felds Dateiname durch favicon.ico. Lassen Sie unter Symbolgrößen alle sechs Größen aktiviert (16 bis 256 px; das ist die Standardeinstellung) und klicken Sie dann auf Exportieren. Der Download enthält alle sechs quadratischen Versionen in einer ICO-Datei.

Die sechs exportierten Blattsymbole auf hellen und dunklen Streifen: jeweils oben 16, 32, 48, 64, 128 und 256 Pixel, darunter 16 und 32 Pixel vierfach vergrößert
Die sechs Größen in favicon.ico auf hellem und dunklem Hintergrund: oben 16, 32, 48, 64, 128 und 256 px, darunter 16 und 32 px vierfach vergrößert.
Dauer
4 Minuten
Niveau
Einsteiger
Sie brauchen
Ein Symbol oder anderes Motiv, geöffnet im Editor
Funktioniert mit
PNG, JPG, SVG, PSD und Lil-Cactus-Projekte (Transparenz bleibt erhalten)
Beispiel in Lil Cactus öffnenEigenes Foto verwenden

Kostenlos, ohne Anmeldung. Ihr Foto bleibt auf Ihrem Computer.

Ein Favicon ist das kleine Symbol neben dem Tab oder Lesezeichen einer Website. Einfache Formen mit großen Farbflächen sind in kleiner Größe besser zu erkennen. Diese Übung verwendet ein zweifarbiges Blatt mit einer einzelnen hellen Blattader.

Ein Favicon als ICO in vier Schritten exportieren

  1. Das Motiv öffnen

    Öffnen Sie das Übungsmotiv von dieser Seite. Für Ihre eigene Datei wählen Sie Datei dann Öffnen… und wählen Sie das Bild aus. Das Schachbrettmuster um das Blatt zeigt den transparenten Hintergrund. Möglicherweise erscheint ein kurzer Hinweis zum Glätten von SVG-Kanten; er schließt sich von selbst.

    Menü „Datei“ mit markiertem Befehl „Öffnen“
    Laden Sie das Motiv, aus dem ein Symbol werden soll.

  2. „Datei › Exportieren › ICO…“ wählen

    Wählen Sie Datei dann Exportieren dann ICO… Das Dialogfeld Als ICO exportieren öffnet sich mit einer Vorschau des Motivs.

    Menü „Datei“ und Untermenü „Exportieren“ mit markiertem Eintrag „ICO“
    Das Dialogfeld für den ICO-Export öffnen.

  3. Dateiname und Größen wählen

    Ersetzen Sie den Inhalt des Felds Dateiname durch favicon.ico. Lassen Sie unter Symbolgrößen die Größen 16, 32, 48, 64, 128 und 256 aktiviert. Das sind die sechs verfügbaren Größen.

    Feld „Dateiname“ im ICO-Export mit favicon.ico, markiert
    Benennen Sie die heruntergeladene Symboldatei.
    Optionen des ICO-Exports mit aktivierten Größen 16, 32, 48, 64, 128 und 256 und markierter Gruppe „Symbolgrößen“
    Jede Zahl gibt Breite und Höhe eines quadratischen Symbols in Pixeln an.

  4. Das ICO exportieren

    Prüfen Sie, ob in der Fußzeile 6 Symbolgrößen steht, und klicken Sie dann auf Exportieren. Ihr Browser speichert favicon.ico über seine Download- oder Speicherort-Einstellungen.

    Fußzeile des ICO-Dialogfelds mit „6 Symbolgrößen“, „Abbrechen“ und markierter Schaltfläche „Exportieren“
    Prüfen Sie vor dem Export die Anzahl der gewählten Größen.

Das Symbol auf Ihrer Website verwenden

Laden Sie favicon.ico in den obersten Ordner Ihrer Website hoch, damit es unter /favicon.ico erreichbar ist. Sie können auch im <head> der Seite mit <link rel="icon" href="/favicon.ico"> darauf verweisen (siehe die Icon-Referenz von MDN).

Browser speichern Favicons im Cache, daher kann es ein Neuladen oder eine Weile dauern, bis ein geändertes Symbol erscheint.

Wenn das Symbol in 16 px schwer zu erkennen ist

Vereinfachen Sie das Motiv: weniger Details, größere Formen und dickere Linien. Die Abbildung oben auf dieser Seite zeigt, was bei 16 px übrig bleibt: die zwei großen Farbflächen des Blatts und seine eine dicke Ader.

Prüfen Sie, ob sich die Form sowohl auf hellen als auch auf dunklen Tableisten abhebt. In der Abbildung verschwindet die dunkelgrüne Hälfte des Blatts auf dem dunklen Hintergrund fast, und die hellgrüne Hälfte trägt die Form. Ein Motiv in einer einzigen dunklen Farbe wäre dort kaum zu sehen.

Wie geht es weiter?

Favicon-ICO-Dateien: Fragen und Antworten

Kann ich ein PNG oder JPG in ein ICO umwandeln?

Ja. In Lil Cactus lassen sich beide Formate öffnen und über den ICO-Export exportieren. Das sichtbare Motiv wird zum Symbol.

Kann ein ICO einen transparenten Hintergrund haben?

Ja. In Lil Cactus behält ICO die Transparenz, die Ihr Motiv bereits hat. Entfernen Sie zuerst einen einfarbigen Hintergrund, wenn der Raum um das Symbol frei sein soll.

Was passiert mit einem rechteckigen Bild in einem ICO?

In Lil Cactus wird das Bild ohne Verzerren in jedes gewählte Quadrat eingepasst. Transparenter Rand füllt den übrigen Platz.

Kann ich ein ICO mit nur einer Größe exportieren?

Ja. Lassen Sie in Lil Cactus unter „Symbolgrößen“ nur die benötigte Größe aktiviert. Das ICO enthält dann nur diese eine Größe.

Kann ich ein ICO mit 512 × 512 px erstellen?

Nein. In Lil Cactus ist die größte ICO-Größe 256 × 256 px. Verwenden Sie PNG, wenn Sie größere Pixelmaße brauchen.

Wird mein Bild hochgeladen, wenn ich ein ICO erstelle?

Nein. Lil Cactus erstellt das ICO in Ihrem Browser und lädt es auf Ihr Gerät herunter; das Bild wird nicht an einen Server gesendet. Optionale Nutzungsstatistiken sind auf der Datenschutzseite beschrieben.

Veröffentlicht  · Zuletzt geprüft