所有现代浏览器(使用 Chrome 4、Firefox 3.5、IE8、Opera 10 和 Safari 4 测试)总是会请求 favicon.ico
,除非您通过 <link>
指定了快捷方式图标。因此,如果您没有明确指定一个,最好始终有一个 favicon.ico
文件,以避免出现 404。Yahoo! suggests you make it small and cacheable.
而且您也不必为了 alpha 透明度而选择 PNG。 ICO files 很好地支持 Alpha 透明度(即 32 位颜色),尽管几乎没有任何工具允许您创建它们。我经常使用 Dynamic Drive's FavIcon Generator 创建具有 Alpha 透明度的 favicon.ico
文件。这是我所知道的唯一可以做到这一点的在线工具。
还有一个免费的 Photoshop plug-in 可以创建它们。
由于此线程中其他人的大量更新和注释,答案被替换(并转为社区 Wiki):
ICO 和 PNG 都允许基于全 alpha 通道的透明度
ICO 允许向后兼容旧浏览器(例如 IE6)
PNG 可能对透明度有更广泛的工具支持,但您也可以找到创建 alpha 通道 ICO 的工具,例如 @mercator 提到的 Dynamic Drive 工具和 Photoshop 插件。
请随时在此处查阅其他答案以获取更多详细信息。
.png 文件很好,但 .ico 文件也提供 alpha 通道透明度,而且它们还为您提供向后兼容性。
例如,看看 StackOverflow 使用哪种类型(注意它是透明的):
<link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico">
<link rel="apple-touch-icon" href="http://sstatic.net/so/apple-touch-icon.png">
apple-itouch thingy 适用于制作网站快捷方式的 iPhone 用户。
*.ico 文件的理论优势在于它们是容器,不能容纳多个图标。例如,您可以为旧系统存储具有 alpha 通道和 16 色版本的图像,或者您可以添加 32x32 和 48x48 图标(例如,在将链接拖到 Windows 资源管理器时会显示)。
然而,这个好主意往往会与浏览器实现发生冲突。
PNG有两个优点:它的尺寸更小,使用和支持更广泛(除非是网站图标)。之前提到过 ICO,可以有多种尺寸的图标,这对桌面应用很有用,但对网站来说不是太多。我建议您将 favicon.ico 放在应用程序的根目录中。如果您有权访问网站页面的 Head,请使用该标签指向 png 文件。所以较旧的浏览器将显示 favicon.ico 和较新的 png。
要创建 Png 和图标文件,我建议使用 The Gimp。
一些社交工具(如 Google+)使用一种简单的方法来获取外部链接的网站图标,获取 http://your.domainname.com/favicon.ico
由于它们不预取 HTML 内容,因此 <link>
标记将不起作用。在这种情况下,您可能想要使用 mod_rewrite 规则或只是将文件放在默认位置。
ico 可以是 png。
更准确地说,您可以在这种最小的容器格式中存储一个或多个 png,而不是每个人都与 ico 强烈关联的通常的 bitmap+alpha。
支持是旧的,appearing in Windows Vista (2007),浏览器很好地支持,但不一定是图标编辑软件。
任何有效的 png(包括标题在内)都可以在前面加上 6 byte ico header 和 16 字节的图像目录。
GIMP 具有原生支持。只需导出为 ico 并勾选“压缩 (PNG)”。
为了它的价值,我这样做:
<!-- Favicon - Generic -->
<link rel="icon" href="path/favicon-32_x_32.png" sizes="32x32">
<link rel="icon" href="path/favicon-57_x_57.png" sizes="57x57">
<link rel="icon" href="path/favicon-76_x_76.png" sizes="76x76">
<link rel="icon" href="path/favicon-96_x_96.png" sizes="96x96">
<link rel="icon" href="path/favicon-128_x_128.png" sizes="128x128">
<link rel="icon" href="path/favicon-192_x_192.png" sizes="192x192">
<link rel="icon" href="path/favicon-228_x_228.png" sizes="228x228">
<!-- Favicon - Android -->
<link rel="shortcut icon" href="path/favicon-196_x_196.png" sizes="196x196">
<!-- Favicon - iOS -->
<link rel="apple-touch-icon" href="path/favicon-120_x_120.png" sizes="120x120">
<link rel="apple-touch-icon" href="path/favicon-152_x_152.png" sizes="152x152">
<link rel="apple-touch-icon" href="path/favicon-180_x_180.png" sizes="180x180">
而且我仍然将 favicon.ico 保留在根目录中。
如果您想要可靠的 IE6 兼容性,请在任何情况下避免使用 PNG。
<link>
指定的 PNG。
.ico
编辑非常困难。即使你这样做了,最终结果也很糟糕,你会认为.bmp
是一种更好的格式(它添加了很多元数据,使重新编辑变得非常痛苦)。