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.”
- Community engagement planning: old way vs. Idea Friendly way - October 3, 2021
- Boost your maker economy with a “Made in” day - September 17, 2021
- How a ghost town made something from nothing with a folk festival - September 3, 2021
- Rural business idea: sell foraged fruits and more - August 3, 2021
- Best practices for rural housing - July 19, 2021
- How to be more open to new ideas #IdeaFriendly - July 3, 2021
- Market your small town as a movie filming location, attract movie and game fan tourists - June 28, 2021
- Survey of Rural Challenges 2021 results, analysis of themes from 2015 through today - June 7, 2021
- What makes a small town a micropolitan or nanopolitan? - May 22, 2021
- Improving Rural Housing: turning blighted dilapidated houses into new homes - May 7, 2021
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!