How do I make my own iPhone icon for my website?

October 19, 2009

For starters, in case you haven’t been doing it already, you can bookmark a website on your iPhone’s homescreen.  It will appear the same as an app, but will serve as a link you to the site in Safari.

www-new.insivia.com
www-new.insivia.com
Insivia icon on an iPhone home screen.
Insivia icon on an iPhone home screen.

So, how do you do this for your own website?

1. Create an 45px x 45px image of your logo or name in Photoshop or another design program and save it as a .png.

Insivia icon png
Insivia icon as a png

2. Add this code into your <head>, same as you would for your favicon.

<link rel=”apple-touch-icon” href=”http://www.yourdomain.com/iphone-icon.png” />

You do not have to worry about rounding the corners or creating the gloss effect.  The iPhone does this for you.  The user will be in control of what text appears below on their screen, but this icon will now appear on their home screen as a nice dynamic image.

icon as it appears on iPhone
icon as it appears on iPhone

And there you go. This gives you a nice clear presence on your website viewers’ iPhones.



About Insivia

We're a SaaS Growth Agency scaling SaaS & technology companies through brand positioning, integrated marketing, web design, sales and retention.