# Favicon nicht sichtbar



## NinaJS (19. April 2013)

Hallo!

Ich habe auf meiner Website ein favicon eingebunden. Es wird jedoch nicht in allen Browsern angezeigt. Bei Firefox und im Android-phone klappt's, aber auch nur auf der Startseite. 

Ich habe folgenden Code im Head-Bereich in der index.html Datei eingegeben (und das Icon voher ausgehend von eine PNG-Datei generieren lassen).

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

Kann mir jemand sagen, wie ich es machen muss, damit das Icon auf allen Seiten und in allen Browsern sichtbar ist? 

Gruß
NinaJS


----------



## genodeftest (19. April 2013)

Hi
1. manche Browser lesen nur die Datei favicon.ico im höchsten Verzeichnis.
2. Bist du dir sicher, dass die Favicon-Datei das richtige Format hat?

ich hab mir mal ne Liste zusammen gesammelt, die so die wichtigsten Punkte enthalten sollte:
• alte Versionen des Internet Explorers ignorieren alles außer der /favicon.ico
• offizieller Standard: 
	
	
	



```
<link rel="icon" ...
```
 und PNG-Dateien sollte von allen aktuellen Browsern unterstützt werden
• Safari auf iPhone/iPad verarbeitet nur speziell angepasste Dateien, siehe http://mathiasbynens.be/notes/touch-icons
• Opera Speed Dial: http://dev.opera.com/articles/view/opera-speed-dial-enhancements/
• W3C: http://www.w3.org/2005/10/howto-favicon, http://www.w3.org/html/wg/drafts/html/master/links.html#rel-icon
• Icon handbook: http://iconhandbook.co.uk/reference/examples/favicons/

und bisher sieht das dann bei mir so aus:
	
	
	



```
<link rel="icon" href="/logo.png" type="image/png"/>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png"/>
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
```


----------



## NinaJS (19. April 2013)

Was heisst "höchstes Verzeichnis". Ist das nicht meine index-datei (hier die Startseite der Website)?

Mein Code ist jetzt:

<head>
	<title>TITEL</title>


  <link rel="stylesheet" type="text/css" href="style-css.css">

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

	<meta charset="utf-8" />

	<meta name="description" content=""


	</head>


----------



## tombe (19. April 2013)

Hier ist auch einiges dazu beschrieben, vor allem wie die verschiedenen Dateiformate (GIF, PNG, ICO) einzubinden sind!


----------



## genodeftest (19. April 2013)

Höchstes Verzeichnis ist das, das aufgerufen wird, wenn du die URL des Webservers eingibst, z.B. bei tutorials.de der Aufruf von http://www.tutorials.de/ (äquivalent mit http://www.tutorials.de/forum.php ), dann wird die Datei forum.php aus dem höchsten Verzeichnis geladen. In relativen URLs muss das dann als href="/favicon.ico" notieren. Der slash ("/") zeigt das höchste Verzeichnis an.


----------



## NinaJS (20. April 2013)

Habe das icon jetzt auch als png eingebaut: 

<link rel="icon" href="logo-mini.png" type="image/png"/>

Und siehe da: In den Browsern Chrome und Opera erscheint das icon jetzt auf allen Seiten. Würde das Thema gerna als erledigt markieren, aber im IE erscheint das icon immer noch nicht. Vielleicht ein Cache-Problem? Oder doch MS-Problem? Haber jedenfalls alle Cookies etc gelöscht... 

Gruss
NinaJS


----------

