【问题标题】：How do I put image in url in HTML?如何将图像放在 HTML 中的 url 中？
【发布时间】：2016-12-24 01:50:47
【问题描述】：

如何在 HTML 的 url 中放置图像？就在地址栏的左边。

【问题讨论】：

您正在寻找一种叫做“favicon”的东西。

【解决方案1】：

查看 wikipedia entry for favicon - http://en.wikipedia.org/wiki/Favicon

此格式为 .ico 文件，您需要将其放在网络服务器的根文件夹中。

对于更高级的场景，您还可以使用以下方法为每个页面设置不同的图标：

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

【讨论】：

【解决方案2】：

只需将名称为 facicon.ico 的文件复制到您的网站根目录中，图像就会出现。

【讨论】：

【解决方案3】：

这实际上称为网站图标。只需创建您的 16x16 像素图标，将其命名为“favicon.ico”并将其放入您的文档根目录。

【讨论】：

【解决方案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

【讨论】：

【解决方案5】：

简短的回答，简单的解决方案

设计一个 ICO 格式的 16x16 文件，将其命名为 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 代码。完全披露：我是这个网站的作者。

【讨论】：