Your website's Apple Home Screen Icons

Many People developing their Business Catalyst website designs would like to also create and implement Apple IOS homescreen icons.

This is pretty straight forward and we will show you how in this article.

The process to implement this solution is quite straight forward:

  1. Create your icons using something like photoshop
  2. Save your images to your website in PNG file format
  3. 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.

Load more

Pinterest @Pretty_Pins

Twitter @Pretty_Thinks

Follow Us
    We're online
    Contact us

    Let's Talk!
    Reach out, talk to us and a business representative will be in contact shortly.

    Captcha Image