jul24 2011

Written by: Wouter Mesker in de categorie  Algemeen, mobile

hoofdaf

De meeste websites hebben wel een favicon, je weet wel zo een klein icoontje die zichtbaar is voor de url of duidelijk zichtbaar is bij de favorieten. Maar veel sites hebben nog geen Pictogrammen die herkent worden door Android & IOS. In deze korte tutorial wordt het duidelijk hoe je icoonen maakt voor het startscherm van een Android & IOS device.

De eerste stap is het creëren van een icoon. De afmetingen voor de iconen die standaard zijn staan hieronder in een tabel. Vaak is het creëren van een icoon van 114*114px al voldoende en schaalt de OS deze zelf naar de juiste afmetingen. Maar als u zeker van u zaak wilt zijn kunt u alle afmetingen maken. U kunt u Icoon als een PNG ( (als u van plan om transparantie te gebruiken) of als JPG opslaan.

iphone 3&3gs & ipod touch 57*57px
ipad 72*72px
iphone 4 114*114px
Android (high-res) 72*72px (icoon = 60*60)

 

Vervolgens kunt u een simpel stukje code gewoon toevoegen aan de <HEAD> van je site, zodat de apparaten kunnen je afbeelding vinden:

1
2
3
<link rel="apple-touch-icon" href="apple-touch-icon-57x57.png " />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png " />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png " />

http://www.wwebsites.nl/iosb/apple-touch-icon-144x144.PNG http://www.wwebsites.nl/iosb/apple-touch-icon-72x72.PNG http://www.wwebsites.nl/iosb/apple-touch-icon-57x57.PNG

Fancy effects

IOS voegt automatische een aantal visuele effecten toe aan je icoon, zodat u icoon goed past op de homescreens van de IOS devices. Wat voegt apple toe?:

  • Afgeronde Hoeken
  • Schaduw
  • Gereflecteerde overlay

Wil je niet dat dit automatsche gebeurt, gebruik dan de -precomposed tag in je < rel> functie

1
<link rel="apple-touch-icon-precomposed apple-touch-icon" href="apple-touch-icon-114x114.png " />

Als u gebruik wilt maken van een icoon met de precomposed functie en alles in eigen hand wilt houden kunt u hier een sjabloon vinden.

Android
Het mooie van Android is dat Android gewoon de IOS rel tag leest dus voor android hoeven er geen extra handelingen gedaan te worden.

* Opmerking over de Android-apparaten: versies 1.5 en 1.6 te werken met de “-precomposed” alleen afbeeldingen en 2,1 & nieuwe zal de tag te lezen zonder “-precomposed”.

Reacties
  1. Mister Blackberry zegt:

    Werkt dit ook voor blackberry?

Reply