1

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?

Haoyu Chen
  • 1,760
  • 1
  • 22
  • 32
  • possible duplicate of ["/favicon.ico" vs ](http://stackoverflow.com/questions/25952907/favicon-ico-vs-link-rel-shortcut-icon) – Lukas Spieß Mar 21 '15 at 20:41

2 Answers2

5

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.

philippe_b
  • 38,730
  • 7
  • 57
  • 59
  • 1
    Wow, that's a wonderful service and way better that the google search result in the first page! Really appreciate! I think every web designer should know about this site! – Haoyu Chen Mar 22 '15 at 15:34
0

Method 1 is the simplest, method 2 is for older versions of Internet Explorer, and, as you say Method 3 is for apple devices.

You should be able to use all 3 for maximum support. They will suplement each other, with devices each using the relevant one and ignoring the others.

See Favicon on Wikipedia for more information.

Patronics
  • 1,351
  • 1
  • 16
  • 27