How to Create Branded Apple iPhone Website Icons

I’m somewhat of a branding fanatic. If you haven’t noticed.

Effective branding builds trust and credibility. So I never want to miss an opportunity to reinforce brand logos, colors schemes, etc.

Just as we can use favicons as one detail to reinforce our branding online. We can also create custom, branded website shortcut icons for the Apple iPhone and iPod Touch.

iphone-ipod-touch-website-shortcut-icons

Here’s how to create your own:

Step 1: Create a 45px X 45px image. Don’t worry about adding round corners or that glossy look. Apple does this automatically when displaying your icon.

living-on-dividends-apple-touch-icon

Step 2: Save as “apple-touch-icon.png” in the root directory of your website. Your icon must be a PNG with this same file name for Apple to find it.

OR

If you want to save your icon to a folder other than your root directory or use a file name other than what Apple expects, just add this somewhere within the header section of your homepage’s index.html:

<link rel=“apple-touch-icon” href=“/myimagelocation/myiconname.png”></link>

This way Apple knows the name of your icon and where to find it. It must still be a PNG though. Sorry.

Step 3: Bask in glory. You’re done!

Apple calls these icons ‘Apple Touch Icons.’ But they are often referred to as ‘Apple iPhone website shortcut icons’ or ‘Apple iPod Touch website shortcut icons’.

One Response to “How to Create Branded Apple iPhone Website Icons”

  1. MacLifer says:

    Sweeeeeet. Thx!

Leave a Reply