How do I make my own iPhone icon for my website? ‹ Insivia Cleveland + Pittsburgh

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

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.insivia.com

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 as a png

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

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.