Adding a favicon to a static HTML page

html static favicon
TheLegend picture TheLegend · Mar 30, 2012 · Viewed 1.6M times · Source

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.

Answer

Hazy McGee picture Hazy McGee · Mar 30, 2012

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

Related questions

Repeat same HTML code in several pages

I have a really hard time searching for this, because I have no idea how to call it. I'll try to describe the process I want, and see if any of you know such an editor. I have a website …

Read More
Is it possible to serve a static html page at the root of a django project?

I have a django app hosted on pyhtonanywhere. The app resides at username.pythonanywhere.com/MyApp. I would like to serve a static html page at username.pythonanywhere.com. Is this possible? Essentially it would serve as an index linking …

Read More
Are fluid websites worth making anymore?

I'm making a website now and I am trying to decide if I should make it fluid or not. Fixed width websites are much easier to make and also much easier to make them appear consistent. To be honest though, …

Read More