Ved*_*kar 6 html javascript favicon
我正在读一篇文章:
据他们说,如果你需要favicon用于各种目的,你需要为每个目的创建不同的(对于WIN8中的图块,对于Opera和Chrome中的快速拨号).
好的,没关系,我仍然使用16X16 .ico文件,我认为它适用于优化目的.
但是现在阅读完这些文章之后,我会遇到各种各样的问题(假设我使用photoshop为各种目的创建了各种图标):
- 如何检测应该向浏览器提供哪个图标(如何检测该浏览器要求favicon在地址栏中显示它？还是要保存为磁贴？或者用于快速拨号？)
- 如何在不损失连接速度的情况下将该特定图标提供给浏览器,因为图标大小？
- 为了指定的目的,html应该在html(文件)中添加()代码行？
目前我用16X16图标:
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/><!-- IE8 -->
- 通过加载index.html页面上的所有图标,浏览器可以为所有子页面缓存它们吗？(将所有图标放在站点的根目录中？)
- 但是这会通过增加index页面本身的加载时间来影响网站的性能.
那么,无论如何都要检测需要favicon的目的,然后动态地(JavaScript例如使用)服务它,而不会失去页面加载的速度？另外如何拥有一个faviconfor chromes webstore？(即什么行的(html)代码).
希望这里的专家会帮助我.提前致谢.
PS:
我已经读过了:
但它们很少或没有用.
我问了一个关于favicons 的类似问题,在提供了一些链接后,我想出了一个多种尺寸的解决方案等.
我在<head>我的网站中使用以下代码:
<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- IE 10+ "Metro" Tiles - 144x144 pixels in size icon should be transparent -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">
<!-- Touch Icons - iOS and Android 2.1+ 152x152 pixels in size. -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 96x96 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">
我已经评论了每行代码以便更好地理解.现在回答你的问题:
- 如何检测应该向浏览器提供哪个图标(如何检测该浏览器是否要求favicon在地址栏中显示它？还是要保存为磁贴？或者用于快速拨号？)
您可以创建一个可行的JS解决方案,但是,我认为不需要.如上所示,我为IE创建了一些不同的大小和条件注释.每个图标都以特定浏览器为目标,其余图标未加载,从而减少了开销.
- 如何在不损失连接速度的情况下将该特定图标提供给浏览器,因为图标大小？
对我来说,我尽可能压缩图像.我正在使用PNG文件(除了IE 9及以下是ICO文件),我使用TinyPNG来压缩这些文件并且它运行良好.我的图标大小平均为3-6千字节(根据图标而有所不同).虽然这比16x16 ICO文件大,但我相信它可以提供所有设备的最佳体验.
- 为了指定的目的,应该在html(文件)中添加什么行的(html)代码？
见上面的代码.
- 通过加载index.html页面上的所有图标,浏览器可以为所有子页面缓存它们吗？(通过将所有图标放在站点的根目录中？)
该站点的根目录适用于名为favicon.ico但不适用于PNG或其他文件类型的ICO文件.如果代码只在页面上,我不确定它是否会缓存网站上所有页面的文件index.html.我通常在我的模板中有上面的代码,它将它应用于我网站上的所有页面.
- 但是这会通过增加索引页面本身的加载时间来影响网站的性能.
那么,无论如何都要检测需要favicon的目的,然后动态地提供它(例如使用JavaScript),而不会降低页面加载的速度？另外如何为chromes webstore提供一个favicon？(即什么行(html)代码).
我发现上面的代码对网站性能的影响可以忽略不计.我再次压缩所有PNG文件.
如上所述,我不相信真正需要JS解决方案.我在这里看到了这个问题,询问JS和favicons.就个人而言,我可以看到JS会增加比文件大小本身更多的开销.我无法通过实际测试备份该声明,只是一个想法.(想到的是,访问favicon需要多少代码,你真的节省了开销吗？)
从理论上讲,您应该能够使用以下HTML 指定favicons大小:
<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">
理论上,浏览器然后选择最佳大小并加载它,但是,这并不适用于所有浏览器.有些浏览器会选择最佳尺寸,而其他浏览器会加载所有尺
从我阅读的所有内容和我的经验中,我强烈推荐在本答案开头使用的代码,注释中指定的大小.这涵盖了大多数浏览器,没有大量开销,并为最终用户提供了良好的体验.
Chrome Webstore的大小为128x128px,但如果它与标准的favicon代码不同,我不确定您应该使用的确切代码.
| 归档时间： |
|
| 查看次数： |
5625 次 |
| 最近记录： |