如何将图像放入HTML中的URL？

Question

如何将图片放入HTML中的网址？就在地址栏的左边。

Answer 1

查看favicon的维基百科条目 - http://en.wikipedia.org/wiki/Favicon

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

对于更高级的方案，您还可以使用以下方法在每页上显示不同的图标：

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

Answer 2

只需在您的网站根目录中复制名为favicon.ico的文件，即可显示图像。

Answer 3

实际上这被称为favicon。只需创建16x16像素的图标，将其命名为“favicon.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格式的16x16文件，将其命名为favicon.ico并将其放在网站的根目录下（例如http://mywebsite.com/favicon.ico）。

您的favicon在经典桌面环境（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＆amp; 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代码。完全披露：我是这个网站的作者。