Adding a Web app icon for iPhone visitors on your website

By default, when you add a bookmark to a page to your homescreen (by tapping bookmark->add to homescreen), your iPhone will create a button for the webapp by itself.
This is miniature version of the page you were on when you created the bookmark.

There is a way however, to make the iPhone show the icon on the homescreen that YOU, being the webdeveloper, want:

– Use an imaging program (such as The Gimp)to create an image of 57×57 pixels.

– Save the image as icon.png, and upload this image to the root folder of your website.

– Add the code below to the Head section of your webpage:

<link rel=”apple-touch-icon” href=”https://beheydt.be/icon.png”>

And that’s how easy you can create a web app icon for iPhone visitors!

Share via
Copy link