Je kent het wel; Je zit te browsen op je iPad, opent je eigen website en voegt hem toe aan je Home Screen zodat je er lekker snel bij kan. Na het opslaan vind je de website niet meer terug op je Home Screen, omdat je het logo van je website nergens ziet staan. Daarna open je je favoriete nieuws-site, voegt die toe aan je Home Screen en ziet wél het logo verschijnen. Vol verbazing, lichtelijk gefrustreerd, denk je: “Hoe krijg ik zo’n mooi favorieten ikoontje van mijn website op de iPad?”.
apple-touch-icon.png
Apple apparaten – iPhone, iPod Touch, iPad – voor het gemak “iDevices” genoemd, maken gebruik van het speciale Apple Touch Icon. Dit is vergelijkbaar met het bekende favicon voor de favorieten op je computer.
Hoe maak ik een Apple Touch Icon?
Allereerst dien je rekening te houden met de (maximale) specificaties van het icon. Het scherm van een iPad (en iPad2) heeft 132 DPI. Wanneer je begint te ontwerpen in bijvoorbeeld Illustrator of Photoshop, doe je er goed aan om dit mee te nemen in de instellingen.
Vierkant
Je icon dient vierkant te zijn, bijvoorbeeld 72 bij 72 pixels of 129 bij 129 pixels. Je hoeft hierbij niet na te denken over de ronde hoeken en de glossy laag op het icon; daar zorgt een iDevice zelf voor.
Sla je icon op als apple-touch-icon.png en upload hem naar de hoofdmap (webroot) van je website.
Toevoegen aan je website
De laatste stap is het toevoegen van de Apple Touch Icon aan je website. Dit doe je door in de <head> van je pagina’s de volgende tag toe te voegen:
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
Wanneer je nu de website toevoegt aan het Home Screen van je iDevice, zul je zien dat je icon netjes wordt weergegeven.
stuur een appje