Ein guter Artikel, der alles Wichtige über das Apple-Touch-Icon und dessen optimalste Einbindung in eine Webseite zusammenstellt findet sich hier:
http://mathiasbynens.be/notes/touch-icons
Code Snippet HTML für größte Kompatibilät
|
1 2 3 4 5 6 7 8 |
<!-- For third-generation iPad with high-resolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png"> <!-- For iPhone with high-resolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png"> <!-- For first- and second-generation iPad: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png"> <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"> |
Variante für iOS only
Einfach folgende Dateien im Root-Verzeichnis der Seite ablegen
apple-touch-icon-57x57-precomposed.pngapple-touch-icon-57x57.pngapple-touch-icon-precomposed.pngapple-touch-icon.png
Einfachste Methode
‚apple-touch-icon-precomposed.png‘ in der Größe 144×144 ins Root-Verzeichnis legen