Skip to main content

Making iOS & Android Website Home Screen Icons

By May 15, 2018May 18th, 2018Blog, Web Development

Have you ever tried to save a website link to your home screen on an iOS or Android device only to see a really bad squeezed representation of the website you were trying to bookmark as an icon? There is a better way, and with a bit of simple code you can customize those icons and represent your website and your brand in a better way.

Each Apple Device has a different screen size and resolution. That means for best results, you need a separate, differently sized icon for each device. Don’t worry about Android – any sized icon is automatically scaled down.

Here’s the size breakdown:

  • iPhone and iPod Touch (Retina Display)
    Icon size: 114px by 114px
  • iPhone and iPod Touch (None Retina Display)
    Icon size: 57px by 57px
  • iPad (Retina Display)
    Icon size: 144px by 144px
  • iPad (None Retina Display)
    Icon size: 72px by 72px

One you get your icons saved and upload to your website, add this code in-between the <head> … </head> section of your website.

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="icon-57x57.jpg" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="icon-72x72.jpg" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icon-114x114.jpg" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="icon-144x144.jpg" />

Now go ahead and hit that “Add to Home Screen” button.

So much better, and more on-brand than the default.