在网站上创建收藏夹图标的最佳做法是什么? [英] What is the best practice for creating a favicon on a web site?

问题描述

问题

• 在网站上创建收藏夹的最佳做法是什么?
• 并且具有16x16和32x32图像的 .ico 文件比仅具有16x16的 .png 文件好吗?
• 今天首选的正确方法不能在相当老的浏览器中工作吗?

• 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?

方法1

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

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.

方法2

HTML标记:

<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:

• 您可以花在此任务上的时间.对于许多人来说，这是尽快".
• 您愿意付出的努力.例如，用手绘制一个16x16的图标可获得更好的效果.
• 特定的约束，例如支持具有奇特规格的特定浏览器.

如果您希望顺利完成工作，可以使用网站图标生成器.这是为所有主要的台式机和手机浏览器创建的图片和HTML代码.完全披露:我是该网站的作者.

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.

根据您的建议，您可以创建一个包含16x16和32x32图片的favicon.ico文件(请注意

As you suggest, you can create a favicon.ico file which contains 16x16 and 32x32 pictures (note that Microsoft recommends 16x16, 32x32 and 48x48).

然后，在您的HTML代码中声明它:

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.

关于您建议将favicon.ico文件放在根目录中而不声明它的提示:请注意，尽管此技术可在大多数浏览器上使用，但并非100％可靠.例如，Windows Safari无法找到它(被授予:此浏览器在Windows上已过时，但您已明白了这一点).当与PNG图标结合使用(对于现代浏览器)时，此技术很有用.

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

在您的问题中，您没有提及移动浏览器.他们中的大多数将忽略favicon.ico文件.尽管您的网站可能专用于台式机浏览器，但您可能不想完全忽略移动浏览器.

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，请参见上文.
• 用于Android Chrome的192x192 PNG图标
• 一个180x180的Apple Touch图标(用于iPhone 6 Plus；其他设备会根据需要将其按比例缩小).

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

用

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

这篇关于在网站上创建收藏夹图标的最佳做法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！