我正在阅读维基百科上的Favicon页面.他们提到了Favicon的HTML 5规范:
当前的HTML5规范建议使用标记内的属性rel ="icon"sizes ="以空格分隔的图标维度列表"指定多个大小的大小图标.[ 来源 ]多种图标格式,包括容器格式,如Microsoft .ico和Macintosh .icns文件,以及可缩放矢量图形可以通过在type ="file content-type"的形式中包含图标的内容类型来提供.标签.
看看引用的文章(W3),他们展示了这个例子:
<link rel=icon href=favicon.png sizes="16x16" type="image/png">
<link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href=iphone.png sizes="57x57" type="image/png">
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
Run Code Online (Sandbox Code Playgroud)
我的问题是,任何浏览器都支持HTML 5方法吗?
注意:我知道Apple使用他们的apple-touch-icon元标记方法而不是HTML5方法.
维基百科文章声称:
但是,当用户从"工具"菜单中选择"创建应用程序快捷方式..."时,Google Chrome网络浏览器将选择与HTML标题中提供的最匹配的大小,以创建128×128像素的应用程序图标.
Internet Explorer(v9到v11)和Firefox如何处理这个问题?Chrome处理HTML Favicons的方式文章是否正确?(Chrome没有引用消息来证实这一点.)
在搜索中,除了维基百科文章之外,我无法在HTML 5 Favicon上找到任何(可信的)信息.
目前在所有目前支持它的浏览器中显示favicon的最佳方法是什么?
请包括:
哪些浏览器支持哪些图像格式.
在各种浏览器的哪些位置需要哪些行.
我想知道是否可以通过URL获取网站的favicon JavaScript.
例如,我有一个URL http://www.bbc.co.uk/,我想获得<link rel="icon" .../>meta标签中描述的favicon的路径- http://www.bbc.co.uk/favicon.ico.
我有很多网址,所以我不应该加载每个页面并搜索link标签.
有任何想法吗 ?
通常,以多种尺寸提供favicon.ico被认为是一种很好的做法,因为这种方式在制作快捷方式或固定网站时看起来更好(IE9).虽然这样做会减少10倍,但这会导致网站加载速度变慢(在我的情况下,16x16的图标是1kb,16,32,64 = 30kb).
Facebook和雅虎等网站默认提供16x16的图标,大小不超过1kb,但是当您固定这些网站时,使用的图像大小合适.我假设只有在需要时才会加载更大的图片,从而解决了两难问题.我没有成功地弄清楚这些网站是如何做到这一点的.有人知道吗?
我希望获得有关在Web浏览器上与站点URL一起显示的图标的信息.这是一些浏览器特有的功能吗?我们在哪里指定图标源,即它是否在网页本身的某个标签中?
我之前尝试在网站上添加一个favicon,并寻找一种更好的方法来实现它,而不是favicon.ico在网站的根目录中转储文件.
我找到了这个不错的小指南:如何添加Favicon.但是,首选方法在IE(7)中不起作用,第二种方法是老式的方式(我自己决定使用).
是否有第三种方法适用于所有最流行的浏览器?