Favicon erstellen mit dem Bildbearbeitungsprogramm GIMP

Wenn man für eine Website ein Favicon mit dem Dateityp .ico und dem Dateinamen favicon.ico erstellen möchte, dann benötigt man ein Programm, das das Speichern einer Bilddatei im Dateiformat .ico unterstützt. Es ist zwar auch möglich, ein Favicon mit einem anderen Dateinamen oder -format für die Website bereitzustellen (.gif oder .png). Hierfür benötigt man jedoch einige Angaben im HEAD-Bereich. Nähere Informationen dazu sind unter Favicon für HTML-Seiten erstellen beschrieben.

Eine Möglichkeit für die Erstellung von Favicons im Format .ico bietet das Bildbearbeitungsprogramm GIMP, mit dem auch Bilddateien vom Typ .gif oder .png erstellt werden können. Das Programm konnte über die Seite des Anbieters unter http://www.gimp.org/downloads/ zumindest in der Vergangenheit kostenlos heruntergeladen werden. Angaben zu Lizenz- und Nutzungs- und evtl. Vertragbedingungen etc. sollten mit dem Anbieter geklärt bzw. von deren Website entnommen werden.

Bei der Erstellung verwendet man in der Regel zwei Methoden, um ein 16 x 16 Pixel großes Favicon zu erstellen. Beim Dateityp .ico ist auch eine Größe von 32 x 32 Pixeln möglich. Entweder man verkleinert ein großes Originalbild oder verwendet das Werkzeug Buntstift, das in vielen Bildbearbeitungsprogrammen enthalten ist. Nachfolgend sind beide Methoden unter Verwendung des Programms GIMP in der Version 2.8.14 beschrieben. In anderen Versionen sollte die Vorgehensweise und die Abbildungen zumindest ähnlich sein.

Großes Bild in Favicon-Größe verkleinern

Nachfolgend wird in einer Bildergalerie Schritt für Schritt gezeigt, wie man mit GIMP ein großes Bild verkleinert und im Dateiformat .ico abspeichert. Das Erstellen von Favicons mit den Dateiformaten .gif oder .png verläuft ähnlich.

  • Datei öffnen einleiten

    Bild 1: Das Menü DATEI - ÖFFNEN auswählen.

  • Großes Bild auswählen

    Bild 2: Zum Ordner navigieren und großes Bild auswählen.

  • Großes Bild ist geöffnet

    Bild 3: Das große Bild ist in GIMP geöffnet.

  • Bild skalieren einleiten

    Bild 4: Menü BILD - BILD SKALIEREN auswählen.

  • Bildgröße auf 16x16 Pixel einstellen

    Bild 5: Bildgröße auf 16 x 16 Pixel einstellen.

  • Bild in Favicon-Größe

    Bild 6: Bild ist auf Favicon-Größe verkleinert.

  • Dateiexport einleiten

    Bild 7: DATEI - EXPORTIEREN ALS auswählen.

  • Dateiendung ico auswählen

    Bild 8: Zum Speicherort navigieren, im unteren Bereich als Dateityp Microsoft-Windows-Symbol auswählen und im oberen Bereich Dateinamen vergeben.

  • Exporteinstellungen festlegen

    Bild 9: Bei Bedarf Exporteinstellungen festlegen

  • favicon.ico im Speicherort

    Bild 10: Die Datei favicon.ico ist erstellt.

Möchte man das Bild im Format .gif oder .png abspeichern, ist lediglich zu beachten, dass man diese bei der Auswahl des Dateityps (Bild 8) auswählt. Die restlichen Schritte dürften identisch sein.

Favicon mit dem Buntstift-Werkzeug erstellen

Möchte man die Farben für einzelne Pixel selbst setzen, kann man in GIMP das Buntstift-Werkzeug verwenden. Hierfür kann man eine neue Datei mit einer Leinwandgröße von 16 x 16 Pixel erstellen.

Neue Datei für das Favicon erstellen

Damit man bei der Bearbeitung jedes Pixel gut sieht, kann man die Zoom-Funktion verwenden und die Leinwand auf z.B. 1600% zoomen. Danach kann man aus der Werkzeugleiste das Buntstift-Werkzeug auswählen, die gewünschte Farbe einstellen und für jedes Pixel durch Anklicken eine Farbe setzen.

Pixel beim Favicon färben

Sind alle Bildpunkte gesetzt, kann man wie in der Bildergalerie (ab Bild 7) gezeigt, die Datei exportieren und als Favicon mit dem Dateiformat .ico, .gif oder .png speichern. Es ist natürlich auch möglich, ein großes Bild auf eine Favicon-Größe zu skalieren und danach das Buntstift-Werkzeug zu verwenden. Ob man ein großes Bild verkleinert und/oder das Bild mit dem Buntstift-Werkzeug selbst erstellt, ist individuell zu entscheiden. Erfahrungsgemäß hat man tendenziell bessere Ergebnisse, wenn man ein großes Bild verkleinert und danach mit dem Buntstift-Werkzeug einige Korrekturen vornimmt.