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!
Step 1: Create the file
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.
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.