Wie erstelle ich Touch Icons für die Favoriten in Safari für meine Website?
Da es ja seit iOS 8 die neuen Icons gibt in der Favoritenansicht bei Apple (siehe Fotos) wollte ich fragen wie man diese zu seiner eigenen Website hinzufügt. Die Icons für den Home Screen habe ich schon...
Danke im Voraus
2 Antworten
Ich habe deine Frage zwar nicht ganz verstanden, du möchtest aber glaube ich die Icons (also die kleinen Bilder) in der Favoriten ansicht von ios auf deine Website laden... ok, Screenshotten (Standby und Home Button gleichzeitig klicken), die einzelnen Icons ausschneiden und dann einfach hochladen auf die Website, wenn das deine Frage war
Damit die Icons richtig angezeigt werden solltest du auf die richtige Größe der Icons achten.
- iPhone 6(S) plus: 180x180px
- iPhone 6(S), 5(S), 4S: 120x120px
- iPad und iPad mini(Retina): 152x152px
- iPad 2 und iPad mini: 76x76px / vor iOS 7: 72x72px
- vor iOS7 iPhone: 144x144px
- nonRetina iPhone: 57x57px
Im Quelltext deiner Seite musst du dann folgendes einfügen, den Pfad zu den Icons musst du natürlich entsprechend anpassen.
<!-- non-retina iPhone vor iOS 7 -->
<link rel="apple-touch-icon" href="icon57.png" sizes="57x57">
<!-- non-retina iPad vor iOS 7 -->
<link rel="apple-touch-icon" href="icon72.png" sizes="72x72">
<!-- non-retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon76.png" sizes="76x76">
<!-- retina iPhone vor iOS 7 -->
<link rel="apple-touch-icon" href="icon114.png" sizes="114x114">
<!-- retina iPhone iOS 7 -->
<link rel="apple-touch-icon" href="icon120.png" sizes="120x120">
<!-- retina iPad vor iOS 7 -->
<link rel="apple-touch-icon" href="icon144.png" sizes="144x144">
<!-- retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon152.png" sizes="152x152">
<!-- retina iPad iOS 7 für iPhone 6 Plus -->
<link rel="apple-touch-icon" href="icon180.png" sizes="180x180">
<!--Android (ältere Versionen)-->
<link rel="shortcut icon" href="196x196.png" sizes="196x196">