如何在HTML中將圖像放入網址中？

Question

如何將圖像放入HTML中的url？地址欄左側。

Answer 1

看看維基百科的條目圖標 - http://en.wikipedia.org/wiki/Favicon

這個格式是一個.ico文件，你需要把這個在你的網絡服務器的根文件夾。

對於更高級的場景中，你也可以有每頁不同的圖標使用：

<link rel="shortcut icon" href="http://www.example.com/myicon.ico" /> 

Answer 2

這實際上是叫做圖標。只需創建您的16x16像素圖標，將其命名爲「favicon.ico」並將其放入您的文檔根目錄。

Answer 3

只需將名稱爲facicon.ico的文件複製到您的網站根目錄並顯示圖像即可。

Answer 4

我記得自己瘋狂地試圖弄清楚如何製作一個圖標文件類型。要創建一個圖標文件（.ico擴展），你可以使用一個圖形程序導出ico（我更喜歡Fireworks），或者使用一個帶有JPG，PNG或GIF輸入的在線.ico發生器。 16x16是您想要使用的最小的.ico文件大小。您不需要將favicon.ico放在根目錄中，儘管這是最常見的。使用鏈接標籤，您還可以使用相對鏈接將文件存儲在不同的文件夾中。如果瀏覽器支持PNG作爲收藏夾/快捷方式圖標，該文件可以命名爲logo.ico或logo.png。 Internet Explorer只支持.ico，所以每個人都使用.ico。例如與非根目錄：

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

Generate a favicon.ico file from a JPG, PNG or GIF

Answer 5

簡短的回答，簡單的解決方案

設計ICO格式的16×16的文件，把它favicon.ico，並把它放在你的網站的根目錄（例如http://mywebsite.com/favicon.ico）。

您的圖標在經典桌面環境（Windows + IE，Windows + Chrome等）中看起來不錯。

長答案，複雜（或不）解決方案

真正的答案是複雜的。第一個要解決的問題是PC瀏覽器標籤中的小圖標。這很容易完成，請參閱上面的第一個解決方案。然後，你有很多額外的情況來考慮：

• iOS的網頁剪輯：iPhone和iPad用戶可以添加你的網站他們的主屏幕。你需要特殊的照片。 https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
• Android：Android平板電腦和手機用戶可以將您的網站添加到他們最喜歡的主屏幕。再次，你需要額外的照片。
• Windows 8 & IE10/IE11：用戶現在可以將您的網站固定到他們的桌面。是的，這裏還有其他一些照片！ http://msdn.microsoft.com/en-us/library/ie/dn255024(v=vs.85).aspx#msapplication-square70x70logo
• Google TV：又一張照片！ https://developers.google.com/tv/web/docs/design_for_tv#favicons
• 等等，等等

你可以看一下這個complete favicon picture list。

如果你想覆蓋一切，我建議你使用這個favicon generator。它一次創建所有這些圖片，並且還創建相應的HTML代碼。充分披露：我是本網站的作者。