个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
25
4
我正在阅读一篇文章:
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) 代码)。
希望这里的专家能帮助我。提前致谢。
附言:
我已经读过:
How to have multiple favicon sizes, yet serve only a 16x16 by default? ,
What is currently the best way to get a favicon to display in all browsers that support Favicons? ,
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/
25
4
0
我从来没有遇到过这种问题 - 我也不知道为什么.. 有些图标丢失并以“?/!”闪烁显示 发生了什么事？ 它是一个提交按钮。我在另一个按钮中有相同的图标 - 那里没问题。 SIGN! 有什
我只需要在单击按钮时显示 ionic 图标。 我试着在那个图标上放一个类并做到了: .icn { visibility: visible; } 但是没有用，有没有人知道另一种方法？ 最佳答案 Sho
我用qt在托盘里做了一个应用。在我的电脑上，这是一个很好的项目，我在托盘栏中看到了图标，但是当我将其发布给其他人时，他们看不到该图标，它只是一个可以使用但不显示图标的隐形方 block 。但在我的电脑
我想使用delphi将图标/ bmp绘制到TListView的子项中。但是我不知道该怎么做到。它适用于列表中的第一项，但子项存在问题。 最佳答案 您可以使用CustomDrawSubItem事件。 下
我想将标题栏中的图标设置为应用程序的图标 [[myWindow standardWindowButton:NSWindowDocumentIconButton] setImage:[NSApp app
可以设置一个图标，以便在当前应用程序的每个窗口上使用它。这样我就设置了一次(不是手动在每个窗口上设置)..？ 最佳答案 关于这个主题的一个很好的引用在这里 MSDN 。表明您有一个应用程序图标(桌面图
我为自己制作了一个小书签，它的功能很好，但当添加到 Opera 或 Firefox 的工具栏时，它只是呈现浏览器的默认书签图标(分别是地球仪和星星)。我的网站有一个网站图标，窗口、选项卡甚至 [网站]
制表符中的responsiveCollapse 折叠展开功能的默认图标似乎未居中。是否有更改此图标的选项。也许是右下胡萝卜？ 最佳答案 responsiveCollapse 格式化程序只是一个像所有其
上面是下拉列表，当单击列表时，其值将与图像一起显示在上面的字段(顺便说一句，这是一个按钮)中。我已经实现了显示文本，但似乎无法显示图像。这是我的标记如下... 广东 @foreach
我想将我们数据库中的电线杆和电缆导出到 Google 地球的 KML 文件中。 对于每个节点，我们都有一个极阵列，电缆始终连接到阵列中的下一个极。 制作简单路径的导出似乎很容易。但是这些路径只是显示一
我想将我们数据库中的电线杆和电缆导出到 Google 地球的 KML 文件中。 对于每个节点，我们都有一个极阵列，电缆始终连接到阵列中的下一个极。 制作简单路径的导出似乎很容易。但是这些路径只是显示一
在 JTable 中显示数据。一列用作字段复选框。问题是在显示ChceckBox 中而不是出现图标true/false。我该如何解决这个问题？ 添加数据: private DefaultTableMo
[编辑] 我想使用 DataTable 在 Datagridview 中使用图像。 RadioButton 只是这篇文章的一种简单问题格式。 让我为此澄清一下。 如何使用绑定(bind)样式在 dat
我正在使用 C# 开发 win 表单应用程序。我遇到了一个需要向用户提供 ComboBox 的场景。现在，为了使外观更具吸引力，我想在该组合框的每个项目之前显示一个小图像或图标。 我查看了一些提供此功
我正在 CrossRider 中构建一个扩展。我需要在数据库中保存我有它们的 url 的图像/图标。它们是微小的图像，不会成为数据库中的问题。我可能有类似的东西可以访问 background.js:
我需要使用我的 JavaFX 应用程序中的一些元素，这些元素使用 带有自定义符号/图标的按钮 横幅或背景图像。 此应用程序应该在具有不同屏幕分辨率的多个设备上运行，并且我还(最终)需要缩放图像/图标(
我怎样才能在 android studio 中做这样的事情: 我想要一个导航栏，您可以在其中看到名称、图标以及打开抽屉导航的机会 :D (图片是用Figma制作的) 最佳答案 将重力设置为在 Draw
当我在 ViewPager 中滑动 fragment 时，如何动态更改 Action Bar 的操作按钮图标。取决于 fragment 按钮必须改变状态(图标)。 最佳答案 您可以在 onPrepar
我有两个 while 循环，一个是循环遍历聊天日志以检索日期、用户名、消息，另一个 while 循环 是从单独的表中检索图标这有两列 chars 和 image (image-name.*) 我可以显
我正在尝试重新启动 mysql(一个完全不同的问题)，MySql 肯定已安装(版本 14.14)，并且根据我收集的信息，我应该在系统偏好设置面板的底部看到它的图标，但它是不在那里。安装过程中是否出现了
我是一名优秀的程序员,十分优秀！