Websites op startscherm van tablets of smartphones (2).

Web clip icons maken

Web clip icons zijn de iconen waarmee een website aan de startpagina van een tablet of smartphone kan worden vastgemaakt. (Hoe dat in zijn werk gaat wordt beschreven in een vorige post)

De web clip icons die door het operatingsysteem worden gegenereerd zijn vaak niet erg duidelijk én ze lijken allemaal op elkaar.

Heb je zelf een website en wil je graag een mooie en vooral herkenbare button op het startscherm van tablets en smartphones zien verschijnen, dan kan dat door een paar kleine ingrepen aan je webpagina’s.

Ipad / Iphone / Ipod touch

Voor IOS heb je minimaal een .png afbeelding nodig van 57×57 pixels, met transparante achtergrond. Noem het apple-touch-icon.png en zet het in de root van de website. Dit is voldoende om gevonden te worden door het IOS.

Het IOS zal dan automatisch zorgen voor afgeronde hoeken, en een glanseffect. Bovendien wordt het icon automatisch aangepast voor de verschillende schermresoluties.

Wil je zeker zijn dat de kwaliteit van de afbeelding goed is voor elk scherm
dan moet je 3 extra icons maken:

  • 57×57 pixels (iPod Touch/iPhone)
  • 72×72 pixels (iPad)
  • 114×114 pixels (Iphone4)

In dit geval moet je volgende code in de header van de pagina’s van je website plaatsen (minstens op de homepagina) :

<link rel="apple-touch-icon" media="screen and (resolution: 163dpi)" href="/location/apple-touch-icon-57px.png" />

<link rel="apple-touch-icon" media="screen and (resolution: 132dpi)" href="/location/apple-touch-icon-72px.png" />

<link rel="apple-touch-icon" media="screen and (resolution: 326dpi)" href="/location/apple-touch-icon-114px.png" />

Als je niet wil dat IOS jouw icons automatisch gaat aanpassen (afrondingen, glanseffect) gebruik dan rel="apple-touch-icon-precomposed"

Op het internet zijn en aantal templates te vinden voor het maken van apple-touch-icons. Bijvoorbeeld:

Voor Gimp:  http://www.iquatsch.de/achsogehtdas/?p=4
Voor Photoshop: http://blog.cocoia.com/2010/iphone-4-icon-psd-file/

Android

Android gebruikt in veel gevallen het favicon.
Dit icon wordt ook door browsers gebruikt en verschijnt in de browser voor de url in de adresbalk en ook in de lijst met favorieten na toevoegen van de pagina. (vandaar de naam).

Een favicon is 16×16 pixels groot. Het formaat is .ico.

Op het internet is er heel wat freeware te vinden waarmee afbeeldingen naar .ico kunnen worden geconverteerd: IrfanView  is een handig pakket maar er zijn ook online tools zoals IconEdit32 of Favicon generator.

De file wordt meestal favicon.ico genoemd. Dat is geen verplichting maar voorkomt problemen in oudere browsers.

Plaats steeds de .ico in de root. Ondanks de plaatsbepaling in de meta-tags van de webpagina’s  vinden sommige browsers hem anders niet terug. (Internet Explorer doet hier soms moeilijk over.)

In de header van je webpagina’s plaats je volgende code:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Dit bericht werd geplaatst in HowTo, Internet, Mobile en getagged met , , , , , , , . Maak dit favoriet permalink.

Een reactie op Websites op startscherm van tablets of smartphones (2).

  1. Pingback: Websites op startscherm van tablets of smartphones (1). | In de kantlijn

Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit / Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit / Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit / Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit / Bijwerken )

Verbinden met %s