Favicon erstellen - Icon für Lesezeichenverwaltung und Website

Favicon ist ein Kunstwort und entstand durch die Zusammenziehung der der Worte Favorit und Icon = Favicon. Diese Favicons erscheinen auf vielen Webseiten neben der URL als kleine Grafik. Dieses Icon wird auch in den Lesezeichen angezeigt, wenn man die Website bookmarkt.

Favicon im Browser
Favicon im Browser

Beispiel der Website http://www.fennek.mobi/ - im Reiter von Firefox erscheint ein kleiner Fennek, der eine 16x16 Pixel große Grafik ist.

Im folgenden Video werden die Grundlagen zum Favicon und der prinzipielle Ablauf der Erstellung gezeigt. Im zweiten Video weiter unten, wie ein Favicon über GIMP erstellt wird.

Video: Favicon erstellen

Die Icons sind relativ einfach erstellbar. Man nehme eine Grafik - konvertiere diese auf eine Größe von 16 auf 16 Pixel und speichere diese Grafik unter dem Namen favicon.ico

Im folgenden Video wird gezeigt, wie ein Favicon von einem bestehenden Foto über GIMP erstellt wird.

aus Grafik ein Favicon mit GIMP erstellen

Wenn Sie ein Favicon erstellen, beachten Sie bitte, dass Favicons eine Größe von 16x16 bzw. 32x32 Pixel haben – regulär 16x16.

D.h. das Favicon ist extrem klein und Präzision und Sauberkeit sind nicht gefragt. Sie können z.B. ein vorhandenes Bild nehmen und das was sie benötigen grob ausschneiden.

In dem folgenden Beispiel wird ein Favicon mit aus dem Bild von folgender Website erstellt. http://www.fennek.mobi/originale/img-2672.jpg

Öffnen Sie das Bild in GIMP. Der Kopf soll als Favicon benutzt werden.

umzuwandelndes Bild in GIMP laden
umzuwandelndes Bild in GIMP laden

Wählen Sie das Auswahlwerkzeug „Pfade: Pfade erstellen und bearbeiten“ im Werkzeugkasten links aus.

Werkzeug für Pfade erstellen auswählen
Werkzeug für Pfade erstellen auswählen

Legen Sie um den Kopf mit dem Werkzeug einen Pfad – dies muss nicht präzise sein da das Bild danach stark verkleinert wird.

Pfad um den gewünschten Bereich zeichnen
Pfad um den gewünschten Bereich zeichnen

Wenn Sie den Pfad erstellt haben, klicken auf „Auswahl aus Pfad“.

Pfad aus Auswahl erstellen
Pfad aus Auswahl erstellen

Da der Kopf übrig bleiben soll, wird die Auswahl in der Menüleiste unter „Auswahl – Invertieren“ umgekehrt.

Klicken Sie danach auf Ihrer Tastatur auf entfernen (oder sie klicken in der Menüleiste auf „Bearbeiten – Löschen“).

Auswahl invertieren
Auswahl invertieren

Der Kopf bleibt dann übrig und der Hintergrund ist weiß.

löschen des Hintergrunds
löschen des Hintergrunds

Das Favicon soll einen transparenten Hintergrund bekommen also klicken Sie im Werkzeugfenster auf Ebenen. Klicken Sie mit der rechten Maustaste auf den „Hintergrund“ und wählen „Alphakanal hinzufügen“ aus.

Alphakanal hinzufügen
Alphakanal hinzufügen

Betätigen Sie erneut die Entfernen-Taste auf Ihrer Tastatur und der Hintergrund wird transparent.

durch Entfernen-Taste transparenten Hintergrund
durch Entfernen-Taste transparenten Hintergrund

Beschneiden Sie dieses große Bild dem Werkzeug „Zuschneiden“ nur auf den Kopf mit runter.

Werkzeug zum Zuschneiden auswählen
Werkzeug zum Zuschneiden auswählen

Drücken Sie die Eingabe-Taste auf Ihrer Tastatur oder klicken Sie in der Menüleiste auf „Bild – Auf Auswahl zu-schneiden“.

nach Auswahl festlegen endgültig zuschneiden
nach Auswahl festlegen endgültig zuschneiden

Das Bild ist nun auf 2069 x 1975 Pixel geschrumpft.

Zwischenstand Favicon noch zu groß
Zwischenstand Favicon noch zu groß

Das Favicon soll jedoch 16 x 16 Pixel groß sein.

Um das Bild zu verkleinert klicken Sie in der Menüleiste auf „Bild – Bild skalieren“.

Funktion zum Bild skalieren auswählen
Funktion zum Bild skalieren auswählen

Folgendes Fenster wird geöffnet.

Fenster zum Bild skalieren
Fenster zum Bild skalieren

Tragen Sie in die Breite und Höhe jeweils 16 ein. (Wenn sich die Zahl ändern, weil diese verknüpft sind, entknüpfen Sie die Zahlen indem Sie auf das Kettensymbol rechts daneben klicken).

Klicken Sie auf den Button „Skalieren“ und das Bild wird auf 16 x 16 Pixel verkleinert.

Das Bild ist nun sehr klein und pixelig – nicht erschrecken, das ist richtig so.

verkleinertes Bild für die Favicon- Größe 16x16
verkleinertes Bild für die Favicon- Größe 16x16

Nun können Sie das Bild unter „Datei – Speichern unter…“ als Favicon speichern.

Wichtig ist, dass Sie die ico-Datei „favicon“ nennen!

Speichern als favicon.ico im richtigen Format
Speichern als favicon.ico im richtigen Format

Denken Sie ebenfalls daran, dass Sie das Favicon in den Ordner speichern, in dem Sie auch die Datei index.htm gespeichert haben.

speichern im richtigen Ordner
speichern im richtigen Ordner

Nachdem Sie auf den Speichern-Button geklickt haben, öffnet sich ein neues Fenster. Klicken Sie erneut auf Speichern und das Favicon ist im Zielordner gespeichert.

gespeichertes Favicon
gespeichertes Favicon

Favicon in Website einbinden

Nachdem Sie das Favicon in demselben Ordner in dem die index.htm-Datei gespeichert ist, müssen Sie nur noch im <head>-Bereich Ihrer index.htm-Datei den folgenden Code eingeben.

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 
<link href="design.css" rel="stylesheet" />
</head>

Speichern Sie die Datei und Ihr persönliches Favicon ist auf Ihrer Website ist eingebunden.

Favicons über IrfanView

Wichtig ist als Dateiformat .ico - dieses lässt sich mit IrfanView erstellen. Grafik laden (egal ob jpg oder gif) und speichern unter dem Format „ico“. Mehr zum bearbeiten mit IrfanView im Bereich Bilder bearbeiten

Die Grafikdatei wird nun in das Hauptverzeichnis (dort liegt die index.htm) der Website hochgeladen.

Auf allen html-Seiten wird dann noch folgender Code im Head-Bereich eingebunden:

<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>

Fehler in Logfile vermeiden

Aus einem weiteren Grund ist es geschickt, so ein Icon für seine Website zu erstellen - es wird automatisch vom Browser abgefragt und wenn es nicht existiert, wird jedes Mal eine Fehler im Logfile geschrieben.

Websites mit Unterverzeichnissen

Ist die Struktur der Website mit Unterverzeichnissen aufgebaut, wird die .ico Datei nur im Hauptverzeichnis abgelegt und als href dann dort die Angabe href="/favicon.ico"