标签: favicon

在HTML5文档中,您推荐哪种favicon格式？为什么？我希望IE7和所有现代浏览器都支持它.

另外,使用.png时,是否需要指定类型(type ="image/png")？

我的head标签中没有包含以下代码行,但我的favicon仍然出现在我的浏览器中:

<link rel="icon" href="favicon.ico" type="image/x-icon" />

包含它的目的是什么？

我正在阅读维基百科上的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">

我的问题是,任何浏览器都支持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.ico？是否有任何理由为favicon.ico添加链接标记？

<link rel="shortcut icon" href="/favicon.ico">

我的猜测是,如果您决定使用GIF或PNG,则只需将其包含在HTML文档中...

根据互联网号码分配机构(IANA),所有.ico文件都属于MIME类型image/vnd.microsoft.icon.(来源)

例如 <link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" />

然而,精明的互联网大师,保罗爱尔兰,声称这是错误的,它实际上是image/x-icon.(来源)

例如 <link rel="icon" type="image/x-icon" href="favicon.ico" />

我知道你可以逃避不包括.ico文件的"类型",但如果你打算包括一个,它应该是什么？将其作为官方IANA类型提供服务确实存在任何问题吗？

我最近开始在Node.js工作,在app.js文件中有这一行:

app.use(express.favicon());

现在,我如何设置自己的自定义favicon.ico？

我只想删除favicon.ico我的staticfiles目录,然后让它出现在我的应用程序中.

我怎么能做到这一点？

我已将favicon.ico文件放在我的staticfiles目录中,但它没有显示,我在日志中看到了这个:

127.0.0.1 - - [21/Feb/2014 10:10:53] "GET /favicon.ico HTTP/1.1" 404 -

如果我去http://localhost:8000/static/favicon.ico,我可以看到图标.

我已经自己制作了一个书签,它的功能很好,但是当添加到Opera或Firefox的工具栏中时,它只需要浏览器的默认书签图标(分别是地球仪和星形).我的网站有一个图标,窗口,标签甚至[网站]书签都使用我指定的图标.只是不是我的书签.

如何编写我的网站或书签,以便书签也获得图标？

我知道用户可以使用各种手动hackery技术来设置favicon,但这些都是不合需要的解决方案.

我有一个没有出现在Chrome中的图标(我不确定其他浏览器,因为我只使用Chrome)但奇怪的是,如果我在URL栏中输入图标的路径,它会显示出来!

为什么不出现图标？

我正试图了解Favicons,Touch图标和现在的Tile图标所需的所有这些不同尺寸和格式.

我已经阅读了这篇文章:http: //www.jonathantneal.com/blog/understand-the-favicon 但我仍然有点朦胧,确切地说在所有设备和浏览器上看起来相当不错> = IE8 .

我想我应该创建以下内容:

ICO
favicon.ico(32x32)

PNG
favicon.png(96x96)

Tile Icon
tileicon.png(144x144)

Apple Touch图标
apple-touch-icon-precomposed.png(152x152)
基于此https://github.com/h5bp/html5-boilerplate/issues/1367

...然后使用此代码为他们服务？

<link rel="apple-touch-icon" href="path/to/touchicon.png">
<link rel="icon" href="path/to/favicon.png">
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- or, set /favicon.ico for IE10 win -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">

我错过了什么吗？

我不清楚这是否会涵盖IE 10？