Here’s a quick way to further enhance the branding of your website. If you don’t have an iPhone go get one. Then try bookmarking your website; (go to a website in your iPhone Safari browser, hit the + symbol, and hit “Add Bookmark“). What this does is take a small screenshot of the webpage and add it to your iPhone, right next to the other icons you have.

Well forget that, now we can make custom icons, so when somebody bookmarks your website, the icon is one that you actually created! As a designer I might be a little bit TOO excited about this, but hey, this is the stuff I live for. You can see in the above image the two icons I’ve created for my websites, WebDesignAndSuch and BeantownDesign. So now the icons match the favicons of my websites, and I can just touch them to launch my websites on my iPhone.

Keep reading to see how to create your own iPhone icons.

So the process is actually ridiculously easy. First, create your icon at the size of 57×57 pixels. Don’t create any gloss or rounded edges, the iPhone actually creates both of those for you. You can see in the image below what one of my icons looked like before it was added to the iPhone.

Next, save your icon as a .png in your website’s images folder. Then you need to link your website to the icon so the iPhone can do it’s magic when someone hits “Add Bookmark” on their phone.

Glossy Icon

This first code is if you want the gloss to appear over your icon. Put this in the head of your website, and of course make sure you set the path to your icon.

Non-Glossy Icon

If you don’t want the gloss for whatever reason you can use this code.

There you go, have fun! If you want to test this out, pop open WebDesignAndSuch on your iPhone in Safari, and hit “Add Bookmark“!