Adding a favicon to a static HTML page

Question

I have a few static pages that are just pure HTML, that we display when the server goes down. How can I put a favicon that I made (it's 16x16px and it's sitting in the same directory as the HTML file; it's called favicon.ico) as the "tab" icon as it were? I have read up on Wikipedia and looked at a few tutorials and have implemented the following:

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

But it still doesn't want to work. I am using Chrome to test the sites. According to Wikipedia .ico is the best picture format that runs on all browser types.

Update

I could not get this to work locally although the code checks out it will only really work properly once the server started serving the site. Just try pushing it up to the server and refresh your cache and it should work fine.

who don't you tell any of your friend to check it for you on some other system, same issue is with one of my client my system showing up fine and he's complaining favicon not showing up, i mostly use first one of you example and its correct. best of luck. — m-t, Mar 30 '12 at 13:45
Possible duplicate of [How to add a browser tab icon (favicon) for a website?](http://stackoverflow.com/questions/4888377/how-to-add-a-browser-tab-icon-favicon-for-a-website) — Michał Perłakowski, Mar 12 '16 at 16:09
Interesting, the live website served up the favicon just fine, but when viewing the file locally, and not serving it through a local server (b/c it's simple static site - yea!), the favicon didn't show. In hindsight it makes sense, servers auto serve it up. Adding `` to the `head` (next to the 32, 16, and 180 favicon variation `link`s) solved the issue locally. Since I'd included `link`s for the larger icon sizes, and the manifest, I didn't think twice about why `favicon.ico` wasn't showing up! :-) — SherylHohman, Mar 09 '20 at 23:55

score 1189 · Accepted Answer · edited Jun 01 '20 at 08:30

1189

You can make a .png image and then use one of the following snippets between the <head> tags of your static HTML documents:

<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>

edited Jun 01 '20 at 08:30

aravk33

469
2
10
18

answered Mar 30 '12 at 13:19

Hazy McGee

12,052
1
15
8

4

did you try putting "shortcut icon" in the rel= for your ico links and put a / before favicon.ico on both just to state that it is in the webroot dir? – Hazy McGee Mar 30 '12 at 13:22
1

yip tried that too.. man lol i rate i am going to restart it all and then try boot up and see if maybe its cashing wrong or something.. – legendary_rob Mar 30 '12 at 13:27
i just ran it with firefox and chrome and have literaly copied your code aswell no luck. DOH! – legendary_rob Mar 30 '12 at 13:33
9

I swear - i had the same problems after adding the code - it took maybe a day for the browser to display the icon instead of the grey box it usually has - try dumping ur browser cache history etc And if u copied my code make sure u change example.com to ur domain lol – Hazy McGee Mar 30 '12 at 13:35
cool beans well thanks dude i dont know if it is going to get any better i will vote up on both of the answers and just check up on it tomorrow i guess lol thanks for help :) – legendary_rob Mar 30 '12 at 13:38
4

There is a redundant / in the top line href argument. Once I removed it it works like a charm. Should be: – drpawelo Jun 27 '13 at 13:46
and what if you don't know the exact link that will be used? (some users use www.domain1.com and others use www.domain2.com) That makes option 2 difficult.. Option 1 does not work for ie 10/11 here. – Steven Jan 07 '14 at 16:26
5

http://www.w3.org/2005/10/howto-favicon says to include a `profile` attribute in the `head` tag... is that necessary? – Rakib Jul 13 '14 at 08:54
you're adding an extra slash '/' to href="favicon.png" – João Pimentel Ferreira Sep 17 '14 at 20:50
1

Be sure to add this in the PUT HERE section! – Gustavo Louis G. Montańo Nov 12 '14 at 20:46
thanks it worked for me. But, why did you kept two tags in your answer only 1 tag was enough for me – Mateen Feb 04 '15 at 08:44
Do you add this in the head section? Needs a bit more detail. – riahc3 Jul 14 '15 at 08:19
HTML5 standardised this to `rel="icon"`: https://www.w3.org/TR/html5/links.html#rel-icon Please update your answer to reflect this! – idmean Jan 27 '16 at 15:42
1

Just FYI, you do not require a 16 X 16 image, I use a 400 x 400 image and it works just fine. – Tino Caer Aug 22 '16 at 20:06
Chrome seems to have some sort of deep cache as CTRL+F5 wasn't enough for it to pick up my amended code, but I know it'll work for others as fresh computers / browsers displayed the favicon fine. – MSC Mar 23 '17 at 01:31
1

[Apparently, `shortcut icon` is harfmul...](https://mathiasbynens.be/notes/rel-shortcut-icon) – Ethan Dec 14 '17 at 09:13
Do you need both of those lines? – Aaron Franke Mar 20 '19 at 01:01
href without slash worked for me. `href="favicon.png"`, not `href="/favicon.png"`. – Tharindu Sathischandra Apr 26 '19 at 05:50
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) says that apple iOS/Safari don't use `rel="icon"` but instead use the non-standard `apple-touch-icon` and `apple-touch-startup-image` rel types. See https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4 Please update this answer to account for this. – Matthias Jan 21 '22 at 18:31
For Chrome, open dev tools and right click the reload button, which will give advanced options. One of these options will be "empty cache and hard reload", which is useful to reload the favicon. – bordeaux Sep 18 '22 at 15:05

score 279 · Answer 2 · edited Aug 13 '15 at 11:26

279

Most browsers will pick up favicon.ico from the root directory of the site without needing to be told; but they don't always update it with a new one right away.

However, I usually go for the second of your examples:

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

edited Aug 13 '15 at 11:26

Pablo Fernandez

279,434
135
377
622

answered Mar 30 '12 at 13:21

Codecraft

8,291
4
28
45

does it have to be befoer the meta data or the script tags?? or not a problem – legendary_rob Mar 30 '12 at 13:34
2

As long as its in the section, it shouldn't matter - because its not reliant on something else to work. – Codecraft Mar 30 '12 at 13:50
1

[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) says to not use `shortcut` anymore. – Matthias Jan 21 '22 at 18:31

score 142 · Answer 3 · answered Jan 16 '14 at 14:02

142

Actually, to make your favicon work in all browsers, you must have more than 10 images in the correct sizes and formats.

I created an App (faviconit.com) so people don´t have to create all these images and the correct tags by hand.

Hope you like it.

answered Jan 16 '14 at 14:02

Eduardo Russo

4,121
2
22
38

9

Loved the app, no bs - straight to it, and the image can be edited before creating all the favicons +1 to you for saving me a bunch of time :) – SidOfc Jan 26 '16 at 09:15
1

Agreed, this is a great app. While I don't think all those image sizes seem quite necessary, I love that it generates them and the required markup etc. Thanks! – andrhamm Oct 18 '17 at 14:09
1

But it is proprietary. – ctrl-alt-delor Mar 05 '18 at 22:48
It doesn't work, gives `Whoops, looks like something went wrong.` – olfek Mar 24 '18 at 14:07

ashleedawg · Answer 4 · 2022-06-17T06:49:23.737

Usage Syntax: _{^{.ico, .gif, .png, .svg}}

This table shows how to use the favicon in major browsers. The standard implementation uses a link element with a rel attribute in the document's <head> section to specify the file format and filename/location.

Note that most browsers will give precedence to a favicon.ico file located in the website's root (therefore ignoring any icon link tags).

                                         Edge   Firefox   Chrome   I.E. Opera Safari  
 -------------------------------------- ------ --------- -------- ----- ----- ------ 
 <link rel="shortcut icon"               Yes    Yes       Yes      Yes   Yes     Yes
   href="http://example.com/myicon.ico">                          
 
 <link rel="icon"                        Yes    Yes       Yes      9     Yes     Yes
   type="image/vnd.microsoft.icon"                  
   href="http://example.com/image.ico">                        

 <link rel="icon" type="image/x-icon"    Yes    Yes       Yes      9     Yes     Yes
   href="http://example.com/image.ico">   

 <link rel="icon"                        Yes    Yes       Yes      11    Yes     Yes     
   href="http://example.com/image.ico"> 

 <link rel="icon" type="image/gif"       Yes    Yes       Yes      11    Yes     Yes
   href="http://example.com/image.gif">      

 <link rel="icon" type="image/png"       Yes    Yes       Yes      11    Yes     Yes
   href="http://example.com/image.png">     

 <link rel="icon" type="image/svg+xml"   Yes    Yes       Yes      Yes   Yes     No
   href="http://example.com/image.svg">

File format support

The following table illustrates the image file format support for the favicon:

                                         Animated                                
  Browser             ICO   PNG    GIF    GIF's   JPEG   APNG   SVG   
 ------------------- ----- ------ ------ ------- ------ ------ ------ 
  Edge                Yes   Yes    Yes    No      ?      ?      ?     
  Firefox             1.0   1.0    1.0    Yes     Yes    3.0    41.0  
  Google Chrome       Yes   Yes    4      No      4      No     No    
  Internet Explorer   5.0   11.0   11.0   No      No     No     No    
  Safari              Yes   4      4      No      4      No     No    
  Opera               7.0   7.0    7.0    7.0     7.0    9.5    44.0

Browser Implementation

The table below illustrates the different areas of the browser where favicon's are displayed:

                      Address     Address bar 'Links'                       Drag to  
  Browser             Bar         drop-down     bar       Bookmarks   Tabs   desktop  
 ------------------- ------------ ----------- --------- ----------- ------ --------- 
  Edge                No            Yes         Yes       Yes         Yes    Yes      
  Firefox             until v12     Yes         Yes       Yes         Yes    Yes      
  Google Chrome       No            No          Yes       Yes         1.0    No       
  Internet Explorer   7.0           No          5.0       5.0         7.0    5.0      
  Safari              Yes           Yes         No        Yes         12     No       
  Opera               v7–12: Yes    No          7.0       7.0         7.0    7.0      
                      > v14: No

Icon files can be 16×16, 32×32, 48×48, or 64×64 pixels in size, and 8-bit, 24-bit, or 32-bit in color depth.

While the information above is generally correct, there are some variations/exceptions in certain situations.

See more detailed information at the source on Wikipedia.

Update: _{^{("more info")}}

See Google's "new" (2019) criteria to Define a favicon to show in search results.
You can retrieve (programmatically or manually) Google's cached favicon for any domain with a URL such as: https://www.google.com/s2/favicons?domain=stackoverflow.com

Using the above URL directly in an <img> tag returns: " ".
I've used realfavicongenerator.net a couple times; it's very thorough, generating/customizing every possible favicon variation you might need for maximum compatibility. (However, if you're seeking a single favicon image, this is might not be the tool for you!) For simple file conversion (eg., PNG to ICO, etc) I like onlineconvertfree.com.

score 59 · Answer 5 · answered Jan 09 '16 at 21:31

59

Convert your image file to Base64 string with a tool like this and then replace the YourBase64StringHere placeholder in the below snippet with your string and put the line in your HTML head section:

<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />

This will work 100% in browsers.

answered Jan 09 '16 at 21:31

Farshid

5,134
9
59
87

3

I found another tool that does the conversion in JavaScript without transferring data to the server: https://jpillora.com/base64-encoder/ Additionally, it handles multiple files by drag and drop. Save the page to use it locally. – handle Oct 16 '16 at 08:49
2

imho, best solution, because it honors the "static html" page and is completely self contained within the document. – Buffalo Rabor Nov 30 '16 at 08:08
2

Best solution. Works with png files as well . – Rolf of Saxony Apr 28 '17 at 09:59
1

This will cause a long string to be added to every page. Use inline base64 for small images that are rarely sent to the user. – frodeborli Dec 10 '18 at 08:43
1

This way your favicon is never cached, you send the whole string to the client each time, IHMHO using a url and therefore the browser cache feels 'cleaner/ better' – Michiel Jan 08 '19 at 10:57
This works! Example: `` -- Image base64 encoder: https://www.base64-image.de – kol Jun 26 '22 at 15:53

Rahul Desai · Answer 6 · 2017-06-27T17:24:21.740

16

As recommended by W3.org, you can use the rel attribute to achieve this.

Example:

<head>
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
...

edited Jun 27 '17 at 17:24

answered Dec 26 '14 at 08:30

Rahul Desai

15,242
19
83
138

Tanveer Shaikh · Answer 7 · 2014-08-04T10:34:26.080

15

If the favicon is a png type image, it'll not work in older versions of Chrome. However it'll work just fine in FireFox. Also, don't forget to clear your browser cache while working on such things. Many a times, code is just fine, but cache is the real culprit.

edited Aug 04 '14 at 10:34

answered Jul 31 '13 at 07:38

Tanveer Shaikh

1,678
14
27

1

That's fine; it's very hard to install/keep an old version of Chrome anyway – Ky - Dec 09 '18 at 07:19

shilovk · Answer 8 · 2017-02-07T16:50:21.127

10

<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>

edited Feb 07 '17 at 16:50

answered Jul 06 '15 at 14:33

shilovk

11,718
17
75
74

score 8 · Answer 9 · edited Apr 05 '18 at 06:00

8

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
 <link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>

This worked for me

edited Apr 05 '18 at 06:00

Sam Piecz

117
1
3
9

answered Aug 13 '15 at 11:29

Anand Dwivedi

1,452
13
23

4

While this may work, you can't use image/png as the MIME Type - because it's incorrect considering you're using .ico – zanderwar Feb 19 '16 at 06:35
Does "worked for me" include Safari on iOS? – Matthias Jan 21 '22 at 18:39

score 5 · Answer 10 · answered Apr 29 '15 at 18:18

5

I know its older post but still posting for someone like me. This worked for me

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

put your favicon icon on root directory..

answered Apr 29 '15 at 18:18

Cyclotron3x3

2,188
23
40

score 5 · Answer 11 · answered May 09 '21 at 07:50

5

Minimal favicon without "type" attr

<link href='favicon.png' rel='icon' />

You can even omit the quotes, but not recommended in production.

answered May 09 '21 at 07:50

Timo

2,922
3
29
28

score 4 · Answer 12 · answered Mar 09 '20 at 23:46

As per OP's update, It was not showing up locally, but as per OP's update, once I uploaded it to the server, it was fine.

Since this is a simple, static html website, I have the luxury of working on it without running a local webserver.
A webserver will generally automatically serve up the favicon, if there is one, by default.

But when not running a webserver, the browser itself will not just read the directory looking for additional files, say a favicon.ico, unless it is listed in the html document.

So, while I had the following items in the head tag:

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">

I did not also include a reference for plain 'ol favicon.ico.
Even though, the favicon.ico file was included, in addition to the images listed above.

Once I added the following line:

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

It did also show up in my browser, when I viewing the local file, even when not serving it through a local server.

So icon showed up fine when it ran on the live server, but not locally.

I mention this explicitly because the favicon generator I used, kindly supplied the code, icons, manifest, and instructions. However, while it included the favicon.ico image, it did not include a <link> to that file in the code to add to the html document.
I guess that service presumes favicon.ico will automatically be served up and used by all browsers by default, so only the "alternate" versions needed to be explicitly added to the head tag.
Evidently, they don't consider that when viewing files locally (aka not serving them up locally), we aren't interested in seeing the favicon?

"A webserver will generally automatically serve up the favicon" -- technically, the browser requests it. The server doesn't just serve it without it being requested by the browser. Maybe the browser doesn't do this for `file:///` urls. — Matthias, Jan 21 '22 at 18:41

score 3 · Answer 13 · answered Jun 11 '15 at 20:06

3

as an additional note that may help someone some day.

You can not echo anything to the page before:

Hello
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>

will not load ico

<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
Hello

works fine

answered Jun 11 '15 at 20:06

bart2puck

2,432
3
27
53

3

That is because it is supposed to be in the head section of an HTML document, and is ignored by most browsers if it isn't. – Eric Sebasta Jun 25 '15 at 11:04
Yea, I just wanted to put this here in case anyone ran into a problem. My problem was the "hello" was some debug code and had me stumped for a bit. – bart2puck Jun 25 '15 at 15:09

score 2 · Answer 14 · answered Aug 03 '16 at 10:32

2

I used convert -resize 16x16 img.png favicon.ico (on linux konsole) to convert my image, and add <link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16"> to my header and everything work perfect.

answered Aug 03 '16 at 10:32

dmx

1,862
3
26
48

You need a multi-layered icon with sizes larger than 16px, for higher DPI screens and who knows what else -- mobile "install to home screen" use cases. – Matthias Jan 21 '22 at 18:43

score 1 · Answer 15 · edited May 23 '17 at 12:18

1

If you add the favicon into the root/images folder with the name favicon.ico browser will automatically understand and get it as favicon.I tested and worked. your link must be www.website.com/images/favicon.ico

For more information look this answer:

Do you have to include <link rel="icon" href="favicon.ico" type="image/x-icon" />?

edited May 23 '17 at 12:18

Community

1
1

answered Oct 02 '15 at 14:09

Sarkhan

1,281
1
11
33

Where does the `/images/` come from? You probably have a `base` element in your page. By default, favicons serve from `/`. But this is the old way; domains typically hold more than one site now. It's best to add the icon meta tag. – Matthias Jan 21 '22 at 18:45

score 1 · Answer 16 · answered Mar 27 '19 at 02:15

1

Notice that if your site is running as a subfolder ie:

http://localhost/MySite/

You will need to take that into account. If you are doing so from an ASP.NETapp all you need to do is add a ~ to the front of the URL:

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

answered Mar 27 '19 at 02:15

Serj Sagan

28,927
17
154
183

`~` is not a thing in the world of URLs. `/favicon.ico` is correct. Is ASP.net doing some rewriting of urls? Check the actual page source as served, with "Inspect Element" or "View page source". – Matthias Jan 21 '22 at 18:46
Yes, ASP.NET MVC converts a ~ to convert the physical path of the file to its actual online url. – Serj Sagan Jan 21 '22 at 23:59

score 0 · Answer 17 · answered Nov 05 '17 at 20:49

0

Note that FF fails to load an icon with a redundant // in URL like /img//favicon.png. Tested on FF 53. Chrome is OK.

answered Nov 05 '17 at 20:49

Étienne Bersac

580
6
11

1

That's not really an *answer* as much as it is a *comment*. (See "[answer]".) – ashleedawg Dec 15 '18 at 17:23

score -1 · Answer 18 · edited Apr 05 '18 at 00:50

-1

Try to use the <link rel="icon" type="image/ico" href="images/favi.ico"/>

edited Apr 05 '18 at 00:50

Sam Piecz

117
1
3
9

answered Feb 11 '17 at 05:34

subindas pm

2,668
25
18

Adding a favicon to a static HTML page

Update

18 Answers18

Usage Syntax: _{^{.ico, .gif, .png, .svg}}

File format support

Browser Implementation

Update: _{^{("more info")}}

Minimal favicon without "type" attr

Linked

Related

Adding a favicon to a static HTML page

Update

18 Answers18

Usage Syntax: .ico, .gif, .png, .svg

File format support

Browser Implementation

Update: ("more info")

Minimal favicon without "type" attr

Linked

Related

Usage Syntax: _{^{.ico, .gif, .png, .svg}}

Update: _{^{("more info")}}