Our little print company has yet to develop an iPhone app for numerous reasons, but we still provide a nice “app” looking icon to people who wish to save our mobile website on their iPhone/iPod/iPad home screen. They can do this by selecting “Add to Homescreen.”

Basically, when someone saves a website onto their home screen, the icon defaults to something like this:

Notice, the icon looks terrible and simply snapshots the home page of our website. It doesn’t appear “app-like” so I think people are less inclined to keep it saved onto their iPhone. I want to imitate the app environment so our website link fits in better.

We created this simple icon that fits well with other apps, and we look a bit more savvy in the process.

How to do it

The good news is this: Apple does most of the beautification for us. The rounded edges and gloss appearance is all done by iOS to ensure all apps have a consistent feel to them so let’s get started.

First, we will need a graphic software like Adobe Photoshop to make a 57px X 57px image.

Next, we’ll choose a background color that fits well with our company branding. It can be a gradient or solid color. Whatever floats your boat.

Next, we put a logo or some letters in the middle. I like to keep it very simple, so I used “PK” representing PrintKEG.

Once my letters are situated I added a little drop shadow just because this seems to easy. Next, we save the image as a PNG file then upload it to our server somewhere. Some people put it in the root directory, but I am using my images folder for now.

The code

We must add a small meta tag under the title tag in our HTML to tell iOS where the icon image is.

We’re done. A simple way to provide Apple users a sweet little icon that matches the other apps on the device. Here are some tips in creating a nice iphone app design.

Good luck!