当前位置： 文江博客话题详情

所有图标大小都是从服务器获取的吗？

发布于 2024-12-17 03:56:40 字数 736 浏览 3 评论 0原文

如果我为 favicon PNG 指定不同的图像大小，如下所示：

<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png" />
<link rel="icon" type="image/png" sizes="24x24" href="/favicon-24px.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32px.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48px.png" />
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64px.png" />
<link rel="icon" type="image/png" sizes="256x256" href="/favicon-256px.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512px.png" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />

是否会获取所有这些文件？

原文

If I specify different image sizes for favicon PNGs like so:

<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png" />
<link rel="icon" type="image/png" sizes="24x24" href="/favicon-24px.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32px.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48px.png" />
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64px.png" />
<link rel="icon" type="image/png" sizes="256x256" href="/favicon-256px.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512px.png" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />

Does every one of these files get fetched?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

猫腻 2024-12-24 03:56:40

引用自 http://www.jonathantneal.com/blog/understand-the-favicon/ ：

这些兼容 PNG 图标的浏览器如何确定哪个图标
应该使用？ Firefox 和 Safari 将使用自带的 favicon
最后的。 Mac 版 Chrome 将使用 ICO 格式的图标，
否则为 32×32 图标。 Windows 版 Chrome 将使用 favicon
如果是 16×16，则优先，否则 ICO。如果没有一个
上述选项均可用，两个 Chrome 都会使用其中一个
favicon 排在第一位，这与 Firefox 和 Safari 正好相反。
事实上，Mac 版 Chrome 会忽略 16×16 图标并使用 32×32
版本，如果只是为了在非视网膜设备上将其缩小到 16×16。
Opera 不想偏袒任何一方，会从以下任何一个中进行选择
可用的图标完全随机。我喜欢 Opera 这样做。

这只是开始。现在是时候了解一下
Internet Explorer 注意事项。

而IE8-10会显示
第一次加载页面时的图标，IE7 将跳过第一次加载
并在重复访问期间显示网站图标。更糟糕的是，IE6 只会
当网站被添加书签并重新打开后显示网站图标
浏览器。每当浏览器缓存时，IE6 也会删除图标
被清除，并且不会再次显示网站图标，直到站点
要么重新添加书签，要么以某种方式重新加载图标。如果是IE6
和网站图标对您来说意义重大，您可以使用以下命令强制重新加载
小 JavaScript 片段，最好包含在条件语句中
评论。

Quoting from http://www.jonathantneal.com/blog/understand-the-favicon/:

How do these PNG-favicon-compatible browsers determine which favicon
should be used? Firefox and Safari will use the favicon that comes
last. Chrome for Mac will use whichever favicon is ICO formatted,
otherwise the 32×32 favicon. Chrome for Windows will use the favicon
that comes first if it is 16×16, otherwise the ICO. If none of the
aforementioned options are available, both Chromes will use whichever
favicon comes first, exactly the opposite of Firefox and Safari.
Indeed, Chrome for Mac will ignore the 16×16 favicon and use the 32×32
version if only to scale it back down to 16×16 on non-retina devices.
Opera, not wanting to take sides, will choose from any of the
available icons at complete random. I love that Opera does this.

And that’s just the beginning. Now it’s time to learn about the
Internet Explorer caveats.

While IE8-10 will display
the favicon on first load of the page, IE7 will skip the first load
and display the favicon during repeat visits. Worse yet, IE6 will only
display the favicon once the site has been bookmarked and reopened in
the browser. IE6 will also drop the favicon whenever the browser cache
is cleared, and it will not display the favicon again until the site
is either re-bookmarked, or the favicon is somehow reloaded. If IE6
and favicons mean a lot to you, you can force this reload with a
little JavaScript snippet, preferably wrapped in a conditional
comment.

<!-- I "support" IE6 -->
<!--[if IE 6]><script>(new Image).src="path/to/favicon.ico"</script><![endif]-->
回复 原文
゛时过境迁 2024-12-24 03:56:40

根据规范，将使用最合适的图标。所以没有必要去拿一些没有用的东西。

如果提供了多个图标，用户代理必须根据类型、媒体和尺寸属性选择最合适的图标。

According to the specification, the most appropriate icon will be used. So there is no a need to fetch something that has no use.

If multiple icons are provided, the user agent must select the most appropriate icon according to the type, media, and sizes attributes.

回复 原文
要走就滚别墨迹 2024-12-24 03:56:40

令人惊讶的是，我观察到一些浏览器正在加载所有 PNG 图标，而不仅仅是最合适的浏览器：

  • Windows 上的 Chrome Windows 上的
  • Chrome Android 上的
  • Firefox Windows

我没有测试其他设置，例如 Android 上的 Firefox。

有关“所有图标均已加载”问题的详细信息。

Surprisingly, I observed that some browsers are loading all PNG favicons, not only the most suitable one:

  • Chrome on Windows
  • Chrome on Android
  • Firefox on Windows

I didn't tested other settings, like Firefox on Android.

More about the "all favicons are loaded" issue.

回复 原文
[旋木] 2024-12-24 03:56:40

浏览器将仅获取一个文件（如果有）。

The browser will get only one file, if any.

回复 原文
~没有更多了~

关于作者

淡淡離愁欲言轉身

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

卷耳

文章 0 评论 0

佚名

文章 0 评论 0

℉服软

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

凉宸

文章 0 评论 0

gyhjy

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文