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?
使用16x16和32x32图像的.ico文件是否比仅使用16x16的.png文件更好?
Could the right method preferred today not be working in reasonably old browsers?
今天所推荐的正确方法是否不能在相当老的浏览器中工作?

Method 1

方法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.

放置一个名为favicon的文件。在主目录中的ico是一种方法。浏览器总是请求这个文件。您可以在apache日志文件中看到这一点。

Method 2

方法2

HTML tag in the <head> section:

部分的HTML标记:

<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />

3 个解决方案

#1

107

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.
你愿意付出的努力。比如，手工绘制一个16x16图标，以获得更好的结果。
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.

如果你想快速完成工作，你可以使用favicon生成器。这一个为所有主要的桌面和移动浏览器创建图片和HTML代码。我是这个网站的作者。

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).

正如您所建议的，您可以创建一个favicon。ico文件包含16x16和32x32图片(注意微软推荐16x16, 32x32和48x48)。

Then, declare it in your HTML code:

然后，在HTML代码中声明:

<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).

关于你放置图标的建议。ico文件在根目录中而不是声明它:注意，尽管这种技术在大多数浏览器上都可以使用，但是它并不是100%可靠的。例如，Windows Safari无法找到它(假定:该浏览器在Windows上不被使用，但您明白了)。当与PNG图标(用于现代浏览器)结合时，这种技术非常有用。

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.

在你的问题中，你没有提到移动浏览器。大多数人会忽略这个图标。ico文件。尽管您的站点可能专门用于桌面浏览器，但是您可能不希望完全忽略移动浏览器。

You can achieve a good compatibility with:

你可与下列人士取得良好的相容性:

favicon.ico, see above.
收藏夹图标。ico,见上图。
A 192x192 PNG icon for Android Chrome
Android Chrome的192x192 PNG图标
A 180x180 Apple Touch icon (for iPhone 6 Plus; other device will scale it down as needed).
180x180苹果触控图标(适用于iPhone 6 Plus;其他设备会按需要缩小尺寸)。

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.

这不是完整的故事，但在大多数情况下都足够好。

“/图标。ico " vs

3 个解决方案

#1

First method: Use a favicon generator

Second method: Create a favicon.ico (desktop browsers only)

Third method: Create a favicon.ico, a PNG icon and an Apple Touch icon (all browsers)

更多相关文章

随机推荐