天天看點

将favicon添加到靜态HTML頁面

本文翻譯自: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.

我有幾個靜态頁面隻是純HTML,我們在伺服器出現故障時顯示。

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?

我如何将我制作的圖示(它是16x16px并且它與HTML檔案位于同一目錄中;它稱為favicon.ico)作為“标簽”圖示?

I have read up on Wikipedia and looked at a few tutorials and have implemented the following:

我已經閱讀了維基百科并檢視了一些教程并實作了以下内容:
<link rel="icon" href="favicon.ico" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
           

But it still doesn't want to work.

但它仍然不想工作。

I am using Chrome to test the sites.

我正在使用Chrome來測試這些網站。

According to Wikipedia .ico is the best picture format that runs on all browser types.

根據維基百科.ico是所有浏覽器類型上運作的最佳圖檔格式。

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.

隻需嘗試将其推送到伺服器并重新整理緩存,它應該可以正常工作。

#1樓

參考:https://stackoom.com/question/fipP/将favicon添加到靜态HTML頁面

#2樓

If the favicon is a png type image, it'll not work in older versions of Chrome.

如果favicon是png類型的圖檔,則它在舊版本的Chrome中無法使用。

However it'll work just fine in FireFox.

但是它在FireFox中運作得很好。

Also, don't forget to clear your browser cache while working on such things.

此外,在處理此類操作時,請不要忘記清除浏覽器緩存。

Many a times, code is just fine, but cache is the real culprit.

很多時候,代碼很好,但緩存是真正的罪魁禍首。

#3樓

Actually, to make your favicon work in all browsers, you must have more than 10 images in the correct sizes and formats.

實際上,要使您的favicon在所有浏覽器中都能正常工作,您必須擁有10個以上正确大小和格式的圖像。

I created an App ( faviconit.com ) so people don´t have to create all these images and the correct tags by hand.

我建立了一個App( faviconit.com ),是以人們不必手動建立所有這些圖像和正确的标簽。

Hope you like it.

希望你喜歡。

#4樓

以下為我工作......

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  />
           

#5樓

As recommended by W3.org , you can use the

rel

attribute to achieve this.

根據W3.org的建議 ,您可以使用

rel

屬性來實作此目的。

Example:

例:
<head>
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png" target="_blank" rel="external nofollow" >
...
           

#6樓

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

将您的favicon圖示放在根目錄中..