Favicon in eine Webseite einbinden

Donnerstag, 13. August 2009

VN:F [1.9.3_1094]
Rating: 0.0/5 (0 votes cast)

Ein Favicon ist ein kleines Bild, welches im Browser in der Adresszeile neben der URL und in den Favoriten angezeigt wird. Favicons tragen daher auch zur Steigerung des Wiedererkennungswertes einer Internetseite bei.

Zunächst muss das Bild erstellt werden, welches dann in der Adresszeile neben der URL angezeigt werden soll. 16 X 16 px sind dabei eine passende Größe. Favicons können mit den bekannten Bildbearbeitungsprogrammen wie beispielsweise Adobe Photoshop erstellt werden. Eine Alternative zu den großen Bildbearbeitungsprogrammen sind Icon-Editoren wie beispielsweise IcoFX.

Unter Photoshop muss das Bild erst als .bmp gespeichert werden, danach muss die Dateiendung .bmp manuell in .ico geändert werden.

Eine weitere Alternative sind Favicon-Generatoren wie beispielsweise favinator.de.

Eingebunden wird das Favicon wie folgt (ausgehend vom Grundgerüst einer HTML-Datei):

<doctype>

<html> 

<head> 

<title> </title> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta name=”description” content=”Your Description”>
<meta name=”keywords” content=”Your Keyword 1, Your Keyword 2”>
<meta name="robots" content="index,follow">

<link rel="stylesheet" href="yourstylesheet.css">

<link rel="shortcut icon" href="http://www.webdesign-er.com/favicon.ico"> 

</head>

<body>  

</body>

</html>

Der fettgedruckte Code muss eingefügt werden, damit das Favicon angezeigt wird. Der Pfad muss entsprechend abgeändert werden, je nach dem wo das Favicon gespeichert wurde (domain/ordner/favicon.ico).

Folgendes sollte beachtet werden:

Ein beliebtes Problem ist die Groß- und Kleinschreibung von Dateinamen. Wird im HTML-Dokument die Datei favicon.ico als Favicon referenziert, so darf die Datei nicht Favicon.ico heißen; dies würde dazu führen, dass das Favicon nicht angezeigt wird. Groß- und Kleinschreibung ist also relevant!

Leave a Reply