CODEWITHSUNDEEP
htmlfavicon
Lohith
Lohith

Reputation: 57

What is the difference between favicon and image?

I want to put a icon on title bar in the browser, but what i should use in below options both are working fine but i want know the difference between these types and is it nessesary to mention icon in both rel ( shortcut icon & icon ) .

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">

and

<link rel="shortcut icon" type="image/png" href="img/micrologo.png">
<link rel="icon" type="image/png" href="img/micrologo.png">

Upvotes: 5

Views: 8727

Answers (1)

Austen Holland
Austen Holland

Reputation: 1978

Quoted from the mozilla developer pages you should only use the rel="icon".

The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.

https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types

As for the ico vs png, if you want to support older browsers like Internet Explorer 10 and lower, you will need to define the .ico favicon as these browsers do not support png, gif, jpeg, or svg favicons.

![Favicon file support chart

The best way to have a nice favicon optimised for most browsers is to have something like this:

// Target ios browsers.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
// Target safari on MacOS.
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
// The classic favicon displayed in tabs.
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
// Used by Android Chrome for the "Add to home screen" icon and settings.
<link rel="manifest" href="/site.webmanifest">
// Used for Safari pinned tabs.
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#193860">
// Target older browsers like IE 10 and lower.
<link rel="icon" href="/favicon.ico">
// Used by Chrome, Firefox OS, and opera to change the browser address bar.
<meta name="theme-color" content="#ccccc7">
// Used by windows 8, 8.1, and 10 for the start menu tiles.
<meta name="msapplication-TileColor" content="#00aba9">

To generate all these different files, and meta tags is best to use https://realfavicongenerator.net/ (I am not affiliated with this site in any way, I simply use it very often)

Upvotes: 20

Related Questions