Skip to content
SERVING GREATER NEW ORLEANS

Adding Apple Touch Icons to your website.

Graphic illustrating how to add apple touch icons

When you bookmark a website on your iPad/iPhone an icon is created for the site and placed in your bookmarks. In most cases, the icon is just a single letter on a colored square. But if you want some eye candy for your site, you can create an icon and instruct the IOS device to use it. Apple calls it the “Web Clip”.

Apple Touch Icons

Isn’t it much nicer to have your logo, or an image that makes your bookmark stand out and easier to find? So here is how to do it.

First you need to create the icons. There are a couple sizes you will need to create. I found one tutorial that suggested 114×114, 72×72, and 57×57 px, but Apples website suggests 180×180 [iPhone 6+], 167×167 [iPad Pro], 152×152 [iPad retina], 120×120 [iPhone retina], and 76×76 [iPad] (look under “Web Clip Icon”). The IOS devices will take the best size for their display that is available, so if you don’t have all the sizes, it will make due with what is available.

There are 2 ways to associate the files with your website. You can specify them manually by adding a <link /> tag to the head of the HTML, in which case you can name the files anything you want.

The link lines look like this: *the link lines must be between the <head> and </head> tags.
<link rel=”apple-touch-icon” href=”touch-icon-iphone.png”>
<link rel=”apple-touch-icon” sizes=”76×76″ href=”touch-icon-ipad.png”>
<link rel=”apple-touch-icon” sizes=”120×120″ href=”touch-icon-iphone-retina.png”>
<link rel=”apple-touch-icon” sizes=”152×152″ href=”touch-icon-ipad-retina.png”>

Or you can let the IOS device find them in the root directory of the website, in which case you will need to name them to what the device is looking for.
Those names are:
apple-touch-icon-76×76.png
apple-touch-icon-120×120.png
apple-touch-icon-152×152.png
apple-touch-icon-167×167.png
apple-touch-icon-180×180.png

Adding the files to a static HTML website is pretty trivial. It is a bit trickier with a dynamic website. I have added the files to a Shopify site, WordPress, and some Laravel based sites so far. Below is how to do it.

WordPress: (This is how I added a touch icon to the blog Sevengun)
For a WordPress site, i didn’t want to go messing with the theme files, so I just named the files to the appropriate sizes as seen above and copied them into the root directory of the site using a standard FTP client. This took just a couple minutes compared to editing the theme files which will take considerably longer.

Shopify: *caution, making a mistake can take your store offline. Go slow, and make just a couple changes at a time incase you need to reverse what you have done. As seen on BrownBearGear
On a shopify site, you will need to edit your theme files. To get there, log into your shopify site and browse to “Online Store” -> “Themes”. You will need to edit the HTML of your theme so click the elipses (Three dots) icon on the top line of your theme and select “Edit HTML/CSS” as seen here.

shopify edit theme

Hopefully your theme will have just a single Layout file as mine did. Clicking on it in the left pane opened the HTML in the right pane. The <head> tag is near the top of the file. I added the link lines there like this.

shopify edit theme html

Click save in the upper right hand corner when you are finished adding the <link /> lines.

Then upload the png files by selecting “Add a new asset” from the assets directory. You will have to click “Add a new asset” once per PNG file.

Shopify add asset

Once your icon files are uploaded, you are good to go.

**if you named your icon files the way the IOS device is looking for them, you could skip the HTML part all together. I had done the HTML part so I could see if it operated any differently than the way I did my wordpress site and found no difference.

Conclusion:

If you have a logo or icon you would like to use, and you are an “attention to detail” kind of person, then go ahead and add Apple Touch Icons to your site. It will be a very rewarding 15 minutes.

I have found that if you have a blog in a sub-directory, as I have here, you do not need icons in the sub-directory. The IOS device will grab the icons from the root directory of the website.

Next I will have to look at fixing the little picture facebook adds when you link your site there. Stay tuned for that one.

Posted in

Dennis Bourn

For over two decades, Dennis Bourn and the team at Bourn Technology have been helping engineering firms, law practices and many other businesses across New Orleans and the surrounding areas get the most from the technology they value so much. To find out more information about what the right MSP can bring to the table, or to learn more about aligning your IT with your long-term goals as a business, please don't delay - contact Bourn Technology today.

Leave a Comment





Stay in the Know

Subscribe to our email newsletter today to receive updates on the latest news, cybersecurity tips and tricks and more. Enter your name and email address below to be the first to know.

Download Your FREE E-book Today

efficient business ebook cover

Not everything is black and white in business. Yet the importance of business efficiency is indisputable. To find out everything you need to know about the best choices for your business, download your copy of our free eBook - Efficient Businesses Run On Efficient I.T.

Ebook download - blog sidebar