Adding Apple Ready Icons To Your Website

When developing a website its sometimes the small things that get over looked. Small things like fav icons, and now with the ability to add apple specific fav icons why not update your website to support such features.

In Blog, Mobile Development

What Is A Fav Icon

Fav icons have been around for years, from since i can remember. Those little icons you see in your favorites instead of the generic HTML icon.

Apple Web Icons For Your Website

The code for a simple fav icon looks like this.

[sourcecode language=”html”]
<link rel="shortcut icon" href="images/favicon.ico">
[/sourcecode]

Although you have a fav icon set in your HTML document if your using an iPad, iPod or iPhone the fav icon doesn’t show up when saving a particular website to your home screen.

Add Apple Compatibility To Your Website

By simply adding the following code along with your fav icon, your website will be iPad, iPod, iPhone and Retina compatible.

[sourcecode language=”html”]
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72×72" href="images/apple-touch-icon-72×72.png">
<link rel="apple-touch-icon" sizes="114×114" href="images/apple-touch-icon-114×114.png">
[/sourcecode]

Give it a try, hit Photoshop Plus on your iPad, iPod or iPhone then save the website to your homescreen.

Apple Web Icons For Your Website

Removing The Gloss Effect With Some Simple Code

The example used above simply dispays the icon as you normally would on an apple device. If you wanted you could remove the default gloss effect which you see on the majority of app icons by simply by adding “Precomosed” to the code.

[sourcecode language=”html”]
<link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" sizes="72×72" href="images/apple-touch-icon-72×72.png">
<link rel="apple-touch-icon-precomposed" sizes="114×114" href="images/apple-touch-icon-114×114.png">
[/sourcecode]

Apple Web Icons For Your Website

Conclusion

Thanks for taking part in this tutorial, hope you found it useful, I’d love to hear your comments. Feel free to post them up on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.

  1. Asim
    June 10, 2012 at 7:12 PM

    Nice, but whats the purpose to add same image in two different sizes (72×72 and 114×114) ? And what should be the actual size of the image?

  2. Wilma Hamlin
    June 10, 2012 at 7:25 PM

    The sizes are the different variations in apple devices.

    first icon = iphone (57 x 57)
    72 x 72 = ipad
    114 x 114 = high-resolution iPhone and iPod touch

    you could also add icons for high resolution ipad which is 144 x 144

    The sizes are actual sizes in pixels.

  3. December 5, 2012 at 3:06 PM

    Hi great article, please see my icon generator i have just developed. http://www.chillwebdesigns.co.uk/tools/favicon

    I think it may be useful for this article

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 3 Comments On Adding Apple Ready Icons To Your Website, why not add yours!

Leave a Reply

Your email address will not be published. Required fields are marked *

Auto Scroll To The Top
css.php