Adding a Favicon to a Static Html Page

David Miller
David Miller
• • 9 min read

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

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.

4

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

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

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.

4

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="">                                                    
                                                                                            
  <link rel="icon"                         Yes    Yes       Yes      9     Yes     Yes     
   type="image/vnd.microsoft.icon"                                                          
   href="">                                                     
                                                                                            
  <link rel="icon" type="image/x-icon"     Yes    Yes       Yes      9     Yes     Yes     
   href="">                                                     
                                                                                            
  <link rel="icon"                         Yes    Yes       Yes      11    Yes     Yes     
   href="">                                                     
                                                                                            
  <link rel="icon" type="image/gif"        Yes    Yes       Yes      11    Yes     Yes     
   href="">                                                     
                                                                                            
  <link rel="icon" type="image/png"        Yes    Yes       Yes      11    Yes     Yes     
   href="">                                                     
                                                                                            
  <link rel="icon" type="image/svg+xml"    Yes    Yes       Yes      Yes   Yes     No      
   href="">
David Miller

David Miller

Executive Financial & Market Analyst
Twitter Linkedin Medium

David Miller brings 15 years of experience in global economics, personal finance strategy, and market dynamics. He specializes in turning complex economic trends into actionable insights for everyday readers.