WPLounge
Home » Tutorials » iOS-icoon toevoegen aan je website

iOS-icoon toevoegen aan je website

In iOS kunnen gebruikers webpagina’s aan hun begin-scherm toevoegen (op de iPhone, iPad en iPod Touch). Hier komt dan een icoontje te staan dat er hetzelfde uitziet als die van “gewone” apps op hun telefoon of tablet. Wanneer je hier op klikt, opent je telefoon of tablet de website in Safari, de standaard webbrowser van iOS.

Affiliate disclaimer:
In onze artikelen en op onze pagina's staan affiliate links. Wanneer je via één van deze links een aankoop doet, ontvangen wij een (meestal kleine) commissie van de verkoper. Wij geven altijd onze eerlijke mening over producten. Klik hier voor meer informatie.

Hoe ziet een iOS-icoon er uit?

ios-icoonIn de afbeelding aan de rechterkant zie je het iOS-icoon van www.wplounge.nl op mijn iPhone-beginscherm staan (rechts naast de NS Reisplanner).

Veel andere websites hebben dit ook, en het is erg makkelijk om dit in te stellen. Veel Premium WordPress themes hebben standaard een theme options-paneel waarin je dit kunt instellen.

TIP VAN WPLOUNGE
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium WordPress themes (waaronder Divi!) voor maar 89 dollar!
Bekijk de themes »»
Lees meer over Divi.

Niet alle WordPress-themes hebben de optie om een iOS-icoon toe te voegen. In dat geval moet je het dus zelf doen. Dit kan met een plugin, of je kunt het zelf in het header.php-bestand van je (child) theme plaatsen.

Welke iconen gaan we toevoegen?

Om te zorgen dat je iOS-icoon op alle Apple-apparaten wordt getoond, dienen we meerdere versies te uploaden en in de header te plaatsen. Dit heeft te maken met het feit dat we voor retina-schermen een extra grote afbeelding moeten uploaden, omdat hij anders niet scherp wordt weergegeven op bijvoorbeeld een iPhone 5.

De formaten

Allereerst gaan we drie afbeeldingen aanmaken. Open je logo of andere beeldmerk dat je als iOS-icon wilt gebruiken in Photoshop en sla hem in drie formaten op:

  • 57 x 57 pixels (voor iPhones zonder retina-scherm)
  • 72 x 72 pixels (voor iPads zonder retina-scherm)
  • 114 x 114 pixels (voor iPhones en iPads met retina scherm)
Let op! Zorg dat je deze bestanden als PNG-afbeelding opslaat voor het beste resultaat.

De code

Ik leg verder in dit artikel uit hoe je de icons met behulp van een plugin aan je WordPress-website toevoegt. Doe je het liever zonder plugin? Dan kun je de onderstaande codes gebruiken in de <head> van je website. Deze vind je in het header.php-bestand van je (child) theme. Heb je geen WordPress-website? Ook dan kun je de code gebruiken.

In de code hierboven hoef je alleen nog de locatie van de afbeeldingen aan te passen.

Plugin gebruiken

Je kunt natuurlijk ook een WordPress-plugin gebruiken om deze icoontjes aan je website toe te voegen. Bijvoorbeeld de Add to home screen WP-plugin. Het nadeel hiervan is, is dat deze alleen een touch-icon toevoegt, en dus geen speciale iconen toevoegt voor retina-displays of iPads.

Wouter Postma

Oprichter WPLounge. Blogt ook in het Engels op WPLounge.org.

Gratis op de hoogte blijven?

Meld je gratis aan voor onze nieuwsbrief om op de hoogte
te blijven over ontwikkelingen in WordPress!

2 reacties

Advertenties

Blijf op de hoogte!

Scroll Up
Skip to content