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.”
- How small town businesses can market to remote workers and turn them into new customers - May 15, 2023
- Survey of Rural Challenges 2023 results - May 8, 2023
- Rural and small town ideas from the OU Placemaking Conference IQC 2023 - April 5, 2023
- Rural tourism trends say small towns are still cool - March 27, 2023
- Move Your Money and Bank Local - March 22, 2023
- Using a building as a warehouse or storage in a small town? Put up a sign - March 13, 2023
- How to get customers in the door of small town and rural retail stores - February 19, 2023
- Check your small business website for outdated pandemic changes, missing info - January 31, 2023
- Rural Tourism Trend: electric vehicle chargers can drive visitors - January 15, 2023
- 2023 trends for rural and small town businesses - December 26, 2022
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!