Heb je een WordPress blog over eten, reizen of misschien met opvoedingstips? Heb je dan wel eens nagedacht dat er misschien frequente bezoekers zijn die jouw blog op de homescreen van hun Iphone of willen plaatsen?

Favicon homescreen aanpassen

Als dit gebeurt dan wil je misschien deze bezoekers wel een aangepast icoon geven. Waarom zou je dit willen doen? Als je favicon een PNG bestand is zonder achtergrond dan zullen telefoons hier voor de leesbaarheid een zwarte achtergrond aan meegeven. En als je favicon toevallig ook zwart is dan is het hele icoon dus onleesbaar. Heb je een hele mooie WordPress website laten maken en gebeurd er dit… Zonde, een gemiste kans die ook nog eens eenvoudig te voorkomen is.

Favicon formaten mobiele telefoons

De afmetingen die je moet maken zijn er in totaal 4. Het gaat namelijk om een PNG afbeelding van 144×144 pixels, 114×114 pixels, 72×72 pixels en 57×57 pixels. De favicons moeten dus vierkant zijn.

Custom icoon voor homescreen

Als je de iconen gemaakt hebt kun je deze direct uploaden via de file editor van je hostingpartij of via FTP. Ze moeten direct in de hoofdmap van de server komen, dus in Public_html of www bij sommige providers.

Forceer laden van custom iconen

Hoe forceer je een telefoon om een custom icoon te laden wat jij aanlevert? Je moet vier regels code toevoegen in de header van je website. Dit kan op verschillende manieren ingeregeld worden. De regels die nodig zijn:

<link rel=”apple-touch-icon-precomposed” sizes=”57×57″ href=”apple-icon-57×57-precomposed.png” />
<link rel=”apple-touch-icon-precomposed” sizes=”72×72″ href=”apple-icon-72×72-precomposed.png” />
<link rel=”apple-touch-icon-precomposed” sizes=”114×114″ href=”apple-icon-114×114-precomposed.png” />
<link rel=”apple-touch-icon-precomposed” sizes=”144×144″ href=”apple-icon-144×144-precomposed.png” />
Let op dat je dus ook de bestandsnaam exact maakt zoals hierboven beschreven anders zal het icoon niet werken.
Als je wilt weten hoe je een website op het homescreen toevoegt dan lees je dat in dit artikel.

Mis geen WordPress tips meer.

Al 500+ webdesigners en marketeers ontvangen deze nieuwsbrief.

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.