How to Add App Icons to a Website

How to add an app icon to your website

Having app icons for your website is a good thing to include these days with the amount of iPhone’s and iPad’s in the world. If you’re wondering what having an app icon for your website means then let me explain. Apple iPhone’s, iPad’s, and iPod touch devices give users the ability to add websites to their home screen (bookmarking) as if it were an app (see image below).

Enfuzed App Icon

This is great if your website does not have an app in the app store as it can be made to look like an app and acts as a quick access point for users to your website. The problem is, if you have not made app icons for your website then it will just take a shitty screen shot of your website and shrink it down to fit the app icon size.

This is not good for a number of reasons; one being, it looks like junk; two being, when a user is sliding through their apps, yours will be easily overlooked. I used Creative Bloq as an example of a site not having app icons since it’s one of the blogs I frequent.

Bookmark without an app icon

Assuming you don’t want that crummy screenshot as your icon if a user bookmarks your website, let’s get to the “how to” on adding an app icon to your website.

Creating an App Icon

The first thing you will need to do is create an app icon that is to be used for your website. We need to take into account the various apple touch resolutions and sizes when making an icon. Here are the icon sizes for the icon (in pixels) you will need to make:

*Note that these need to be in PNG format*

  • iPhone/iPod: 57×57
  • iPhone/iPod with Retina: 114×114
  • iPhone 5/iPod Touch 5th Gen: 114×114
  • iPad: 72×72
  • iPad with Retina: 144×144

You don’t need to worry about rounding the corners, Apple will do this for you, so just make square icons. You also don’t have to worry about adding the “glare” to your icon, as Apple will do this for you as well, but we will get to this later.

Now that you have all of your icons created, you’ll need to add them to your website’s directory naming them as follows so apple will recognize them:

  • iPhone/iPod: touch-icon-iphone.png
  • iPhone/iPod with Retina/iPhone 5: touch-icon-iphone-retina.png
  • iPad: touch-icon-ipad.png
  • iPad with Retina: touch-icon-ipad-retina.png

The Code

We have our app icons made in all device sizes, we’ve named them accordingly so Apple will recognize them, and we’ve added them into our website’s directory. Now we have to add the code to the head of our website. There are two ways to present your app icon to viewers:

  • The regular way – which includes the “glare” over top of the icon
  • The precomposed way – which shows the app icon as is

If you wish to show the icon “as is” (meaning just as you made it) then just add the words -precomposed after “apple-touch-icon” in your code. If you want the famous apple “glare” over your icon, then just leave the rel=”apple-touch-icon”.

Now to the easy part, just copy and paste the following code making sure the file paths are correct. We have chosen to leave our app icon “as is” which is a flat look, so we added “-precomposed” to the end of our rel:

<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="touch-icon-ipad-retina.png" />

That’s it! Now you can navigate to your website on your Apple touch device, click the add bookmark button and see your new app icon on your home screen. Please make sure all of your files are named properly, your images are in the right format, and your file paths are correct.

Test It

Here is how you can add a bookmark to see if it worked. Navigate to your website and click the middle button (pictured below) to bring up a menu.

Apple Safari Bookmark Icon

In the middle of the menu you will see your icon and under it it says “Add to Home Screen”. Click this.

Add to Homecreen Bookmark button

Next it gives you the option to name your bookmark, this will be the name that appears under your icon on your home screen.

Adding name to bookmark icon

Useful Resources:

Safari Web Content Guide – Configuring Web Apps

iOS Human Interface Guidelines - Custom Icon and Image Creation Guidelines

About the Author

Enfuzed is a web and graphic design blog. Articles posted by Enfuzed are written by Zac Knoblauch. Be sure to follow our social media accounts and subscribe to our RSS feed.

@EnfuzedWeb Google+

Leave a Reply