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 telefoon 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 voor 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.

Hoe laad je een custom icoon in voor het 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 het laden van de custom iconen op een mobiele telefoon

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.

Feedback

Heb je na het lezen van dit artikel nog vragen of zijn er onduidelijkheden? Werkt de code niet op jouw website? Laat het ons weten, dan kunnen wij je misschien verder helpen.

Feedback kennisbankartikel

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

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.

Mis nooit meer website tips.

Al 500+ webdesigners en marketeers ontvangen onze nieuwsbrief.

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