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.”
- Join me for the Rural Renewal Symposium online Oct 13 - September 26, 2020
- Cheap placemaking idea: instant murals - September 11, 2020
- Refilling the rural business pipeline - July 7, 2020
- Huge vacant buildings: grants to renovate? - June 9, 2020
- Economic self defense for small towns - June 7, 2020
- The best things you can do for local businesses in light of coronavirus - March 27, 2020
- How to get more parking downtown without adding any spaces - March 7, 2020
- Exact Yeti Blue mic volume and Windows settings to reduce background noise - February 17, 2020
- Getting local businesses to cooperate with you: Shop Hopping Around Brownsville - December 16, 2019
- Survey of Rural Challenges 2019 results - December 5, 2019
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!