Website selber erstellen - Tools, Widgets, Zubehör

Favicons für die Webseite / Homepage

Das Favicon ist ein kleines Image, das je nach Browser am Anfang der Adressleiste des Browsers bzw. bei der Tab-Bezeichnung angezeigt wird. Legt man ein Lesezeichen an, wird das Favicon ebenfalls gespeichert und ermöglicht das schnellere Wiederfinden, da wir Menschen sehr visuell geprägt sind und uns Bilder einfacher merken.

Bei Schnellverknüpfungen auf Smartphones wird das Favicon auf dem Bildschirm des Smartphones für den Schnellzugriff angezeigt. Es macht also Sinn, sich ein individuelles Favicon für die eigene Homepage zu erstellen.

Beispiele

Das magendafarbene T steht für T-Online und ist als Markenzeichen auch gleich das Favicon. Gleiches gilt für das Favicon von Google. Hier kommt das sogenannte "Corporate-Identity" zur Geltung. Alles sieht gleich aus und erhöht den Wiedererkennungseffekt.

Das Favicon wird im Head-Bereich im Quelltext eingebunden. Dafür gibt es den link-Tag.

Beispiel:

<html>

<head>

<title>Titel der Homepage</title>

</head>

Im Beispiel wird angenommen, das die Grafik im Stammverzeichnis deiner Homepage liegt. Andernfalls muss wie immer der gesamte Pfad angegeben werden.

Wenn du ein Baukastensystem eines Providers nutzt und kein Profi bist: Meist werden Bilder in einem separaten Verzeichnis "bilder" gespeichert. Das Verzeichnis kannst du einfach herausfinden, indem du deine Homepage aufrufst und bei einem beliebigen Bild einen Rechtsklick machst und dir die Grafik-Info anzeigen lässt. Bei den Billig-Paketen hat man aber meist keinen Zugriff auf den HTML-Code des Head-Bereiches, da diese für Laien konzipiert sind. Aber eine Suche in den FAQ oder eine Nachfrage beim Support hilft manchmal doch weiter.

Favicons werden normalerweise im Dateiformat ico erstellt, mit einer Größe von 16 x 16 Pixel oder 32 x 32 Pixel. Die Farbauswahl sollte auf 256 Farben beschränkt sein. Aktuelle Browser akzeptieren aber auch png- und jpg-formatierte Bilder. Aber die Größe sollte man auf die üblichen max. 32x32 Pixel beschränken. (32x32 ist besser für Smartphones geeignet, wo die Grafiken oft etwas größer dargestellt werden)

Eine Gute Quelle für kostenlose und fertige Favicons ist:

www.icondatenbank.com

Hast du bereits ein geeignetes Bild, kannst du hier ganz einfach ein Favicon erstellen lassen:

favicon-generator.com - einfach nur die Quelldatei angeben und fertig.

Man kann in Projekten auch mehrere Favicons verwenden. Favicons gelten hierarchisch. Wer also für eine Subdomain ein extra Favicon definiert und dieses im Headbereich aller Seiten (Template) definiert, kann für dieses Teilprojekt ein separates Favicon wählen. Wird für eine einzelne Seite zusätzlich ein abweichendes Favicon definiert, ersetzt dieses das erste. Der Browser akzeptiert immer das zuletzt definierte Favicon, wenn wie in einem solchen Fall durch das CMS zwei Favicon-Tags definiert sind.

Probleme mit dem Favicon? - besser gleich hier lesen