Adding a favicon to a static HTML page

2019-01-03 07:34发布

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

16条回答
老娘就宠你
2楼-- · 2019-01-03 07:57

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

查看更多
Luminary・发光体
3楼-- · 2019-01-03 07:58

You can make a 16x16 .png and then use one of the following snippets between the <head> tags of your static HTML documents:

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>
查看更多
爷、活的狠高调
4楼-- · 2019-01-03 07:59

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' />
查看更多
Deceive 欺骗
5楼-- · 2019-01-03 07:59

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

查看更多
叛逆
6楼-- · 2019-01-03 08:00
<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"/>
查看更多
祖国的老花朵
7楼-- · 2019-01-03 08:01
<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

查看更多
登录 后发表回答