Sinds een aantal jaren groeit het gebruik van mobiele apparaten met internet toegang.Hierdoor worden websites steeds vaker bezocht via een telefoon of tablet.
Als webontwikkelaar kan ik hierop inspelen door de website te voorzien van een applicatie-icoon. In deze blogpost laat ik zien hoe dit in zijn werk gaat. Om te beginnen hebben we het logo van de website nodig. Dit moet in de onderstaande afmetingen worden opgeslagen als PNG.
- 7px - icon.png - (iPhone)
- 72px x 72px - icon-72.png - (iPad)
- 114px x 114px - icon@2x.png - (iPhone Retina)
- 144px x 144px - icon-72@2x.png - (iPad Retina)
Nadat we de afbeeldingen hebben toegevoegd aan de website moeten we de onderstaande HTML code toevoegen aan de <head> van de website.
<link rel="apple-touch-icon-precomposed" href="/images/Icon.png" sizes="57x57">
<link rel="apple-touch-icon-precomposed" href="/images/Icon@2x.png" sizes="114x114">
<link rel="apple-touch-icon-precomposed" href="/images/Icon-72.png" sizes="72x72">
<link rel="apple-touch-icon-precomposed" href="/images/Icon-72@2x.png" sizes="144x144">
Hierbij is het mogelijk om te kiezen tussen twee verschillende weergaven van de applicatie-iconen. Het gaat hierbij om de keuze tussen glossy iconen of platte iconen. Wanneer je wilt dat iOS de glossy overlay toepast, moet je de HTML hierboven voorzien van rel="apple-touch-icon". Voor platte iconen gebruik je rel="apple-touch-icon-precomposed".
Tot slot wil je je website een goede naam meegeven. Hiervoor kun je gebruikmaken van de <title>-tag van de website. In de meeste gevallen is dit echter niet toereikend. Daarom is de volgende meta-tag in het leven geroepen: met behulp van apple-mobile-web-app-title kun je een aparte titel meegeven van maximaal 12 tekens lang.
<meta name="apple-mobile-web-app-title" content="VakantieBlog">>
Na het toevoegen van de bovenstaande HTML is je website geschikt gemaakt voor mobiele apparaten. Gebruikers kunnen je website nu toevoegen aan hun startscherm.