Sinds een aantal jaren groeit het gebruik van mobiele apparaten waarop internet aanwezig is. Hierdoor worden websites steeds meer bezocht via een telefoon of tablet. Als webontwikkelaar kan ik hier op in spelen door de website te voorzien van een applicatie icoon. In deze blogpost laat ik zien hou dit in zijn werk gaat.
Om te beginnen hebben we hebben we het logo van de website nodig. Deze moet in de onderstaande afmetingen worden opgeslagen als PNG.
- 57px x 57px – 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 tussen de keuze van Glossy iconen of platte iconen. Wanneer je wilt dat IOS het de glosse overlay toepast moet de de HTML hierboven voorzien van rel=”apple-touch-icon” en voor platte iconen rel=”apple-touch-icon-precomposed”.
Tot slot wil je je website een goede naam meegeven. Hiervoor kun je gebruik maken van de <title> tag van de website. Maar in de meeste gevallen is dit niet toereikend, hiervoor 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 toevoeging van de bovenstaande HTML is je website geschikt gemaakt voor mobiele apparaten. Gebruikers hebben nu de mogelijkheid om je website toe te voegen aan hun start scherm.