当前,使图标图标显示在所有支持图标图标的浏览器中的最佳方法是什么?
时间:2020-03-05 18:45:44 来源:igfitidea点击:
目前,使图标图标显示在当前支持该图标的所有浏览器中的最佳方法是什么?
请包括:
- 哪些浏览器支持哪些图像格式。
- 各种浏览器在何处需要哪些行。
解决方案
回答
大多数浏览器会自动检测到根目录中有一个" favicon。*"。我们可以使用以下方法确保检测到它:
<link rel="icon" type="image/png" href="/path/image.png" />
我个人使用.png图片,但大多数格式都可以使用。
回答
维基百科来营救
回答
我使用.ico格式,并将以下两行放在<head>
元素中:
<link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
回答
Favicon必须是.ico文件,才能在所有浏览器上正常工作。
现代浏览器还支持PNG和GIF图像。
我发现通常,最简单的创建方法是使用免费提供的Web服务,例如favicon.cc。
回答
警告:IE6无法正确处理PNG。
回答
我在这里系腰带和矫正方法。
我以.ico和.png格式创建了一个32x32图标,分别称为favicon.ico
和favicon.png
。除非我们使用的是较旧的浏览器,否则图标名称并不重要。
- 将
favicon.ico
放在站点根目录以支持较旧的浏览器(可选,仅与较旧的浏览器相关。 - 将favicon.png放在我的图像子目录中(只是为了保持整洁)。
- 在
<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
属性,这是唯一支持这种关系的浏览器,无需提供。
参考
回答
还有一个站点,我们可以在其中检查任何页面的图标的制作方式
getfavicon.org
在这里,我们可以看到有关制作图标,图像类型和分辨率的教程,太好了!