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.
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.
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".
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.
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.
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.
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"/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With