[html] Adding a favicon to a static HTML page

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.

This question is related to html static favicon

The answer is


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.


<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


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.


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?


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


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' />

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

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


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.


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


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 section of the document to specify the file format and file name and 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     Yes     
   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.

img See the full article at the source on Wikipedia.


Update: ("more info")


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


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


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

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

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.


Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to static

What is the equivalent of Java static methods in Kotlin? Creating a static class with no instances Static vs class functions/variables in Swift classes? Call static methods from regular ES6 class methods What is the difference between static func and class func in Swift? An object reference is required to access a non-static member Mocking static methods with Mockito @Autowired and static method The static keyword and its various uses in C++ Non-Static method cannot be referenced from a static context with methods and variables

Examples related to favicon

Add Favicon with React and Webpack What is the best practice for creating a favicon on a web site? HTML 5 Favicon - Support? How can I get a favicon to show up in my django app? How to set-up a favicon? Favicon not showing up in Google Chrome Add image in title bar How to set custom favicon in Express? Why does my favicon not show up? Correct MIME Type for favicon.ico?