草庐IT

javascript - 多个图标大小，如何、何时何地使用它们？

coder 2023-08-08 原文

我正在阅读一篇文章:

Create a favicon for your site和 Why so many files? .

根据他们的说法，如果您需要将 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)，而不损失页面加载速度？还有如何为 chrome 的网上商店设置一个 favicon？(即，哪几行 (html) 代码)。

希望这里的专家能帮助我。提前致谢。

附言:

我已经读过:

  1. How to have multiple favicon sizes, yet serve only a 16x16 by default? ,

  2. Image icon beside the site URL ,

  3. What is currently the best way to get a favicon to display in all browsers that support Favicons? ,

  4. Preferred way to use favicons?和

  5. How can I add a picture in address bar of the browser when my page is browsed? .

但它们的用处很小或根本没有用。

最佳答案

我asked a similar question关于网站图标，在提供了一些链接后，我想出了一个 solution多种尺寸等

我在 <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">

为了更好地理解，我对每一行代码都进行了注释。现在回答你的问题:

-How to detect that which icon should be served to browser (how to detect that browser is asking favicon for showing it in address bar? or for to save as tile? or for a speed dial?)

您也许能够创建一个可行的 JS 解决方案，但是，我认为这不是必需的。正如您在上面看到的，我为 IE 创建了一些不同的大小和条件注释。每个图标都针对特定的浏览器，其余图标不会加载，从而减少开销。

-How to serve that specific icon to browser without losing speed of connection because of large icon size?

对我来说，我会尽可能地压缩图像。我正在使用 PNG 文件(IE 9 及以下是 ICO 文件除外)并且我使用 TinyPNG压缩那些，效果很好。我的图标平均大小为 3 - 6 KB(因图标而异)。虽然它比 16x16 ICO 文件大，但我相信它可以在所有设备上提供最佳体验。

-what lines of (html)code should be added where in html(file) for the specified purpose?

见上面的代码。

-By Loading all the icons on index.html page, can a browser cache them all for all the subpages?(By placing all the icons in root directory of site?)

站点的根目录适用于名为 favicon.ico 的 ICO 文件但不适用于 PNG 或其他文件类型。如果代码仅在 index.html 上，我不确定它是否会缓存站点上所有页面的文件页。我通常在我的模板中包含上述代码，并将其应用于我网站上的所有页面。

-But again that will affect the performance of site by increasing the load time of index page itself.

so, Is there anyway to detect for which purpose the favicon is needed and then to serve it dynamically(using JavaScript for example), without losing speed of page load? Also how to have a favicon for chromes webstore?(ie, what lines of (html)code).

我发现上面的代码对网站性能的影响可以忽略不计。同样，我大量压缩了所有 PNG 文件。

如上所述，我不认为真的需要 JS 解决方案。我看到这个question here on SO询问 JS 和网站图标。就我个人而言，我可以看到 JS 在哪里会增加比文件大小本身更多的开销。我无法用实际测试来支持该声明，只是一个想法。 (想法是，访问网站图标需要多少代码，您真的节省了任何开销吗？)

理论上你应该能够specify the favicons sizes使用以下 HTML:

<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">

理论上，浏览器会选择最佳尺寸并加载它，但是，这 doesn't work well across all browsers .一些浏览器会选择最佳尺寸，而另一些浏览器会加载所有尺寸，从而增加了开销。

根据我所阅读的所有内容和我的经验，我强烈推荐在评论中指定的大小下使用此答案开头的代码。这涵盖了大多数浏览器，没有大量开销，并为最终用户提供了良好的体验。

Chrome 网上应用店是 128x128px in size但我不确定您应该使用的确切代码，如果它与标准图标代码不同的话。

关于javascript - 多个图标大小，如何、何时何地使用它们？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24740611/

何地javascriptcodefavicon34html

有关javascript - 多个图标大小，如何、何时何地使用它们？的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  4. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  5. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  6. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？ 最佳答案 三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  7. ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2

    我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，

  8. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

  9. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  10. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题

随机推荐