Apple touch icons
"Touch icons" zijn de favicons voor smartphones en tablets. Deze worden gebruikt voor snelkoppelingen naar websites.
Bij het opslaan van de link naar een webpagina wordt als er GEEN icoon aanwezig is een verkleining van de pagina weergegeven. Wanneer je er veel van deze op de desktop heb staan wordt het lastig om snel de juiste knop te vinden. Men moet dan de onderstaande tekst lezen.
Door het aanmaken van een icoon valt de kop beter op.
Beide bovenstaande plaatjes hebben de zelfde breedte.
Zoek volgorde
Als het benodigde icon formaat voor het toestel 57 × 57 is, dan zoekt het systeem voor bestanden in de volgende volgorde:
- apple-touch-icon-57x57-precomposed.png
- apple-touch-icon-57x57.png
- apple-touch-icon-precomposed.png
- apple-touch-icon.png
Formaten icons
| Toestel | Size | Bestandsnaam | ||
|---|---|---|---|---|
| Standard iPhone | 57 × 57 | apple-touch-icon-precomposed.png | apple-touch-icon.png | iPhone, iPod Touch, and Android 2.1+ devices |
| Standard iPhone | 57 × 57 | apple-touch-icon-57x57-precomposed.png | apple-touch-icon-57x57.png | iPhone, iPod Touch, and Android 2.1+ devices |
| Retina iPhone | 114 × 114 | apple-touch-icon-114x114-precomposed.png | apple-touch-icon-114x114.png | iPhone with high-resolution Retina display running iOS ≤ 6 |
| Retina iPhone | 120 × 120 | apple-touch-icon-120x120-precomposed.png | apple-touch-icon-120x120.png | iPhone with high-resolution Retina display running iOS ≥ 7 |
| Standard iPad | 72 × 72 | apple-touch-icon-72x72-precomposed.png | apple-touch-icon-72x72.png | iPad mini and the first- and second-generation iPad on iOS ≤ 6 |
| Standard iPad | 76 × 76 | apple-touch-icon-76x76-precomposed.png | apple-touch-icon-76x76.png | iPad mini and the first- and second-generation iPad on iOS ≥ 7 |
| Retina iPad | 144 × 144 | apple-touch-icon-144x144-precomposed.png | apple-touch-icon-144x144.png | iPad with high-resolution Retina display running iOS ≤ 6 |
| Retina iPad | 152 × 152 | apple-touch-icon-152x152-precomposed.png | apple-touch-icon-152x152.png | iPad with high-resolution Retina display running iOS ≥ 7 |
| Retina iPad | 180 × 180 | apple-touch-icon-180x180-precomposed.png | apple-touch-icon-180x180.png | iPad with high-resolution Retina display running iOS ≥ 7 |
Stijl
iOS voegt automatisch enkele stijl elementen toe aan jouw icon, nl:
- Ronde hoeken
- Drop Schaduw
- Reflecterende glans
Je kunt dit, behalve ronde hoeken, voorkomen door je icon apple-touch-icon-precomposed.png te geven.
Het maken van een icon
Maak een icon op een canvas van 304 × 304 pixels. Hierna vanaf dit ontwerp (304 × 304) verkleinen naar alle maten, acht stuks, zoals in de tabel vermeld (oude OS wordt nog gebruikt door een enkeling) en ze benoemen.
Plaatsen op de website
Het plaatsen van deze icons in de root van de site is voldoende.