HTML圖標將不會顯示在谷歌瀏覽器

23

既然你已經領先於您的href /，你引用，將在根文件夾中的文件。如果您的網頁位於計算機的某個文件夾中，而不是從本地網絡服務器提供，那麼領先的/將告訴瀏覽器查看文件系統的根文件夾。所以瀏覽器期望該文件在C:/favicon.ico或類似的，這可能不是你所期望的。

如果您的favicon.ico位於與網頁相同的文件夾中，您可以刪除前導斜槓，並且該圖標應該可見。

<link rel="shortcut icon" href="favicon.ico" />

更新：

作爲調試選項，您可以嘗試添加你知道作品的標籤。我借用了StackOverflow源代碼片段。試着用這個替換你的鏈接標籤，看看你的SO徽標是否是你的圖標。

<link rel="shortcut icon" 
     href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">

更新2：

看來，有a bug reported鉻其中，如果該文件是本地加載，而無需通過web服務器被服務不顯示圖標。

來源

2012-12-08 18:23:53

+0

這也行不通。 – Nick

+2

@Nick如果您打開開發人員工具（按F12），請轉到網絡選項卡，然後重新加載您的頁面。您現在將看到所有加載的資源。如果你尋找你的favicon.ico，它在狀態欄中說了什麼。你得到200,404還是什麼？ –

+0

它顯示的是我的網站名稱和它下面的本地鏈接。我看到所有的列，但他們都顯示id的頁面狀態本身。 – Nick

-1

您的html對於初學者來說是完全錯誤的，在頭部不應該有div，也不應該在您的身體部分之後。我建議你先開始的網站圖標等上班前到正確的HTML

來源

2012-12-08 18:24:02

+2

如果下選民評論我的答案爲什麼是錯誤的，那會很好。 –

+4

有效的點，但這不能回答他的問題。 – MikeSmithDev

+0

我沒有在頭標籤中的div。但你說得對，我對Div的事情也很陌生。 – Nick

2

它看起來並不像Chrome可讓您以顯示地址欄圖標...

http://en.wikipedia.org/wiki/Favicon#Use_of_favicon

我我們也看到它是這樣做的。不知道它是否會有所作爲。

<link rel="icon" href="/favicon.ico" />

來源

2012-12-08 18:42:19 Blake

+5

Chrome不會在地址欄中顯示收藏圖標，但會在標題旁的標籤上顯示它。我相信這是OP要求的，因爲他說他可以在其他頁面上看到它。 –

+1

是的，我正在尋找標籤中的圖標。 – Nick

+0

哎呀，我的壞，讀得有點太快。如果你100％確定你的圖像被正確引用，那麼它應該工作......你有多行代碼來指定一個favicon？我看過幾個人，每個人都爲不同的瀏覽器格式化，但Chrome瀏覽器會閱讀第一行，並忽略其他瀏覽器... – Blake

0

這個技巧的工作原理：在頁眉或母版頁添加此腳本示例

var link = document.createElement('link'); 
    link.type = 'image/x-icon'; 
    link.rel = 'shortcut icon'; 
    link.href = '/favicon.png';

，將被緩存。這不是最佳的，但它的工作原理。

來源

2014-09-25 08:29:09 Hima

+1

如果'/ favicon.png'確實是一個PNG圖像，那麼你應該用'image/png' mime-type（'type'屬性的值）來響應，而不是'image/x- icon'。如果這是行得通的，那是因爲服務器（或瀏覽器）重寫了這個。但是，不建議使用JavaScript進行設置，而不是在HTML中進行硬編碼。 – DocRoot

0

該路徑必須通過URI（完整）。

像：http://example.com/favicon.png

所以你的情況：

<!DOCTYPE html> 
<html> 
    <head profile="http://www.w3.org/2005/10/profile"> 
     <title></title> 
     <link rel="shortcut icon" 
       type="image/png" 
       href=" http://example.com/favicon.png" /> 
    </head> 
    <body> 
    </body> 
</html>

編號： http://www.w3.org/2005/10/howto-favicon

來源

2015-04-09 12:25:29 macm

2

1）清除chache。http://support.google.com/chrome/bin/answer.py?hl=en&answer=95582並測試另一個瀏覽器，讓我們說safari。你是如何導入favicon的？

2）你應該如何添加：

普通圖標：

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

PNG/GIF圖標：

<link rel="icon" type="image/gif" href="favicon.gif" /> 
<link rel="icon" type="image/png" href="favicon.png" />

3）另一件事可能是問題鉻能't display favicons，如果它是本地的（沒有上傳到網絡服務器）。

4）嘗試將它從favicon.{whatever}重命名爲{yourfaviconname}.{whatever}但我建議你仍然有正常的圖標。這已經解決了我在IE上的問題。

5）找到另一種解決方案，這很好！我只是將我的圖標爲Base64編碼的圖像直接像這樣，在標籤內：這裏使用的這個網頁，這個

<link href="data:image/x-icon;base64,AAABAAIAEBAAAAEAIABoBAAAJgAAACAgAAABACAAqBAAAI4EAAAoAAAAEAAAACAAAAABACAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AIaDgv+Gg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv////8A////AP///wD///8A////AP///wCGg4L/////AP///wD///8A////AP///wD///8A////AP///wCGg4L/////AP///wD///8A////AP///wD///8AhoOC/////wCGg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv////8AhoOC/////wD///8A////AP///wD///8A////AIaDgv////8A////AP///wD///8A////AP///wD///8A////AIaDgv////8A////AP///wD///8A////AP///wCGg4L/////AHCMqP9wjKj/cIyo/3CMqP9wjKj/cIyo/////wCGg4L/////AP///wD///8A////AP///wD///8AhoOC/////wBTlsIAU5bCAFOWwgBTlsIAU5bCM1OWwnP///8AhoOC/////wD///8A////AP///wD///8A////AP///wD///8AU5bCBlOWwndTlsLHU5bC+FOWwv1TlsLR////AP///wD///8A////AP///wD///8A////AP///wD///8A////AFOWwvtTlsLuU5bCu1OWwlc2k9cANpPXqjaT19H///8A////AP///wD///8A////AP///wD///8A////AP///wBTlsIGNpPXADaT1wA2k9dINpPX8TaT1+40ktpDH4r2tB+K9hL///8A////AP///wD///8A////AP///wD///8A////ADaT1wY2k9e7NpPX/TaT16AfivYGH4r23R+K9u4tg/WQLoL1mP///wD///8A////AP///wD///8A////AP///wA2k9fuNpPX5zaT1zMfivYGH4r23R+K9uwjiPYXLoL1+S6C9W7///8A////AP///wD///8A////AP///wD///8ANpPXLjaT1wAfivYGH4r22x+K9usfivYSLoL1oC6C9esugvUA////AP///wD///8A////AP///wD///8A////AP///wD///8AH4r2zx+K9usfivYSLoL1DC6C9fwugvVXLoL1AP///wD///8A////AP///wD///8A////AP///wD///8A////AB+K9kgfivYMH4r2AC6C9bEugvXhLoL1AC6C9QD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAugvXyLoL1SC6C9QAugvUA////AP//AADgBwAA7/cAAOgXAADv9wAA6BcAAO+XAAD4HwAA+E8AAPsDAAD8AQAA/AEAAP0DAAD/AwAA/ycAAP/nAAAoAAAAIAAAAEAAAAABACAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/////wD///8AhISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP8AAAAA////AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/////AP///wCEhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/wAAAAD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP/4+vsA4ujuAOLo7gDi6O4A4ujuAN3k6wDZ4OgA2eDoANng6ADZ4OgA2eDoANng6ADW3uYAJS84APj6+wCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/9Xd5QBwjKgAcIyoRnCMqGRwjKhxcIyogHCMqI9wjKidcIyoq3CMqLlwjKjHcIyo1HCMqLhogpwA/f7+AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/xtHcAHCMqABwjKjAcIyo/3CMqP9wjKj/cIyo/3CMqP9wjKj/cIyo/3CMqP9wjKj/cIyo4EdZawD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP+2xNMAcIyoAHCMqJhwjKjPcIyowHCMqLFwjKijcoymlXSMpIh0jKR6co2mbG+OqGFqj61zXZO4AeXv9gCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/6i5ygDF0dwAIiozACQyPQAoP1AALlBmADhlggBblLkGVJbBPFOWwnxTlsK5U5bC9FOWwv9TlsIp3erzAISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAALztHAAAAAAAuU2sAU5bCClOWwkNTlsKAU5bCwFOWwvhTlsL/U5bC/1OWwv9TlsL/U5bC/ViVvVcXOFAAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAALDhEALVFoAFOWwjpTlsL6U5bC/1OWwv9TlsL/U5bC/1OWwvxTlsLIV5W+i2CRs0xHi71TKYzUnyuM0gIJHi4AAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAACtNZABTlsIAU5bCD1OWwv1TlsL6U5bCxFOWwoRVlsBHZJKwDCNObAA8icJAKYzUwimM1P8pjNT/KYzUWCaCxgALLUsAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAApS2EAU5bCAFOWwgBTlsIAU5bCNVOWwgg+cJEAIT1QABU/XQA1isg4KYzUuymM1P8pjNT/KYzU/ymM1LAti9E0JYvmDhdouAAAAAAAAAAAAP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AFyk1AE+PuQBTlsIAU5bCAER7nwAmRVoADBojABRFaQAwi80xKYzUsymM1P8pjNT/KYzU/ymM1LgsjNE2MovXFB+K9MUfivbBH4r2BgcdNAARQH8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAQIDABIgKgAPGiIABRMcABdQeQAti9AqKYzUrCmM1P8pjNT/KYzU/ymM1MAqjNM9HmqmACWK7SIfivbZH4r2/x+K9vsuiudAFE2YACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAABhQfABtejgAoitEAKYzUACmM1JQpjNT/KYzU/ymM1MgpjNREH2mgABlosQAfivY0H4r26R+K9v8fivbyKIrtR0CB1SggevTQIHr0Nv///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAACBwsAJX2+ACmM1AApjNQAKYzUGSmM1MYpjNRMInWxABNHdQAcfuEAH4r2Sx+K9vUfivb/H4r25iGK9DE2gt4EIHr0yyB69P8gevTQ////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAOMUsAKYzUACmM1AApjNQAJX6/ABE7WgAUWJwAH4r2AB+K9mYfivb9H4r2/x+K9tYfivYfG27RACB69HsgevT/IHr0+yB69DL///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAAfaJ4AJ4XKABVGagAKKkoAG3raAB+K9gEfivaEH4r2/x+K9v8fivbCH4r2EB133wAgevQsIHr0+SB69P8gevSAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAAAAAAAAAAAAAUSGwAFERwAElCOAB+J9QAfivYAH4r2lx+K9v8fivb/H4r2qR+K9gYefuoAIHr0BSB69M4gevT/IHr00CB69AUgevQA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAkqSgAfivYAH4r2AB+K9gAfivZLH4r2/R+K9osfivYBH4PwACB69AAgevSAIHr0/yB69PkgevQwIHr0ACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAAAAAAAEEiAAB+K9gAfivYAH4r2AB+K9gAfivYsH4r2AB+G8wAge/QAIHr0MCB69PsgevT/IHr0eyB69AAgevQAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAXZrYAH4r2AB+K9gAfivYAH4r2AB+K9gAfifUAIHz0ACB69AcgevTQIHr0/yB69MwgevQEIHr0ACB69AAgevQA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAAAAAAAAIDAB6E6gAfivYAH4r2AB+K9gAfivYAH4r2ACB+9QAgevQAIHr0fCB69P8gevT5IHr0LCB69AAgevQAIHr0ACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAABBAcAEUqDAB6E6wAfivYAH4r2AB+K9gAggPUAIHr0ACB69AAgevQTIHr0qCB69HYgevQAIHr0ACB69AAgevQAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP////////////////wAAH/8AAB//P/+f/z//n/8wAZ//MAGf/z//n/8wAZ//MAGf/zAAn/8/gJ//+AD///AAf//wEH//+cA///8AH//8BB///BgH//xwB///4If//4EP//+CD///hh///9w////4P///+H////j////////////" rel="icon" type="image/x-icon" />

：http://www.motobit.com/util/base64-decoder-encoder.asp

來源

2015-04-11 18:59:14 DominikAngerer

11

一個共同的問題，即預期的是緩存時的圖標會顯示不出來，如果您例如讀取的.htaccess： ExpiresByType image/x-icon "access plus 1 month"

然後只需一個隨機值添加到您的收藏夾圖標參考： <link rel="shortcut icon" href="https://mysire.com/favicon.ico?r=31241" type="image/x-icon" />

即使在高速緩存的情況下，我也可以每次工作。

來源

2015-04-21 05:40:38 pokeybit

+1

這個解決方案爲我釘上了它。謝謝。 – zipzit

+0

這個！我一直懷疑，直到我嘗試。 –

+0

heh。 Chrome甚至沒有嘗試加載我的圖標（沒有404，在開發控制檯沒有網絡請求）。然後我加入了？v = 1並轟隆！完成。謝謝！ – REJH

10

Chrome瀏覽器不顯示favicon的另一個原因是，它仍然記得有問題的網站沒有收藏圖標或收藏圖標配置不正確。

你會想要徹底清除圖標緩存：

退出所有運行Chrome進程。

刪除用戶數據文件夾中的Favicons文件。例如：

C:\Users\me\AppData\Local\Google\Chrome\User Data\Default\Favicons

這無法通過清除瀏覽器緩存，因爲它不影響Favicons容器來解決。

還要注意的是，相反的是你可能會read online，請求的favicon資源在DevTools的網絡面板中顯示不。在非常罕見的情況下，可能會出現這樣的請求，但這種情況極不可能，DevTools也不會幫助您解決您的favicon問題。

來源

2016-08-16 09:50:14

+0

是的;謝謝！我可以看到使用fiddler（代理），它沒有請求一個favicon.ico，但刪除此文件後，它做到了。謝謝！ – Grezzo

6

我發現（在Chrome 56，OSX上）favicon狀態似乎是爲瀏覽器生命週期而緩存的，所以如果一個favicon沒有被加載，直到重啓Chrome之後纔會有。它看起來並沒有顯示在開發工具的「應用程序」選項卡中，也沒有被硬重載或「清除站點數據」清除。

來源

2017-04-02 21:43:52 Rich

+0

謝謝，豐富！這對我有用！ –

0

這個問題讓我瘋狂！該解決方案是很容易實際上，只需添加下面的標題標籤：

<link rel="profile" href="http://gmpg.org/xfn/11">

例如：

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <link rel="profile" href="http://gmpg.org/xfn/11"> 
     <link rel="icon" href="/favicon.ico" />

來源

2017-08-21 14:28:49 Mike

HTML圖標將不會顯示在谷歌瀏覽器

回答

相關問題