將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" 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. 我正在使用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" />

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

#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圖標放在根目錄中..

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章