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”.
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.
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.
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.
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.