Make Your Website iPhone Home Screen Ready In A Few Easy Steps

My iCon

My iCon

I have wondered how all these sites are able to make their little icons show up on the iPhone instead of a basic screen shot of the site. Well, turns out after a little research it is an extremely easy process!

I hope this helps you all out, and I expect to see you all making your icons so we don’t have those ugly screen shots on our iPhones!

Here it is in 4 easy steps!

Step 1: Open the image you want to use in photoshop or image editor
Step 2: Crop the image to 45×45 pixels.
Step 3: Save the image as a png file with the name: apple-touch-icon.png
Step 4: Save this png in your root directory of your site and you are done!

This is the finished product on my home screen!

The Home Screen With My qPlog Icon

The Home Screen With My qPlog Icon

Advertisements

4 comments on “Make Your Website iPhone Home Screen Ready In A Few Easy Steps

  1. Got it! I also had to add the following into the header:

    whateverthetitleis!

    You can use jpgs as well as pngs, and if you make it 158×158 the iPhone or iPod Touch shrinks it down, making the image sharper.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s