目前，使图标图标在所有支持图标图标的浏览器中显示的最佳方法是什么？

83

当前使图标图标显示在当前支持该图标的所有浏览器中的最佳方法是什么？

请包括：

  1. 哪些浏览器支持哪些图像格式。

  2. 各种浏览器在何处需要哪些行。

html  standards  favicon 
— 弗雷德
source
1
也可能值得在这里包括iPhone的“图标集”。也就是说，如果用户选择将您的网站添加到其主屏幕。在这种情况下使用的代码如下：<link rel =“ apple-touch-icon” href =“ touch.png” />尺寸应为57x57像素。或者，您可以省略链接标记，而只需在网站的根目录中放置一个名为“ apple-touch-icon.png”的文件。
— 不同的
在阅读时，请阅读以下内容：mathiasbynens.be/notes/touch-icons
— Zach Lysobey 2011年
请注意，iPad和视网膜iPhone显示屏需要更大的图标。见苹果的指导方针：developer.apple.com/library/IOs/#documentation/...
— 麦克Ottum

Answers:

108

我在这里系腰带支撑。

我以.ico和.png格式创建了一个32x32图标，分别称为favicon.ico和favicon.png。除非您使用的是旧版浏览器，否则图标名称并不重要。

  1. 放置favicon.ico在站点根目录中以支持较旧的浏览器（可选，仅与较旧的浏览器相关。
  2. 将favicon.png放在我的图像子目录中（只是为了保持整洁）。
  3. 在<head>元素内添加以下HTML 。
<link rel =“ icon” href =“ / images / favicon.png” type =“ image / png” />
<link rel =“ shortcut icon” href =“ / favicon.ico” />

请注意：

  • .ico文件的MIME类型已由IANA注册为image / vnd.microsoft.icon 。
  • Internet Explorer将忽略type快捷图标关系的属性，这是唯一支持这种关系的浏览器，不需要提供它。

参考

— 布莱恩·马修斯
source
2
好吧，我正在经历“微软让我不安”的一天。尽管它显示了stackoverflow站点的图标，但我无法在Internet Explorer中使用它。还有其他设置会影响此设置吗，例如doctype？
— belugabob
1
仅供参考-我找到了答案。如果通过localhost：8080 / index.html引用该站点，则该站点不起作用-如果使用计算机的实际名称（machineName：8080 / index.html），则所有功能均会按预期运行。我什至无法开始理解这种行为-有人愿意尝试吗？
— belugabob
2
更新-行为是由浏览器缓存图标引起的。如果您对丢失缓存感到满意，清除临时Internet文件将解决此问题。
— belugabob
2
将链接的IE版本放在IE条件注释中会更整洁吗？
— EoghanM
9
32x32 ？？16x16不是标准吗？
— Eduardo Molteni 2009年
10

我使用.ico格式，并将以下两行放在<head>元素内：

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
— 约翰·托普利
source
6

为了同时支持平板电脑和智能手机的触摸图标，我更喜欢HTML5Boilerplate的方法

有关触摸图标的更多信息，请参见本文。

使用浏览器支持的当前状态，您甚至不必在文档中添加网站图标的HTML标签。浏览器将自动搜索文件列表，请参见适用于iOS的以下示例：

如果在HTML中未指定图标，iOS Safari将在网站的根目录中搜索带有apple-touch-icon或apple-touch-icon前置前缀的图标。例如，如果设备的适当图标尺寸为57×57像素，iOS将按以下顺序搜索文件名：

  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png

我的建议是不要在您的文档中包含收藏夹图标，但要在根网站中准备好文件列表：

  • apple-touch-icon-114x114-precomposed.png
  • apple-touch-icon-144x144-precomposed.png
  • apple-touch-icon-57x57-precomposed.png
  • apple-touch-icon-72x72-precomposed.png
  • apple-touch-icon-precomposed.png
  • apple-touch-icon.png (57px*57px)
  • favicon.ico HiDPI (32x32px)

当您从html5boilerplate.com下载模板时，这些模板均已包含在内，您只需要用自己的图标替换它们即可。

— 威廉·德·威特
source
第一个链接已过时，现在需要转到github.com/h5bp/html5-boilerplate/blob/master/src/doc/…。我会自行编辑，但字符变化不够：/感谢您的回答！
— 布伦丹2015年
3

Favicon必须是.ico文件，才能在所有浏览器上正常工作。

现代浏览器还支持PNG和GIF图像。

我发现通常，最简单的创建方法是使用免费提供的Web服务，例如favicon.cc。

— 安蒂·基萨涅涅
source
3

还有一个站点，您可以在其中查看如何制作任何页面的图标

getfavicon.org

在这里，您可以看到有关制作图标，图像类型和分辨率的教程，太好了！

不再运行。
— 罗曼·斯塔科夫
2

有一个favicon.*在你的根目录由大多数浏览器自动检测。您可以使用以下方法确保检测到它：

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

我个人使用.png图片，但大多数格式都可以使用。

— 罗斯
source
不，它不是“ favicon。*”，只有极少数格式可用：ico，png，gif，jpeg和SVG。请参阅en.wikipedia.org/wiki/Favicon#File_format_support。
— WhyNotHugo 2013年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.