Eigenes Favicon erstellen

Zunächst erst einmal: Was ist ein Favicon?

Ein Favicon ist ein kleines Bildchen, das bei Webseiten in der Adresszeile, in einem Reiter oder einem Lesezeichen angezeigt wird. Hier einige Beispiele:

Favicon im Tab

Favicon im Bookmark

Favicon in der Adresszeile

Diese Bilder haben ein spezielles Format. Es sind keine jpeg, gif oder png-Dateien, wie sonst auf Websites üblich, sondern es handelt sich um das sogenannte ico-Format: das Windows-Icon-Format (Wikipedia). Die Größe eines Favicons ist 16 x 16 Pixel.

Favicons enthalten meist ein Logo oder eine charakteristische Grafik, die einen hohen Wiedererkennungswert hat. Da die Bildmaße sehr gering sind, sind möglichst einfache Elemente am Besten.

Favicon erstellen:

So können Sie selbst für Ihre Website ein passendes Favicon aus ihrem Logo erstellen:

1. Sie benötigen ihr Logo in einem gängigen Bildformat (jpeg, gif, png). Idealerweise schneiden Sie es auf ein quadratisches Format zu. Wenn Sie kein eigenes Bildbearbeitungsprogramm haben, können Sie den Online-Bild-Editor http://www.pixlr.com/editor verwenden. (vgl. hierzu: http://www.netzmarginalien.de/bild-mit-transparentem-hintergrund-erstellen)

2. Mit dem Online-Tool http://www.favicon-generator.de können Sie ihr vorbereitetes Bild in ein Favicon umwandeln. Gehen Sie dazu auf diese Website und laden Sie über das Dateifeld ihre Grafik hoch. In dem Editor wird das Ergebnis angzeigt. Sie können es beliebig nachbearbeiten.

Favicon-Generator

3. Wenn Sie fertig sind, klicken Sie auf den Link "Das fertige Favicon hier herunterladen" und speichern es auf ihrer Festplatte. Der Standard-Dateiname für ein Favicon lautet "favicon.ico".

In Ihre Website einbinden:

Je nachdem, wie ihre Website programmiert ist, kann es unterschiedlich sein, wie das Favicon eingebunden wird. Deshalb hier nur zwei Tipps:

1. Wenn Sie selbst HTML programmieren, schreiben Sie folgenden HTML-Quelltext in den Head-Bereich Ihrer Website:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
Das Favicon müssen Sie selbstverständlich auf ihren Webserver kopieren. Haben Sie einen anderen Dateinamen gewählt, oder speichern das Favicon in einem Unterordner, müssen Sie die Angabe unter href=" ... " anpassen.

2. Musterwebsite Philippus: Wählen Sie den Menüpunkt "Design" und klicken Sie bei ihrem aktiven Theme auf "Einstellungen". Bei dem Absatz "Favicon-Einstellungen" können Sie ihr vorbereitetes Favicon hochladen.