iPhone bookmark icon toevoegen aan je (Magento) site

iPhone bookmark icon toevoegen aan je (Magento) site

E-commerce verplaatst langzaam maar zeker naar mobiele apparaten. Ik denk niet dat ik een bron hoef aan te halen omdat iedereen dit wel zal erkennen. Dit merk ik vooral ook bij mezelf ook omdat ik steeds vaker webshops opzoek op een mobiel device. Met de opkomst van tablets zal dit nog veel meer worden. Op iOS devices zoals op de iPhone en iPad kan je een bookmark maken van een website op je homescreen. Standaard word hiervoor een leeg wit icoontje geplaatst. Om extra op te vallen kan je dit icoontje zelf wijzigen. Dit werkt overigens voor elke website. Hoe je dat doet staat hieronder beschreven.

Stap 1: Maak en PNG bestand van exact 57×57 pixels en noem deze “apple-touch-icon.png”.

Stap 2: Upload het naar de root of een andere directory op de server.

Stap 3: Voeg het volgende element toe in de tag van de website.

[html]
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
[/html]

Om vervolgens te testen hoe dit er uit ziet ga je naar safari en open je de website. Kies vervolgens voor meer opties, en kies voor “Zet in beginscherm”. Er zal nu een bookmark gemaakt worden in de homescreen van je device met het logo die je zelf hebt gemaakt. Je krijgt gratis een Apple glans over je logo. Dat ziet er dan bijvoorbeeld zo uit.

9 gedachten over “iPhone bookmark icon toevoegen aan je (Magento) site

  1. hoi, ik heb het logo toegevoegd en ziet er super uit!
    Heb alleen een vraagje; wanneer je hem toevoegt staat er voor een deel bij: “Bel nu:0162 ..” het nummer is dan niet copleet. Hoe kan ik ervoor zorgen dat het nummer compleet is?

    Mvg femke

  2. Goed om te horen dat het is gelukt Femke. De naam wat onder het icoon komt te staat is de naam van de bookmark. Dus wanneer je het op je beginscherm zet kan je voordat je akkoord geeft de tekst veranderen.

  3. Dag Menno,

    Dat moet in het bestand head.phtml. Deze staat op de volgende locatie: /app/design/frontend/template/page/html/head.phtml

    Succes!

    Groet,
    Akif

Een reactie plaatsen