Line25

How To Create an iOS App Icon for Your Website

Read the full post

Did you know you can give your website its very own app icon for iPhones and iPads? It only takes a few seconds and it makes your site look really smart when it’s saved on a user’s home screen, or when viewed in popular apps such as Reeder.

Why create an app icon?

Specifying an app icon is one of those little finishing touches that isn’t really noticeable but makes all the difference if you take it away. Without an app icon if you bookmark a site on your iPhone or iPad you’re left with an ugly screenshot of the page crammed into the little rounded square, but with one line of code you can choose your own icon design, such as a logo. It’s much like a favicon, but on a larger scale.

Having someone bookmark your site onto their device home screen is probably a rare occurrence, but as I discovered today there’s another major benefit of creating an app icon. Roberto Alanís tweeted me recently asking how I achieved such a nice icon in Reeder app. My first response was “I don’t know!”, but then I realised it was my apple touch icon that was being used.

How to create an Apple touch icon

The specified dimensions of a touch icon directly from Apple is 114x114px, this will compensate for Retina displays and produce a nice crisp home screen icon. However, as you can see from the Reeder screenshot, other sites using 114px touch icons don’t fill all the available space. Reeder is one of the most popular RSS apps, plus the touch icon may be used elsewhere too, so it’s worth creating your icon at much larger dimensions.

I chose the dimensions of 512x512px, which is probably a little overkill, but apparently 241x241px would suffice.

Next you need to decide whether you want Apple to add their glossy highlight effects to your icon. If you do, name it apple-touch-icon.png, if you don’t, name it apple-touch-icon-precomposed.png.

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png" />

You don’t actually need to write any code to get your touch icon working, just pop it in the root directory of your website and it will automatically be used by Apple devices. It might be worth linking it in your <head> though just as a reminder that it’s there. If you ever redesign you might end up forgetting to update it. Once again, make your choice of glossy or precomposed.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://robertoalanis.com Roberto Alanís

    Thanks for this post Chris, I also thought the same as you “if the other sites have the touch icon, why is this different?”

    And this was a thing I already knew (touch icons) but I didn’t know — and I’m still not sure how Reeder app handles it.

    But reading this post helps a lot to know the best way to achieve such a nice icon :D

  • http://skyblueoceanmedia.com sharjah web

    Perfect.. and just in time also I needed to make some icons so comes in handy.

    Does anyone know where I can get the social media pack with similar styles?

    • http://www.neobytesolutions.com/ Dan C

      google it :)

  • http://iamkreative.co.uk Kevin Lofthouse

    I have always done my icons to a max of 144px due to the iPad retina display.

    This is a great little resource for iOS devices http://ivomynttinen.com/blog/the-ios-design-cheat-sheet-volume-2/

  • http://www.pixelpointwebdesign.com Moncton Web Design

    Great post! just what I was looking for! :)

    Thanks,
    Bernard

  • http://thelogodesigner.in thelogodesigner

    Thanks for sharing. Now We can create our own. :)

  • http://www.spiderinfomedia.com Spider info media

    you have given us a good information regarding the apps even we have explored these kind of apps from our web designing company in Singapore,. All the best keep going!

  • http://www.adras.com.au Antonio

    Until I came across your post, I never gave the idea of adding and app icon for iphones and ipads a second thought. Thanks for the info, it’s so simple to create and is sure to make a point of difference with clients.

  • http://britdelillo.com Brit

    Is there a way to do this for Android and Windows?