" /favicon.ico" vs< link rel ="快捷图标" /> [英] "/favicon.ico" vs <link rel="shortcut icon" />
问题描述
问题
- 创建 favicon 的最佳做法是一个网站？
- ，并且是一个 .ico 文件，它的16x16和32x32图片比只有16x16的 .png 文件更好？
strong>方法1
在主目录中放置一个名为 favicon.ico 的文件是一种方法。浏览器始终请求该文件。您可以在apache日志文件中看到。
方法2
HTML标记在< head> 部分：
< link rel =快捷图标href =/ images / favicon.png（or ico？）type =image / x-icon/>
有几种方法可以创建一个favicon。最好的办法取决于各种因素：
- 您可以花费在这项任务上的时间。对于很多人来说，这是尽可能快。
- 您愿意付出的努力。例如，手动绘制一个16x16图标以获得更好的结果。
- 特定的约束条件，例如支持具有奇数规格的特定浏览器。
第一种方法：使用图标生成器
如果您想快速完成工作，可以使用信息发生器。这个为所有主要桌面和手机浏览器创建图片和HTML代码。完全披露：我是本网站的作者。
这种解决方案的优点：速度快，所有的兼容性考虑事项都已为您解决。
第二种方法：创建一个favicon.ico（仅限于桌面浏览器）
正如你所建议的那样，你可以创建一个 favicon.ico 包含16x16和32x32图片的文件（请注意 Microsoft建议使用16x16,32x32和48x48 ）。
$ b 然后，在HTML代码中声明它：
< link rel =快捷图标href =/ path / to /图标/ favicon.ico>
这种方法适用于所有新旧桌面浏览器。但大多数移动浏览器都会忽略favicon。
关于您建议将 favicon.ico 文件放入根目录而不是声明它：要小心，虽然这种技术适用于大多数浏览器，但它不是100％可靠的。例如，Windows Safari无法找到它（授予：这个浏览器在Windows上不知何故被弃用，但你明白了）。第三种方法：创建一个favicon.ico，一个PNG图标和一个Apple Touch图标（所有浏览器）
在你的问题中，你没有提到移动浏览器。他们大多会忽略 favicon.ico 文件。尽管您的网站可能专门用于桌面浏览器，但您可能不希望完全忽略移动浏览器。
您可以实现良好的兼容性：
>-
favicon.ico，参见上文。 - 用于Android Chrome的192x192 PNG图标
- 180x180 Apple Touch图标（适用于iPhone 6 Plus;其他设备会根据需要缩放）。
用
< link rel =快捷图标href = /path/to/icons/favicon.ico\">
< link rel =apple-touch-iconsizes =180x180href =/ path / to / icons / apple-touch-icon-180x180.png>
这不是完整的故事，但在大多数情况下它已经足够了。
Question
- What is the best practice for creating a favicon on a web site?
- and is an .ico file with both 16x16 and 32x32 images better than a .png file with 16x16 only?
- Could the right method preferred today not be working in reasonably old browsers?
Method 1
Placing a file named favicon.ico in the main directory is one way. The browser always requests that file. You can see that in the apache log files.
Method 2
HTML tag in the <head> section:
<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />
There are several ways to create a favicon. The best way for you depends on various factors:
- The time you can spend on this task. For many people, this is "as quick as possible".
- The efforts you are willing to make. Like, drawing a 16x16 icon by hand for better results.
- Specific constraints, like supporting a specific browser with odd specs.
First method: Use a favicon generator
If you want to get the job done well and quickly, you can use a favicon generator. This one creates the pictures and HTML code for all major desktop and mobiles browsers. Full disclosure: I'm the author of this site.
Advantages of such solution: it's quick and all compatibility considerations were already addressed for you.
Second method: Create a favicon.ico (desktop browsers only)
As you suggest, you can create a favicon.ico file which contains 16x16 and 32x32 pictures (note that Microsoft recommends 16x16, 32x32 and 48x48).
Then, declare it in your HTML code:
<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
This method will work with all desktop browsers, old and new. But most mobile browsers will ignore the favicon.
About your suggestion of placing the favicon.ico file in the root and not declaring it: beware, although this technique works on most browsers, it is not 100% reliable. For example Windows Safari cannot find it (granted: this browser is somehow deprecated on Windows, but you get the point). This technique is useful when combined with PNG icons (for modern browsers).
Third method: Create a favicon.ico, a PNG icon and an Apple Touch icon (all browsers)
In your question, you do not mention the mobile browsers. Most of them will ignore the favicon.ico file. Although your site may be dedicated to desktop browsers, chances are that you don't want to ignore mobile browsers altogether.
You can achieve a good compatibility with:
favicon.ico, see above.- A 192x192 PNG icon for Android Chrome
- A 180x180 Apple Touch icon (for iPhone 6 Plus; other device will scale it down as needed).
Declare them with
<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">
This is not the full story, but it's good enough in most cases.
这篇关于" /favicon.ico" vs< link rel ="快捷图标" />的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
