How to set-up a favicon?

Question

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

did you add it to your html? and make sure it is on the root — Asdfg, Aug 18 '13 at 17:26
Not sure what you mean by that. That is the extent of my code in my question - is it right? — user2694332, Aug 18 '13 at 17:30
looks right. make sure the icon exists where your href is pointing at. — Asdfg, Aug 18 '13 at 17:32

Clément · Answer 1 · 2020-02-09T04:38:51.443

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">

Looks too complicated. I don't think this is needed anymore. — guettli, Jan 18 '19 at 08:55
@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 '19 at 18:34
@Clenent. There is an other answer to this question (by User Schw2iizer) which is one one HTML line. If you think more lines are needed, then please explain why more is needed. — guettli, Jan 21 '19 at 09:49
@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. https://github.com/audreyr/favicon-cheat-sheet , that I refer to in my answer as well. — Clément, Jan 22 '19 at 13:14
if I read "to x for Android 2.1" then I think "this is not used any more". I do not plan to support Android 2.1 and iOS of the same age. — guettli, Jan 22 '19 at 13:19
@guettli Ok, maybe you should read a couple of lines after this. Have a look at https://realfavicongenerator.net/favicon_checker?protocol=http&site=thomas-guettler.de%2F 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 '19 at 16:08
you are right. If you want to support all devices, then one line is not enough. — guettli, Jan 23 '19 at 10:22
@Clément some apps use icons you might not expect them to. For instance, Chrome will use the Apple icons because, presumably, Google realized Apple had already set the standard. So the list may be more complete than you think. https://realfavicongenerator.net/blog/android-chrome-and-its-favicon/ — ubiquibacon, Jul 07 '19 at 16:32

Schw2iizer · Answer 2 · 2017-10-04T17:00:53.940

52

I use this on my site and it works great.

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

edited Oct 04 '17 at 17:00

answered Mar 28 '15 at 21:52

Schw2iizer

845
9
21

Akash · Answer 3 · 2018-01-31T17:19:26.953

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

edited Jan 31 '18 at 17:19

answered Jan 06 '15 at 19:23

Akash

13,107
1
25
19

6

FYI - The W3C discourages this method citing that it "is inconsistent with some principles of Web architecture". https://www.w3.org/2005/10/howto-favicon – NaN May 10 '19 at 01:34

Rinoy Ashokan · Answer 4 · 2019-02-22T11:30:08.357

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.

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

score 6 · Answer 5 · answered Aug 18 '13 at 17:30

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"

answered Aug 18 '13 at 17:30

amdorra

1,536
9
18

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"? – user2694332 Aug 18 '13 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. – Steven T. Cramer Oct 30 '18 at 03:15

score 1 · Answer 6 · answered Aug 18 '13 at 17:32

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

answered Aug 18 '13 at 17:32

Vivek Jain

3,811
6
30
47

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! – user2694332 Aug 18 '13 at 18:11
What is the URL of the favicon file in the `` tag? – Vivek Jain Aug 18 '13 at 18:18
My code is still the same i.e. { } – user2694332 Aug 18 '13 at 18:29
But the precise URL is file:///C:/Users/Emi/Desktop/Zedius%20website/favicon.ico – user2694332 Aug 18 '13 at 18:30
@user2694332, there is a `semi-colon` before the `` 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 - http://stackoverflow.com/q/6644684/1654121 – Vivek Jain Aug 19 '13 at 06:31

Shogg · Answer 7 · 2013-08-18T18:43:49.863

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.

edited Aug 18 '13 at 18:43

answered Aug 18 '13 at 18:36

Shogg

29
6

score 1 · Answer 8 · edited May 08 '14 at 20:20

1

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

edited May 08 '14 at 20:20

Michael Yaworski

13,410
19
69
97

answered May 08 '14 at 19:58

tinabelcher

21
1

4

Welcome to Stack Overflow, please avoid code-only answer by adding a text describing your answer. – A.L May 08 '14 at 20:18

score 0 · Answer 9 · answered Oct 07 '14 at 13:02

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

score 0 · Answer 10 · answered Apr 01 '16 at 09:34

0

This method is recommended

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

answered Apr 01 '16 at 09:34

Aravind Meganathan

31
7

score 0 · Answer 11 · answered Dec 18 '17 at 05:31

0

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

answered Dec 18 '17 at 05:31

Martin

45
7

score 0 · Answer 12 · answered Feb 19 '22 at 07:33

0

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

answered Feb 19 '22 at 07:33

user11870807

1

How to set-up a favicon?

12 Answers12

Linked

Related