(Updated 5 July 2016)
While I was working on a WordPress site, I came across a branding portion of the admin panel that allowed me to upload icons for my website. Icons for my website? Initially, I wasn’t sure what those were, but then I remembered that if you create a shortcut to a website on your iPhone, the shortcut is saved on your iPhone screen as an icon that looks like a standard app icon. You can then click on that icon and it takes you directly to the website in your web browser, like a shortcut or a bookmark.
As an example, when using an iOS device, and visiting a website using the Safari browser, click on the “share” icon:
Then click “Add to Home Screen” which will add a shortcut icon to your device that, when clicked, will take you directly to this page:
You can see two webpage shortcut icons, one is labeled “b2” and I have created and uploaded the shortcut icons, and the other labeled “Brady Mo…” which is to my personal site before I created and uploaded the shortcut icons: 
* If you don’t specify an icon, a screenshot from your site will be used as the icon.
* Default text is the Site Title and Tagline
This post will walk you through the process of creating that icon and uploading it to your website.
Step 1: Create the icons
There are multiple versions of the icon you’ll need to create. The sizes listed below will cover standard iOS, retina iOS, iPad, and Android devices.
The process is relatively simple, and is just like the process of creating an icon for an app. At the basic level, you need an image saved multiple times with the following dimensions:
- 57×57 px
- 60×60 px
- 72×72 px
- 76×76 px
- 114×114 px
- 120×120 px
- 128×128 px
- 144×144 px
- 152×152 px
- 180×180 px
- 192×192 px
A few things you’ll want to do:
- Save the images with a colored background. (Otherwise, transparency will be filled with black.)
- Be sure that the icon has enough spacing between the edges of the shapes and the edge of the icon.
- Save the icons as PNG files.
Also note:
- These icons will work on most modern iOS, Android, and Blackberry devices. Each operating system will scale the appropriate icon to the correct size so no need to create specifically sized icons for each device.
- The rounded corners, drop shadow, and reflective shine will be added automatically so just save your icons as squares.
Step 2: Upload the icons
Once you have the images created and saved, you’ll want to upload them to your website as follows:
- Upload the files to any directory of your site
- Add the following code to the <head> portion of your HTML
<!-- To support old sizes -->
<link rel="apple-touch-icon" sizes="57x57" href="http://www.example.com/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="http://www.example.com/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="http://www.example.com/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="144x144" href="http://www.example.com/apple-touch-icon-144x144.png">
<!– To support new sizes –>
<link rel=”apple-touch-icon” sizes=”60×60″ href=”http://www.example.com/touch-icon-iphone-60×60.png”>
<link rel=”apple-touch-icon” sizes=”76×76″ href=”http://www.example.com/touch-icon-ipad-76×76.png”>
<link rel=”apple-touch-icon” sizes=”120×120″ href=”http://www.example.com/touch-icon-iphone-retina-120×120.png”>
<link rel=”apple-touch-icon” sizes=”152×152″ href=”http://www.example.com/touch-icon-ipad-retina-152×152.png”>
<link rel=”apple-touch-icon” sizes=”180×180″ href=”http://www.example.com/apple-touch-icon-180×180.png”>
<!– To support Android –>
<link rel=”icon” sizes=”192×192″ href=”http://www.example.com/touch-icon-192×192.png”>
<link rel=”icon” sizes=”128×128″ href=”http://www.example.com/niceicon.png”>
(The code mentions “apple” but it will work for both Apple and Android devices. You’ll want to use the absolute URL so it will work for both Apple and Android devices.)
*If you are using WordPress and want to accomplish this using a plugin, search “Apple Touch Icons” in the WordPress Plugins area, then upload the icons via the plugin.
Enjoyed this post? I’d love to hear from you on Twitter.
Thanks for the info, I finally got this to work. The key is the ‘sizes=’ field. Question: you say to make 5 logos in these sizes:
60×60 px
76×76 px
120×120 px
152×152 px
180×180 px
But then the code lists 4 sizes, 57, 72, 114 and 144. Not sure what I’m missing here, should there be 4 size icons made or 5? And why are the Apple ‘size=’ sizes less than the actual size of the icon? Thanks.
Hi Rick. Thank you for pointing out the inconsistencies. I’ve corrected the post now after doing some research into the most current recommended sizes. There is a lot of information out there so I’ve tried to summarize and simplify it all.
Hi, many thanks for this article, everything worked really well but there’s a problem now with the Favicon not showing.
The favicon I made has now disappeared and has been replaced by one of the .png icons. I’ve tried everything to get the favicon displaying but without any luck.
Here’s the site relating to this:
()
I wonder if you have come across this before?
Best
Maria
Hi Maria, I’m afraid I haven’t come across that issue before. I did some quick searches to see if I could find a way to figure that out but wasn’t able to find anything. Sorry!
Is it possible to create multiple versions of home screen icons for different web pages under the same website?
For example, if a website has a webpage that is about cars and a webpage about flowers:
A car looking icon will show up when users add the car page to IOS home screen, and a flower looking icon will show up when users add the flower page to IOS home screen. Even though both pages live under the same website, the same domain. Is this doable?
As far as I can tell, yes, though I’ve never tried it. In my example, you add code to the “head” portion of the site and this adds the same code (and thus the same icons) to every page. It seems feasible to add code to each page individually which specifies a different icon for each page. In that case, yes you can have multiple versions of home screen icons.
Hi Delicia. I am looking exactly for that situation.
I have 1 domain, with different pages – http://www.domain.com/page1 http://www.domain.com/page2 and so on.
And i need to implement somehow the code, so that if someone creates the shortcut for the /page2 the icon on the iPhone would be different, than the shortcut icon on form /page1 –
So. Did you found out if this is really possible. Until today i only found out to work only 1 icon per domain.
thanks in advance. regards, adrian
work only for https websites (tested on firefox pc/android)
Is it possible to create a shortcut and allow a user to download the shortcut from your website?