Many websites take advantage of the favicon to give that extra bit of uniqueness and professionalism to the site. This is typically done with code something like this:

<link href="https://www.koolkatwebdesigns.com/favicon.ico" rel="shortcut icon">

And,when you go to my site, you will see a tiny “kool kat” on the browser tab or before the address bar.

Now, of course, many people are using iPhones and iPads as their primary device. Wouldn’t it be great if they could access your website right from their devices home page? Well they can! All you have to do is include a link like this as part of your html head section:

<link href="https://www.koolkatwebdesigns.com/koolkat-mobile.png" rel="apple-touch-icon">

Notice the rel=”apple-touch-icon”. This is what gives you this ability. Then, when your site visitor is browsing your website on the iPad, he/she just “add this site to “add to home screen” from the Safari menu and your icon is now on the device home page with a direct link to your website.

Kool Kat Web Design’s iPad/iPhone icon
Kool Kat Web Designs Mobile Icon

The icon should be 57px x 57px. I created my icon from an initial .png file at this site http://www.flavorstudios.com/iphone-icon-generator.