iPod - Written by Tony on Thursday, July 24, 2008 7:19 - 5 Comments

How To Create Your Website Icon For iPhone & iPod Touch

Got a website or blog that (you think or can prove) gets lots of traffic from the iPhone or iPod Touch? Or do you just want to place a kick-ass, custom website icon on your own iPhone/iPod Touch? This tutorial is for you my friend and fellow fanboy!

Note: Apple named this icon thing as the “Webpage Icon.” You may hear it called “Apple Touch Icon” too – you’ll see why in a minute. You’ll need some kind of image editing software like PhotoShop, Fireworks or Illustrator to make this icon.

Here’s the plan:

Create the image to use as the icon for the iPhone & iPod Touch
Save icon on the home screen of your iPhone & iPod Touch
We’ll quickly see how to add the “Apple Touch Icon” to your iPhone & iPod Touch for any website (if that website is cool enough to have one!) Ready to rock?…

Create Your Website Icon Image

Create the image you’d like to use as the icon. The image must be a perfect square or it will not display properly!

1. Set the image size to 100 pixels by 100 pixels. That way it’s big enough to work with and it will show up razor sharp on the iPhone or iPod.

2. Set the resolution (also known as “DPI”) to 72.

3. Set the color to RGB

*NOTE: Don’t worry about trying to make your icon “shiny” like the other icons on the iPhone & iPod Touch – It’s done automatically… you’ll see in the last step.

Save The Image As PNG!

Apple recommends saving your image as a PNG file – so do it!

Note: I’ve never tried any other file type. I might work, but PNG is great because it’s small and it looks sharper than JPG or GIF.

Rename The PNG Image

You MUST rename your image to: apple-touch-icon.png

1. You must incude the hyphens!

2. Make it all lowercase letters – just in case!

The iPhone & iPod Touch will automatically find this file on your webserver – only if it’s named correctly AND in the correct location…

Upload Your Apple Touch Icon

For this step you need direct access to the files on your website. You can use a free FTP program like CyberDuck to upload the file.

Your website hosting company might have a way for you to upload files using Safari or Firefox.

If you’re uploading the file with FTP or Safari / Firefox, you still need to get the apple-touch-icon.png in the right place. The correct location is often called the “root directory.” That’s a fancy name for the highest-level folder of your site.

Now that you’ve got the file in the root directory, skip to the next step…

If you don’t know what I’m talking about, keep reading…

To make sure you’re in the right spot – the “root” – just look for your home page file. Your home page should be named one of the following:

index.htm
index.html
index.php (shown above)
default.asp
default.aspx

If you see any of the files above, you MIGHT be in the right spot. Typically, it’s OK to upload your apple-touch-icon.png – even if it’s in the wrong spot, it’s not gonna hurt anything on your website. Just don’t delete anything!

If you’re still lost, contact your webhosting company or find a friend who can help you out.

Test It On Your iPhone or iPod Touch!

1. Go to your website in Safari on your iPhone or iPod Touch
2. Tap the Plus Icon at the bottom of Safari

Add The Icon To Home Screen

Click “Add to Home Screen”

Look For The Icon

1. Make sure your awesome Apple touch icon is showing in this screen

2. Give it a name - This name will appear under the icon on the iPhone & iPod Touch Home Screen.

3. Click “Add”

Fall In Love With Your Icon

Your icon is now showing up on the home screen with the name we gave it ( AppleSlut! ). And it’s got the matching shine like all of the others. Just tap it for instant access to your website!

Hope you’ve enjoyed this tutorial!

5 Comments

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Mitch A.
Jul 25, 2008 6:27

Nice tutorial. Thanks.

Tony
Jul 27, 2008 10:01

Hi Mitch. Thanks for visiting.

cbown75
Aug 4, 2008 20:27

Great post. Would love it if you could add a meta tag to tell the phone or touch where the image is like a favicon. I like to keep my root directory free of anything but HTML pages. That is just me though.

Tony
Aug 5, 2008 11:02

Hey cbown75. Yes, if there was some sort of hack to redirect the iPhone / Touch to find it in another location – that would help keep things organized. There might be something like that already available, but I haven’t found anything.

Como crear un icono de tu sitio web para iPhone e iPod Touch | Kabytes
Sep 7, 2009 6:40

[...] Y eso es todo, tremendamente simple y queda muy bien. Esto lo busque durante bastante tiempo en las listas de desarrolladores pero recién hace unos días aprendí a hacerlo gracias a Appleslut [...]