This is pretty straight forward and we will show you how in this article.
The process to implement this solution is quite straight forward:
- Create your icons using something like photoshop
- Save your images to your website in PNG file format
- Add the code needed into your html
In the head code of your templates you simple need to add the following code:
< link href="/YOURPATH/apple-touch-icon-144-precomposed.png" sizes="144x144" rel="apple-touch-icon-precomposed" /> < link href="/YOURPATH/apple-touch-icon-114-precomposed.png" sizes="114x114" rel="apple-touch-icon-precomposed" /> < link href="/YOURPATH/apple-touch-icon-72-precomposed.png" sizes="72x72" rel="apple-touch-icon-precomposed" /> < link href="/YOURPATH/apple-touch-icon-57-precomposed.png" rel="apple-touch-icon-precomposed" />
NOTE: Remove the first space after < at the start
Where you see YOURPATH simply put in your folder structure for where you have placed your images.
In terms of actually creating an Apple touch icon You will need to create the graphics using something like Photoshop. Begin by creating a square graphic that is sized to 144 by 144 pixels, and then saving it in .png format. 144-pixels is the perfect size for the Apple iPad, and will will cover the retina display resolution and scale down for other device revisions.