Bookmark and Homescreen Icon for your WordPress Site

WordPress Tip

Ofwel bladwijzer en beginscherm icoon voor je WordPress website. En heb je een beetje verstand van html, dan lukt je dit vast en zeker ook wel voor een niet-WordPress-site.

Ik wilde dit al geruime tijd maar op een of andere manier lukte het maar steeds niet om het voor zowel de bladwijzer als beginscherm voor elkaar te krijgen.
Maar het is na wat gezoek gelukt, en eigenlijk is het ontzettend simpel!

stap 1: ontwerp een afbeelding passende bij je website / Blog. Afmetingen 150×150 pixels. Sla dit op als “apple-touch-icon.png“. Hieronder mijn afbeelding.
apple-touch-icon

stap 2: Ga met een ftp programma naar de “root” van je domein. Dit is de bovenste map waar je ook je wordpress installatie files hebt geplaatst. Kopieer je icoon naar deze “root”folder.

Stap 3: We gaan nu verder in WordPress. In je WordPress omgeving (dashboard) ga je naar “appearance”, daarna “editor” en open aan de meest rechtse kant van je scherm het bestand header.php
icon_tutorial
Ergens tussen <head> en </head> tags plaats je de volgende code:
<link rel="apple-touch-icon" href="http://www.jouw-naam.nl/apple-touch-icon.png" />
Ik heb zelf gekozen om dit te doen net na de <head> tag, meteen bovenaan (zie roze balk). Let erop dat de ” tekens hetzelfde uitzien als de rest van je code. Ik merk wel eens dat met knippen en plakken van codes deze tekentjes net even ‘anders’ uitzien. Indien nodig, pas dit aan.

Stap 4: druk onderaan de pagina op “update file”

Klaar. Je iPhone en/of iPad zullen zelf zorgen voor de afgeronde hoekjes en andere eventuele verfraaiingen.

Testen: Ga met een iphone en of ipad naar je website. Sla je website op als favoriet/bookmark of maak een beginscherm icoon.
icon_tutorial2

Ook leuk:

8 reacties

  1. Oooh, dat ga ik binnenkort ook doen!!! Ben niet zo’n held met Paintshop, kijken of ik er iets van kan maken…
    Waarom staat jouw dashboard op Engels? Ik heb dat gewoon allemaal in het Nederlands…

    1. Op engels, tja, geen idee eigenlijk. Te lui om het om te zetten. Aan de andere kant, veel uitleg, tips en artikelen zijn ook in het engels, dus dan vind je het allemaal net even sneller terug.

  2. Oh dat wil ik ooooook. Maar eerst moet ik zien hoe ik mijn ftp in orde krijg want dat werkt voor geen meter meer 🙁 Tijd .. tijd te kort

    Leuke tip joh 🙂
    gr ELise

  3. Oh god, dit soort dingen is totaal niet aan mij besteed! Zou best een eigen site willen maar voordat ik dit allemaal snap, zijn we heel wat getier verder… oeps…

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.