Favicon: So geben Sie Ihrer Website ein individuelles Erkennungsbild

Jede Website sollte ein Favicon haben. Mit minimalem Aufwand erstellen Sie dieses kleine Favoriten-Symbol, das einen häufig unterschätzten Wiedererkennungswert für Ihre Website darstellt. Beim Favicon handelt es sich um das kleine Bildchen, dass Sie zum Beispiel oben im Tab eines Browserfenster neben dem Namen der Website finden. Auch wenn Sie innerhalb der Unterseiten einer Website navigieren, bleibt das Favicon gleich. Bei mehreren offenen Reitern lässt das unverwechselbare Zeichen so jederzeit den schnellen Wechsel zur gewünschten Seite zu und bleibt als Erkennungszeichen der Internetpräsenz in Erinnerung. Auch in der Favoritenliste oder als Desktop-Logo findet das Symbol Verwendung.

 favicon-beispiel

Das Favicon wird als Website-Symbol im Browser-Tab und in der Favoritenliste eingesetzt.

Diese Vorgaben gelten für die Erstellung eines Favicons

Ein Favicon ist immer quadratisch, und nur geringe 16×16 Pixel groß. Wenn Sie ein spezielles Logo oder Symbol in einer abweichenden Form verwenden wollen, sollten Sie es vor einem transparenten oder weißen Hintergrund abspeichern und quadratisch ausschneiden. Aufgrund der Größe empfehlen sich klare Formen mit wenigen Farben, und möglichst wenige Schriftzeichen. Deshalb verwenden beispielsweise Google oder Amazon nur ihren Anfangsbuchstaben.

Das Favicon erstellen Sie am besten in einem Bildbearbeitungsprogramm. Hier fügen Sie beispielsweise einen transparenten Hintergrund hinzu oder schneiden Ihr Firmenlogo auf die richtige Größe von 16 x 16 Pixeln zurecht. Wenn Sie kein Logo haben, können Sie Ihrer Kreativität bei der Erstellung des witzigen Favicons freien Lauf lassen oder ein typisches Design-Element Ihrer Website darin verwenden. Als Alternative zum Bildbearbeitungsprogramm finden Sie im Internet Programme wie den favicon-generator.de oder favicon.cc, in die Sie ein Logo hochladen und frei gestalten können.

 favicon-erstellen

Ihr Favicon erstellen Sie mit ein wenig Übung bei der Bildbearbeitung in kurzer Zeit.

Sie sollten sicherstellen, dass Ihr Favicon im Dateiformat .ico abgespeichert wird, damit die Datei garantiert von allen Browsern erkannt und richtig angezeigt wird. Wenn Sie mit GIMP arbeiten, können Sie .ico beim Speichern als Dateiformat auswählen. Da das Format jedoch nicht von allen Bildprogrammen unterstützt wird, gibt es im Internet kostenlose Converter bzw. Favicon Maker. Speichern Sie Ihr fertiges Favicon dazu zunächst wie gewohnt als .jpg oder .png ab. Unter icoconverter.com oder converticon.com laden Sie das Bild hoch und speichern es nach der Umwandlung zu .ico wieder ab.

Favicon per Baukasten oder HMTL in die Website einbinden

Nun muss das neue Favicon nur noch in Ihre Website integriert werden. Je nach Baukasten-Anbieter wird dies als einfache Option direkt in der Oberfläche angeboten, oder muss von Hand im HTML-Code erfolgen. Ist die Option Teil des Baukasten-Werkzeugs, müssen Sie die neue .ico-Datei nur noch hochladen, das Programm setzt das Bild automatisch an die richtige Stelle.

Falls Ihr Baukasten dieses Feature nicht bietet, können Sie Favicon auch selbst einbinden. Dazu muss nur der Dateipfad zum Logo im HTML-Header eingefügt werden. Laden Sie das Logo zunächst in die Media-Datenbank des Baukastens hoch, und kopieren den Link zum Bild, also den Namen der Datei inklusive Ordner in dem es liegt. Rufen Sie dann den HTML-Quelltext Ihrer Website auf, fast alle Baukästen erlauben dafür den Wechsel zwischen Editor und HMTL-Ansicht in der Oberfläche. Vor der Änderung des Quellcodes sollten Sie unbedingt eine Kopie des alten Codes machen, so können Sie bei einem Fehler die alte Seite wiederherstellen.

 favicon-quellcode

Auch wenn Sie noch wenig Erfahrung mit HTML-Code haben, wird Ihnen das Einfügen des Favicons nach diesem Beispiel sicher gelingen.

Im Header (zwischen den Zeilen beginnend mit <head> und endend mit </head>) fügen Sie die Zeile <link href=“dateipfad/favicon.ico“ rel=“shortcut icon“/> ein. Der Dateipfad ist der Name des Ordners und favicon.ico der Dateiname Ihres Logos. Der Zusatz “shortcut icon“ hilft den Browsern Ihr Bild sofort als Favicon zu erkennen.

Nicht alle Baukästen erlauben den Eingriff in den Quellcode der Seite. Falls weder die einfache Upload-Funktion, noch die Bearbeitung des Headers möglich ist, kontaktieren Sie den Support Ihres Anbieters, der das Logo im Zweifel für Sie hinzufügen kann. So schnell geben Sie Ihrer Website mit einem eigenen Favicon eine individuelle Note mit Wiedererkennungswert.