HTML - iPhone, iPad iconen


Aanvullend op de tutorial die gaat over de Metatag voor mobiele telefoons en aanvullend op de tutorial die gaat over het instellen van een favicon is er deze tutorial die gaat over het instellen van een aantal zaken waaronder iconen specifiek voor de iPhone, iPad.

Iconen

Het kan namelijk gebeuren, zeker als je een mobiele versie hebt van je website dat een bezoeker je website toevoegt aan het beginscherm van de iPhone, iPad, iPod Touch of Android zodat de website weer sneller geopend kan worden. In dat geval is het wel prettig als je invloed kan uitoefenen op het icoon dat dan gebruikt wordt zodat dit er goed uitziet.

Speciaal daarvoor is er de onderstaande code die geplaatst moet worden in het <head> gedeelte van de website. Pas dan het pad naar de afbeelding aan. In dit geval gaat het echter niet om een .ico bestand maar gaat het om een PNG bestand die je moet gebruiken. Wat betreft de afmetingen moet het nieuwe icoon dan 57 bij 57 pixels worden.

<link rel="apple-touch-icon" href="/touch-icon-iphone.png">


Overigens zal iOS zelf dan een effect toevoegen aan het icoon. Wil je dit niet dan kan dat ook door simpelweg "-precomposed" toe te voegen aan de code zoals hieronder.

<link rel="apple-touch-icon-precomposed" href="/touch-icon-iphone.png">


Als er verder geen iconen worden ingesteld dan zal zowel de iPhone, de iPad als de iPod het bovenstaande icoon gebruiken. Echter is het ook mogelijk om voor de iPad en de iPhone 4, 4S en 5 aparte iconen te gebruiken. Voor de iPad zou het icoon 72 x 72 pixels moeten zijn maar voor de laatste iPad gaat het om 144 x 144 pixels. Voor de iPhone 4, 4S en 5 gaat het om 114 x 114 pixels. In zijn volledigheid wordt het dan zoals hieronder.

<link rel="apple-touch-icon" href="/touch-icon-iphone-57-57.png">
<link rel="apple-touch-icon" sizes="72x72" href="/touch-icon-ipad-72-72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/touch-icon-iphone-114-114.png">
<link rel="apple-touch-icon" sizes="144x144" href="/touch-icon-ipad-144-144.png">

Startup

Wat een andere mogelijkheid is om in te stellen is een startup afbeelding. Normaal gesproken als iemand je website heeft toegevoegd aan het beginscherm en hierop drukt dan zal er automatisch een screenshot worden getoond van de laatste keer dat diegene je website heeft bezocht, voordat de website daadwerkelijk in beeld geladen zal worden.

Deze screenshot is misschien niet altijd even mooi en daarom kun je zelf een alternatieve afbeelding instellen die de gebruiker in beeld krijgt na het drukken op je icoon in plaats van een screenshot, voordat de site geladen is. Plaats hiervoor de onderstaande codes.

Zorg dat de afbeelding een formaat heeft van 320 x 460 pixels (potrait) voor de iphone 1 tot en met 3. Voor de iPhone 4, 4S en 5 zijn er andere afmetingen. Voor de iPhone 4 en iPhone 4S gaat het om 640 x 920 pixels en voor de iPhone 5 gaat het om 640 x 1096.

<link href="/startup.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">

<link href="/startup@2x.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<link href="/startup_large@2x.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">


Voor de iPad kan hetzelfde worden bereikt met de onderstaande codes. Zorg dat je een aparte afbeelding maakt voor zowel portrait als landscape. De eerste afbeelding is 768 x 1024 (portrait) voor de iPad 1 en 2 en de iPad Mini 1. Draai de afmetingen voor landscape. Voor de latere iPads wordt de afbeelding 1536 x 2048 of omgekeerd (landscape). Indien de onderste werkbalk geladen word haal je 20 pixels (Retina 40 pixels) af van de hoogte.

<link href="/startup_ipad_portrait.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">

<link href="/startup_ipad_landscape.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">

<link href="/startup_ipad_portrait@2x.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<link href="startup_ipad_landscape@2x.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">