(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.
- 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.