How To Create A Website Icon For iPad, iPhone & iPod Touch
FYI: This tutorial has been updated to support the retina display iPad & iPhone. Word.
Got a website or blog that (you think or can prove) gets lots of traffic from the iPad, iPhone or iPod Touch? Or do you just want to place a kick-ass, custom website icon on your own iOS device? This tutorial is for you my friend and fellow fanboy! We’ll create icon for this kick-ass Apple Blog.
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.
Creating the Webpage Icon
You’ll need some kind of image editing software like PhotoShop, Illustrator to make this icon. Or, if you’re a real Apple fanboy (like me), you’ll use the cheap and full-featured Pixelmator (download from the Mac App Store).
Here’s the plan:
- Create the image to use as the icon for the iPad, iPhone & iPod Touch
- Find out where to upload the image on your website or blog
- How to save the icon on the home screen of any iOS device
Create Your Website Icon Image
Use any image editing or drawing software to create the icon. Remember, the icon must be a perfect square or it will not display properly!
- Set the image size to 300 pixels by 300 pixels. That way it’s big enough to work with and it will show up razor sharp on the retina display iPad and iPhone.
- Set the resolution (also known as “DPI” or “pixels/inch”) to 326 – this is the resolution of the retina display. If you use a lower resolution, the icon may look fuzzy on a retina display iOS device… Just sayin’
- Set the color to RGB
*NOTE: Don’t worry about trying to make your icon “shiny” like the other icons on iOS devices – It’s done automatically when it’s saved to the iPad, iPhone or iPod… 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 a small file size and it looks sharper than JPG or GIF.
Rename The PNG Image
- You MUST rename your image to: apple-touch-icon.png
- You must incude the hyphens!
- Make it all lowercase letters – just in case!
The iPad, 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, Dreamweaver or Coda to upload the file. (My favorite is Coda – get it from the Mac App Store)
You must upload the apple-touch-icon.png to the correct 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.php (shown above)
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 web designer / developer friend who can help you out.
Test It On Your iPad and iPhone!
- Go to your website in Safari on your iPhone or iPod Touch
- Tap the Share Icon at the bottom of Safari
Note: The Share Icon is at the top of Safari on the iPad, and you’ll see the drop down with the “Add to Home Screen” button – It looks like this:
Add The Icon To Home Screen
Click “Add to Home Screen” on your iPad or iPhone
Give it a Name and Save
- Make sure your awesome Apple touch icon is showing in this screen (it might take a couple seconds to load).
- Give it a name - This name will appear under the icon on the iPhone & iPod Touch Home Screen.
- Tap “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. Plus, it’s razor sharp on any retina display iOS device.
Just tap it for instant access to your website!