How to create an iPhone or iPad icon for your website

How to create an iPhone or iPad icon for your website


Did you know that you can specify an icon for your website that appears on a user’s smart phone or tablet home screen when they bookmark your site?

No? Well you can. I did it yesterday!








Here’s how:

Step 1: Create the file

My icon

You can use any graphics package to create an icon and don’t worry about adding the classic Apple glossy finish or the round corners. The iOS (mobile operating system) will automatically add these for you.

You can create specific sizes for each format but I sized mine at 152 x 152 pixels and then resized it with the html (see step 4).

Step 2: Name the file

The iOS will search your website’s root folder to look for the icon, that is unless you have specified the icon in the HTML code (which is my preferred method).

A good name for the file would be apple-icon.png or similar. I called mine just icon.png.

Note: if you don’t want the iOS to apply its default styles, append the rel name with precomposed, so rel=apple-icon-precomposed


Step 3: Upload the file

Upload the file to the root of your website so the iOS will recognise it or ideally specify the location of the icon in your HTML source code and upload it to your standard image folder.

Step 4: Specifying the file in the HTML

Now you need to add a little bit of code to your website. This should be added to your header.php file.
(You’ll find this under the tab > Appearance > Editor if you’re using WordPress.)

Here’s the code I used:

<link href=”/wp-content/themes/bigfoot/images/icon.png” rel=”apple-touch-icon” />

<link href=”/wp-content/themes/bigfoot/images/icon.png” rel=”apple-touch-icon” sizes=”76×76″ />

<link href=”/wp-content/themes/bigfoot/images/icon.png” rel=”apple-touch-icon” sizes=”120×120″ />

<link href=”/wp-content/themes/bigfoot/images/icon.png” rel=”apple-touch-icon” sizes=”152×152″ />

And that’s it. Simple huh?

While this doesn’t have an impact on SEO it’s a nice way of reinforcing your brand and making yourself look uber professional.

P.S. Thanks to Marco at Technique for help with this article.
P.P.S. Thanks to Steve at Renegade for noticing my missing icon.

Did you like this post?

You might like my book ‘Confessions of a Misfit Entrepreneur | How to succeed despite yourself’ – buy it online here.

Want to have a chat?

If you need a Copywriter, SEO Consultant or Information Architect, then please contact me.

The Recipe for SEO Success
The Clever Copywriting School

How to create an iPhone or iPad icon for your website was last modified: by


  1. Frederique Bros

    Ha! I didn’t know about it, thx Kate for that!

    • Kate Toon

      NO worries lady!