86

I am trying to do a very simple preliminary exercise to setting up a website which is creating a favicon.

This is the code I am using:

<!DOCTYPE html >
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
</html>

But it is not working - can anyone please assist? I've saved the file favicon.ico on the same level as my html file (on a subdirectory).

Many thanks

4
  • did you add it to your html? <link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> and make sure it is on the root
    – Asdfg
    Aug 18, 2013 at 17:26
  • Not sure what you mean by that. That is the extent of my code in my question - is it right? Aug 18, 2013 at 17:30
  • looks right. make sure the icon exists where your href is pointing at.
    – Asdfg
    Aug 18, 2013 at 17:32
  • Nope, nothing happening. Aug 18, 2013 at 17:46

12 Answers 12

85

With the introduction of (i|android|windows)phones, things have changed, and to get a correct and complete solution that works on any device is really time-consuming.

You can have a peek at https://realfavicongenerator.net/favicon_compatibility or http://caniuse.com/#search=favicon to get an idea on the best way to get something that works on any device.

You should have a look at http://realfavicongenerator.net/ to automate a large part of this work, and probably at https://github.com/audreyr/favicon-cheat-sheet to understand how it works (even if this latter resource hasn't been updated in a loooong time).

One complete solution requires to add to you header the following (with the corresponding pictures and files, of course) :

<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="mstile-144x144.png">
<meta name="msapplication-config" content="browserconfig.xml">

In June 2016, RealFaviconGenerator claimed that the following 5 lines of code were supporting as many devices as the previous 18 lines:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
8
  • 1
    Looks too complicated. I don't think this is needed anymore.
    – guettli
    Jan 18, 2019 at 8:55
  • 8
    @guettli Ok… Do you have a source to back this up, or some experiment? It's not because it looks complicated that this is not the right way to do it, or is it? What is your solution?
    – Clément
    Jan 19, 2019 at 18:34
  • 3
    @guettli ? The first sentence of my answer explain why more is needed. "With the introduction of (i|android|windows)phones, things have changed, and to get a correct and complete solution that works on any device is really time-consuming." That one line with one .ico file does not work on every device. Cf. github.com/audreyr/favicon-cheat-sheet , that I refer to in my answer as well.
    – Clément
    Jan 22, 2019 at 13:14
  • 1
    @guettli Ok, maybe you should read a couple of lines after this. Have a look at realfavicongenerator.net/… for yourself: iOS Safari, Android Chrome, and some other are missing. I'm not saying it's a must have (you may obviously not care about those devices, or think that it's their problem and not yours), I'm just saying that having "correct and complete solution that works on any device is really time-consuming.". Feel free not to use it, but writing "not needed anymore" is incorrect.
    – Clément
    Jan 22, 2019 at 16:08
  • 2
    you are right. If you want to support all devices, then one line is not enough.
    – guettli
    Jan 23, 2019 at 10:22
52

I use this on my site and it works great.

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

There is a very simple method to set a favicon, which had been around for a long time AFAIK. Place the favicon.ico file in the default location. i.e

http://www.yoursite.com/favicon.ico

This works in almost every browser without a <link> tag. However, this works only if it is an *.ico file. PNGs and other formats still have to be linked with a <link> tag

1
  • 6
    FYI - The W3C discourages this method citing that it "is inconsistent with some principles of Web architecture". w3.org/2005/10/howto-favicon
    – NaN
    May 10, 2019 at 1:34
8

Below given some information about fav Icon

What Is FavIcon?  FavIcon is nothing but small image which appears top left along with the application address bar title.Standard size specification for favicon.ico is 16 by 16 pixel. Please see below attached figure.

enter image description here

How It Works ?  Usually we add our FavIcon.ico image in the route solution folder and automatically application picks it while running. But most of the time we might have to use below both link reference.

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

Some browser expect one (rel="icon") Some other browser expect other rel="shortcut icon"

Type=”image/x-icon” OR Type=”image/ico”: once expect exact ico image and one expect any image even formatted from .jpg or .pn ..etc.

 We have to use above two tags to the common pages like – Master page , Main frame which is getting used in all the pages

6

you could take a look at the w3 how to, i think you will find it helpful

your link tag attribute should be rel="icon"

2
  • I've looked at w3 how to but to no avail. What do you mean my link tag should be rel = "icon"? that and not link rel = "shortcut icon"? Aug 18, 2013 at 17:33
  • The "w3 how to" link seems to be for Html4 as profile isn't supported in Html5 so I don't think that link should be trusted. Oct 30, 2018 at 3:15
1
<!DOCTYPE html 
      PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
</head>
<body>
...
</body>
</html>

rel="shortcut icon" should be rel="icon"

Source: W3C

5
  • The most crazy thing has happened now...I have the favicon from this website (i.e. stackoverflow.com) somehow stuck on my website - How did this happen! Aug 18, 2013 at 18:11
  • What is the URL of the favicon file in the <link> tag?
    – Vivek Jain
    Aug 18, 2013 at 18:18
  • My code is still the same i.e. {<!DOCTYPE html > <html lang="en-US"> <head profile="w3.org/2005/10/profile"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> </head> </html>} Aug 18, 2013 at 18:29
  • But the precise URL is file:///C:/Users/Emi/Desktop/Zedius%20website/favicon.ico Aug 18, 2013 at 18:30
  • @user2694332, there is a semi-colon before the <link> tag, please remove it. Also change the value of the rel attribute to icon (rel="icon"). Rest of the code looks good and should work fine. Check this out - stackoverflow.com/q/6644684/1654121
    – Vivek Jain
    Aug 19, 2013 at 6:31
1

From experience of my favicon.ico not appearing, I am sharing my experience. You can't get it to show until you put your website on a host, therefore, try put it on a localhost using XAMPP - http://www.apachefriends.org/en/xampp.html. This is how the favicon appears and like others recommended, change:

rel="shortcut icon"

to
rel="icon"

Also this way .png favicons can be used for slickness.

0
1
<head>
    <link rel="shortcut icon" href="favicon.ico">
</head>
1
  • 4
    Welcome to Stack Overflow, please avoid code-only answer by adding a text describing your answer.
    – A.L
    May 8, 2014 at 20:18
0

In my site, I use this:

<!-- for FF, Chrome, Opera -->
<link rel="icon" type="image/png" href="/assets/favicons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/assets/favicons/favicon-32x32.png" sizes="32x32">

<!-- for IE -->
<link rel="icon" type="image/x-icon" href="/assets/favicons/favicon.ico" >
<link rel="shortcut icon" type="image/x-icon" href="/assets/favicons/favicon.ico"/>

To simplify your life, use this favicons generator http://realfavicongenerator.net

0

This method is recommended

<link rel="icon" 
  type="image/png" 
  href="/somewhere/myicon.png" />
0

Try put this in the head of the document: <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>

0

I use this https://realfavicongenerator.net/ to generate all the possible favicons scenarios and it is free.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.