When a reader or friend likes your site so much that she puts a shortcut to it on her iPhone, it’s a big compliment. It also means you ought to create a special icon to represent your site on iPhones. How do you do that? With special icons called Apple Touch Icons.
This does take some technical skills: copying files to the root directory of your website and adding code to your HTML. If you’re not comfortable with those, you may want to either skip this project or hand it off to the person who helps you with your website.
Note: this is the absolute minimum set of instructions. You’ll find comprehensive instructions in this article Everything you always wanted to know about touch icons.
Here’s my simplified method:
First, create an icon. This is the icon to represent your site, so make sure it looks like your site or your brand. You can create special copies of the icon in all the different sizes that might be used on all the different Apple devices. I was lazy and created one icon at the largest size: 152 x 152 pixels. I made sure it was readable even when scaled down smaller because the Apple iOS will resize it as needed. I named this icon file “apple-touch-icon.png”. To make the icon compatible with certain Android phones and tablets and to keep iOS from making it look “glossy” and rounded on certain phones, I created a copy called “apple-touch-icon-precomposed.png”.
Second, copy the icon file or files to the root directory of your website. How you do this depends on who hosts your website and how you access it, so I can’t give you specific step-by-step instructions. You host might offer a File Manager tool or FTP. I used FTP to place the two files in my root directory.
Third, add a piece of code to the <head> section of your website’s HTML. This is optional. All Apple devices will look for the HTML, but if they don’t find that, they will still look for the icons in the root directory. Some Android devices only check for this HTML to find the icons, so I decided to include it.
Once again, how you do this depends on your particular website. Because I use WordPress and the Genesis theme, I have a plugin called Genesis Simple Hooks to make it easy to add HTML. In the <head> section, I added these two lines:
<link rel=”apple-touch-icon-precomposed” href=”apple-touch-icon-precomposed.png”>
<link rel=”apple-touch-icon” href=”apple-touch-icon.png”>
Below, you’ll see a screenshot of how my icon looks on an iPhone screen. Ain’t it purty?
This is a very, very minimal explanation, really just to make you aware that this is something to consider adding to your website. You’ll find much more complete and technical tutorials on other websites that specialize in this kind of thing. Try searching for the phrase “Apple Touch Icons.”
- About the Author
- Latest by this Author
Becky started Small Biz Survival in 2006 to share rural business and community building stories and ideas with other small town business people. She and her husband have a small cattle ranch and are lifelong entrepreneurs. Becky is an international speaker on small business and rural topics.
Great tip and tweak, Becky. I’d never thought about doing or suggesting this tidbit.
One thing I have used in the past for other “icon-izing” of images and sites is this icon generator from Quirco http://www.quirco.com/iPhoneIcon/ – might assist in taking that first step.
Thanks for sharing this, I’m passing it around:-)
Thanks, Mike. Great tool!