Last week, I found myself in an interesting Twitter discussion with my friend Brad Frost. Centered around home screen icons for mobile, Brad was lamenting on the lack of up-to-date, clean cut resources for them.
I couldn’t agree more! In fact, over the last few weeks, that has been my baby; to create a simplistic guide for home screen icons. Initially, it was just an internal team resource, but now I’d like to share it with you. And after a lot of testing and research, here is what I came up with…
TL;DR: People are overdoing it. You can add great looking home screen icons for iOS and Android with a single image and two lines of code. Here’s the Github Repo with the markup and a test image.
From Flappy Birds to the “Gloss” Effect
Before the days of App Stores and Flappy Birds, when the iPhone was first unveiled, there were no third party apps. Your home screen was a fixed set of icons and there was virtually no customization, not even rearranging capabilities.
The following year (still talkin’ iPhone OS version 1.1.3 here) Apple added the ability to add (or bookmark) “Web Clips” to your home screen. Rearranging was finally implemented for apps and web clips on up to 9 home screens (hot dog!) – still no app store though.
Along with this feature, Apple provided the ability for developers to specify custom icons for “Web Clips” called a “Web Clip Icon.” This could be accomplished in two ways; by adding the file to your root folder via predefined naming conventions or by adding a <meta> tag to the <head> of your document. The image was required to be an 8-bit (no transparency) square PNG. iOS automatically rounded the corners and added that sexy “gloss” effect icons. However, you could disable the gloss with a different naming convention in your file or meta tag.
Many iterations of the iPhone and iOS later, you still have access to this feature as you did way back in iOS 1.1.3. Additionally, Mobile Safari for iOS 7 uses the web clip icon when displaying your bookmarks. Oh, and home screen bookmarks are now available in Chrome (31+) for Android as well. Long story short, this is something everyone should be adding. No one wants to see the default icon.
If you look up documentation on these icons though, it will boggle your mind! Some of the sources out there recommend up to seven different size icons with varied meta tags for each. After a ton of experimenting, I found this to be totally unnecessary. iOS and Android are quite adept to scaling the icon to its necessary size without making a ton of versions or adding loads of code to the head of your document.
The Simplicity of Modern Touch Icons
Now with all that said, here are my simple steps for modern touch icons.
Step 1: Make It
Make your icon. My preference is 512x512px but as long as its at least 152x152px, you’ll be good. In addition, double check it’s PNG 8-BIT with no transparency. Note: It won’t work if you use PNG-16 or have transparency enabled. Finally, make it square, the OS is going to round the corners for you. Save your file as
Step 2: Add Code
Add these two lines of code to the head of your HTML document. The first is for Android, the second is for iOS.
<link rel="shortcut icon" href="touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="touch-icon.png">
Notes:
Bonus
By default, both iOS and Android use the page’s <title> tag for the bookmark title (you can still edit before saving them). However, if you’re feeling crazy and want to add another line of code, you can use this undocumented tag, from Apple, to set a different default title.
<meta name="apple-mobile-web-app-title" content="My App Name">
Technically this tag is for full screen web apps (a post for another day), but it works with regular web clip bookmarks as well.
Keep the conversation conversation going! We’d love to hear from you.
