What kind of way is better to add website icon in browser?

I notice that there are a lot of ways to add website icons. Because of the various of devices and systems, there are also very different formats to add icon. So how can I meet all of their requirements? What is the safest solution?

For example:

Method One:

<link rel="shortcut icon" href="img/favicon.ico">

Method Two:

<link rel="icon" type="image/vnd.microsoft.icon" href="img/favicon.ico" />

Method Three:

  <link rel="apple-touch-icon" href="img/touch-icon-iphone.png">
  <link rel="apple-touch-icon" sizes="76x76" href="img/touch-icon-ipad.png">
  <link rel="apple-touch-icon" sizes="120x120" href="img/touch-icon-iphone-retina.png">
  <link rel="apple-touch-icon" sizes="152x152" href="img/touch-icon-ipad-retina.png">

I understood that method three is to add icon to the home-screen of apple devices. And ico file is a file format that stores various size of icons.

So if I use method three(Apple's way), does it get the same effect as the two others? What are the relationships between these three methods? If putting them together, what would happen? How do they influence each other?

Solution

These is no one-to-one relationship between browsers and icons. However, the following list gives a good overview of the topic:

Legacy desktop browsers (eg. old versions of IE): favicon.ico, declared with <link rel="shortcut icon" href="/favicon.ico">
Modern desktop browsers (eg. latest Chrome): 16x16 PNG icon, declared with <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">. Yet, modern browsers can deal with the legacy favicon.ico, so this is not a strict requirement.
Safari with Mac OS Yosemite: Apple Touch icon, declared with <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
iPhone and iPad: several Apple Touch icons, from 57x57 (first generations of iPhone) to 180x180 (iOS 8, ie. iPhone 6 and latest iPad), declared with <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
Android Chrome, prior M39 / Android 5 / Lollipop: 192x192 PNG icon, declared with <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">. It also uses the Apple Touch icon as the bookmark icon.
Android Chrome M39+ / Android 5 / Lollipop: up to 6 icons declared in a manifest, declared with <link rel="manifest" href="/manifest.json">. It also uses the Apple Touch icon as the bookmark icon.
IE 10 / Windows 8: a 144x144 icon, declared with <meta name="msapplication-TileImage" content="/mstile-144x144.png">
IE 11 / Windows 8.1: up to 4 icons declared in a manifest, declared with <meta name="msapplication-config" content="/browserconfig.xml">
Coast by Opera: a 228x228 PNG icon, declared with <link rel="icon" type="image/png" href="/favicon-228x228.png" sizes="228x228">
Google TV: a 96x96 PNG icon, declared with <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
... Yandex Browser, etc.

In addition to the huge amount of icons, there is also a design issue. The most common pitfall is transparency. Favicons are often transparent, which is fine. However, iOS forbids it and fills the transparent regions with black. For an example of this, compare the SO touch icon and what you actually get when you add SO to the home screen of your iPhone/iPad. So it is important to keep design in mind, not just resize your master picture blindly.

For these reasons, I advice you to use this favicon generator. It generates all the required icons you need to support all major platforms and also let you design icon platform-per-platform. Full disclosure: I'm the author of this service.