Copyright © 2012 Ley'ing it Out. All Rights Reserved. Snowblind by Themes by bavotasan.com. Powered by WordPress.
I’ve been trying for some time now to spruce up this site to make it a little more graphical and catchy. One thing that I have wanted to sort is the creation of an official icon that will be used by Apple products when someone created a shortcut to this site and places is on their home screen.
After a few web searches I found varying success with the tools that people have placed online to create an icon or manipulate an uploaded file. The most common issue being that the sites out there still produce output files on the lower 57 x 57 pixel format and not the 72 x 72 pixel format that looks nice on the iPad. Originally I was of it opinion that upping from 57 to 72 pixels really can’t make that much difference, can it?? Believe me, it is worth the effort!
So here’s the approach that I have taken to keep the logo quality as high as possible.
- Start off by making your images in an oversized resolution so that you can downscale the image at a later date to the 72×72 pixel resolution that is needed.
- There is no need to create an image with curved corners (the Apple iPad will do that for you), just make it square and remember that you will loose any content that you place out there !
- Downscale the image to 72 x 72 pixels (I used Microsoft Paint to perform this task) and save the file as a PNG image file. You can name the file as anything that you want.
- Upload the file to a suitable place on your web server.
- Now update the code on your website so that in the header file, you have the code <link rel=”apple-touch-icon” href=”/images/apple-icon.png”> in the <head> section. Remembering to change the href location to point at your icon file.
That basically completes getting your icon saved on the home screen of an iPad if people like your site that much. However, there was one more thing that I wanted to change about the way Apple products auto manipulate the image you provide as the icon and goes beyond the information that I found on the LifeinTECH site.
What you will notice is that by default, the auto manipulation will not only curve off the corners of your image but it will also add what is known as a “glossy” look to the icon. This may look good in some cases, but for me it just distracted from the effect that I was after.
After hunting through the Safari Reference Library I found that it is possible to disable this glossy finish by changing the code from step 5 above. To disable the feature use <link rel=”apple-touch-icon-precomposed” href=”/images/apple-icon.png”> instead. The key change here being the apple-touch-icon-precomposed part.