Tutorial, Webdesign

Favicon – kleine Grafiken mit großer Wirkung

Aktualisiert am

Wer kennt sie nicht? Die kleinen Bilder oder Grafiken, die in der Adresszeile des Internet Explorers vor der Internetadresse stehen. Diese Grafiken werden als Favicon bezeichnet. Die genaue Definition können Sie bei Wikipedia nachlesen. Ein Favicon ist ein Akronym für „favorite icon“. Er erleichtert das Suchen in der Favoritenliste, dient als Orientierungshilfe im Tab und hat damit einen Wiedererkennungswert der gesuchten Website.

Warum haben einige Websites oder Blogs ein leeres Quadrat oder das Logo des Internetexplorers (bzw. eines anderen Browsers)? Wenn Sie kein eigenes Favicon besitzen, wird standardmäßig das Favicon des Browsers angezeigt oder gar nichts.

Wie erstelle ich ein Favicon?

Das Favicon wird als Grafik in die Website oder den Blog individuell eingebunden, wie z.B. Fotos. Dazu sind folgende Schritte notwendig.

  1. Grafik erstellen
  2. Grafik einbinden
  3. Website mit der neuen Grafik auf den Internetserver hochladen

Sie benötigen dazu:

  1. Ein Grafikprogramm oder Favicon Generator
  2. Editor zum Einbinden des HTML-Schnipsels
  3. FTP-Software zum Hochladen

Update 24.02.2016

Seit WordPress 4.3 (August 2015) ist es möglich, ein Favicon, ganz ohne Vorkenntnisse, direkt in WordPress einzubinden. Du brauchst dazu nur die Rechte als Administrator und eine vorbereitete Grafik, die über die Mediathek hochgeladen wird. Ein kleines Tutorial Favicon in WordPress einbinden.

Grafik erstellen

Das Favicon hat in den Browsern eine Standardgröße von 16 x 16 Pixel, in anderen Anwendungen kann das Favicon etwas größer sein. Daher erstellen wir eine Grafik von 32 x 32 Pixeln. Als Motiv eignet sich das Firmenlogo, ein Symbol, ein einfaches Bild oder Buchstaben. Bitte denken Sie daran, dass die Grafik sehr klein ist und einen Wiedererkennungswert haben soll.

Als Grafikprogramm nehmen Sie z. B Photoshop oder Gimp (Freeware für Windows und Mac). Für einfache Grafiken können Sie auch einen Favicon Generator benutzen. Speichern Sie die Grafik unter dem Namen „favicon.ico“ ab. Falls Ihr Grafikprogramm die Endung „ico“ nicht unterstützt, benötigen Sie zum Umwandeln eine zusätzliche Software z.B. IrfanView für Windows. IrfanView ist eine Freeware zum Anzeigen von Fotos und Grafiken. Mit diesem Programm können sie die Fotos auch in andere Formate umwandeln.

Grafik einbinden

Rootverzeichnis einer Website

Damit das Favicon sichtbar wird, muss es im Root-Verzeichnis (Wurzelverzeichnis) Ihrer Website abgespeichert werden. Das ist das Verzeichnis in dem sich die index-Datei befindet.

Im Prinzip wären Sie jetzt fertig. Leider ist das Favicon aber noch nicht in allen Browsern und Anwendungen sichtbar. Dazu müssen Sie noch einen Codeschnipsel im <head> – Bereich Ihrer Dateien einbinden. Sie öffnen einen Editor (dazu reicht auch der Windows Editor), öffnen die Datei „index“ und suchen im oberen Bereich nach <head …. > und dann nach <link…>. Fügen eine Leerzeile ein. In diese Leerzeile kopieren Sie den folgenden Codeschnipsel ein und speichern die Datei ab.

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

Fügen Sie den Codeschnipsel in alle Dateien ein, die einen <head>-Bereich haben und ein Favicon anzeigen sollen. Sind die Dateien in einem Unterverzeichnis (also nicht auf der gleichen Ebene, wie die index-Datei, fügen Sie stattdessen diesen Codeschnipsel ein

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

Website auf den Internetserver hochladen

Zum Schluss müssen Sie die geänderten Dateien und die Grafik via FTP auf Ihren Internetserver hochladen. Zur besseren Übersicht sortieren Sie die Dateien nach dem Änderungsdatum. Falls die Änderungen nicht sofort sichtbar sind, schließen Sie den Browser und öffnen ihn wieder. Ob die Änderungen sofort sichtbar sind, hängt von den Einstellungen Ihres Browsers ab.

Fazit

Ein Favicon für die eigene Website zu erstellen ist nicht schwer. Es kostet zwar etwas Zeit, dafür bekommen Sie ein individuelles Erkennungszeichen Ihrer Website. Falls Sie Ihr Firmenlogo verwendet haben, erhalten Sie ein einheitliches Erscheinungsbild Ihrer Firma mit Wiedererkennungswert.

Fotos: © Kristina Marino


Hat Dir der Beitrag gefallen? Dann bitte teilen!