Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 334
TheLegend Avatar asked Mar 30 '12 13:03

TheLegend


People also ask

How do I add a favicon to my HTML website?

To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is "favicon.ico".

Which HTML tag is used to set the favicon?

A favicon is added in the <head> tag of a web page. The <head> tag is where all the so-called “meta” information goes. Meta information is details about the web page itself, such as the title of the page.

Can I add favicon in CSS?

You can't set a favicon from CSS - if you want to do this explicitly you have to do it in the markup as you described. Most browsers will, however, look for a favicon. ico file on the root of the web site - so if you access http://example.com most browsers will look for http://example.com/favicon.ico automatically.

Why favicon is not working in HTML?

When you add a favicon to your site, it may not show up since your browser has 'saved' your site as one without a favicon. You need to clear the cache in your browser or use a different browser.


1 Answers

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"/> 
like image 134
Hazy McGee Avatar answered Oct 09 '22 21:10

Hazy McGee