Home / Questions / 22067
Accepted
Alvaro Montoro
Asked: 2020-08-31 06:27:12 +0800 CST 2020-08-31 06:27:12 +0800 CST

Favicon: ico 还是 png 格式？还有什么 rel？

  • 772

我通常在我的网页上包含一个带有 icon 的 favicon .ico，执行如下操作：

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

但是我见过不少网站使用带有扩展名的图像.png，并且属性具有不同的值rel（如“快捷方式图标”或“apple-touch-icon”）。

哪种图像格式更适合现代浏览器中的图标？使用一个比另一个有什么优势？属性也一样rel：“图标”或“快捷方式图标”有区别吗？（假设“apple-touch-icon”特定于 Apple 设备）

html

2 Answers

  1. Best Answer

    几乎所有浏览器都已经广泛支持不同的图像格式来显示页面的图标，而 Internet Explorer 和 Safari（通常的嫌疑人）的支持最少。这里是列表。

    边缘：.ico，，，.png_.gif

    Firefox : .ico, .png, .gif,.gif动画, .jpg,.png动画,.svg

    Chrome : .ico, .png, .gif,.gif动画,.jpg

    即：，，，.ico _.png.gif

    歌剧：.ico、、、、、、、、、、、、、、、、、、、、、、、、、、、。.png_ .gif_ .gif_ .jpg_.png.svg

    野生动物园: .ico, .png, .gif,.jpg

    ico正如您将看到的，公因数几乎总是png和gif。事实证明，后者在透明度或高质量图像方面并不十分擅长，正如您可以在Wikipedia上阅读的那样，这使我们为此目的只有两种理想类型；ico和png。

    图标可以是 16×16、32×32、48×48 或 64×64 像素大小和 8 位、24 位或 32 位色深。我个人使用过png巨大且不成比例的尺寸（作为实验），并且浏览器已经毫无问题地渲染它们，这使得这种格式非常理想（在我看来）。

    您可以同时使用这两种格式，并且默认情况下浏览器会尝试从站点的根目录获取它。这个过程是按照这个算法完成的。

    如果找到 PNG 和 ICO 网站图标的链接，PNG 兼容的浏览器会选择要使用的格式和大小，如下所示：

    • Firefox 和 Safari 将使用最后出现的图标。

    • Mac 版 Chrome 将使用 ICO 格式的任何内容，否则它将使用 32x32 像素的任何内容。

    • Chrome for Windows 将使用大小为 16x16 像素的最先出现的网站图标，否则使用 ICO。

    • 如果以上都不可行，那么两种 Chrome 都会使用先出现的图标，这与 Firefox 和 Safari 正好相反。事实上，Chrome for Mac 会忽略 16x16 并使用 32x32，然后在非视网膜设备上将其缩放为 16x16。

    • Opera 会完全随机选择图标。

    请记住，该属性rel与链接元素相关，该元素可用于更多内容，例如加载样式，其语法为：

    <link rel="[tipo enlace][espacio][tipo enlace]..."/>

    您所指的链接类型icon是和shorcut。

    • icon：定义一个资源来表示用户界面中的页面，通常是一个图标（可听的或可视的）。

      它基本上是一个标识您的页面的图像。

    • shorcut: 不是标准的一部分。

      它用于历史原因。

    由于历史原因，icon 关键字前面可能有“shortcut”关键字。如果存在“快捷方式”，则必须紧跟图标，并且两者必须用单个字符 U+0020 SPACE 分隔。

    icon除非您打算在您的网站上支持较旧的浏览器，否则基本上就足够了。

    • 14

  2. 我会继续使用 .ico它，因为它是所有浏览器中最受支持的格式。现在，我记得，我在大学的一堂课上看到，一个favicon的rel="shortcut icon"属性是由 Internet Explorer 定义的，并且是提到icon 和 page之间的关系，直到HTML5 的出现（我不知道是哪一年xD）是在它宣布它将是标准化标识符的时候，也就是说，在我看来，只有不基于IE的浏览器才能使用 favicon 而没有的需要。iconshortcut

    Chrome、Firefox、Opera 和 Safari 接受PNG 图标……如果两者都存在， Chrome和 Safari 将始终选择它.ico

     <!-- Chrome, Safari, IE -->
<link rel="shortcut icon" href="path/to/favicon.ico">

<!-- Firefox, Opera  -->
<link rel="icon" href="path/to/favicon.png">

    由于出现了 PNG 的使用，因此不包括多种分辨率，您必须手动输入它们：。

    <link rel="icon" href="favicon-16.png" sizes="16x16">
<link rel="icon" href="favicon-32.png" sizes="32x32">
<link rel="icon" href="favicon-48.png" sizes="48x48">
<link rel="icon" href="favicon-64.png" sizes="64x64">
<link rel="icon" href="favicon-128.png" sizes="128x128">

    因此，这不是一个问题，什么是最合适的格式？.ico因为xD永远是首要任务

    至于“触摸图标”是移动设备和平板电脑的图标，iOS 会自动添加一些视觉效果以与内置在主屏幕中的图标相协调（就像它与应用程序图标一样）。具体来说，IOS 增加了：

    圆角

    阴影滴

    反光闪光

    从 iOS 2.0 开始，您可以使用precompose避免添加这些效果：

    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

    其实它有很多属性，这里解释得很好：

    https://mathiasbynens.be/notes/touch-icons

    • 5