Html 在网站上创建网站图标的最佳做法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25952907/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the best practice for creating a favicon on a web site?
提问by bytecode77
Question
题
- What is the best practice for creating a faviconon a web site?
- and is an .icofile with both 16x16 and 32x32 images better than a .pngfile with 16x16 only?
- Could the right method preferred today not be working in reasonably old browsers?
- 在网站上创建网站图标的最佳做法是什么？
- 16x16 和 32x32 图像的.ico文件是否比仅 16x16的.png文件好？
- 今天首选的正确方法是否在相当旧的浏览器中不起作用？
Method 1
方法一
Placing a file named favicon.icoin 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
方法二
HTML tag in the <head>section:
部分中的 HTML 标记<head>：
<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />
回答by philippe_b
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.
- 你可以花在这个任务上的时间。对于许多人来说，这是“尽可能快”。
- 你愿意付出的努力。比如，手工绘制一个 16x16 的图标以获得更好的效果。
- 特定限制，例如支持具有奇怪规格的特定浏览器。
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.
如果您想快速、顺利地完成工作，您可以使用网站图标生成器。这为所有主要的桌面和移动浏览器创建了图片和 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)
第二种方法：创建一个 favicon.ico（仅限桌面浏览器）
As you suggest, you can create a favicon.icofile which contains 16x16 and 32x32 pictures (note that Microsoft recommends 16x16, 32x32 and 48x48).
按照您的建议，您可以创建一个favicon.ico包含 16x16 和 32x32 图片的文件（请注意，Microsoft 建议使用 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.icofile 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文件放在根目录中而不是声明它的建议：请注意，尽管此技术适用于大多数浏览器，但并非 100% 可靠。例如，Windows Safari 找不到它（当然：这个浏览器在 Windows 上以某种方式被弃用了，但你明白了）。当与 PNG 图标（对于现代浏览器）结合使用时，此技术很有用。
Third method: Create a favicon.ico, a PNG icon and an Apple Touch icon (all browsers)
第三种方法：创建一个 favicon.ico、一个 PNG 图标和一个 Apple Touch 图标（所有浏览器）
In your question, you do not mention the mobile browsers. Most of them will ignore the favicon.icofile. Although your site may be dedicated to desktop browsers, chances are that you don't want to ignore mobile browsers altogether.
在您的问题中，您没有提到移动浏览器。他们中的大多数人会忽略该favicon.ico文件。尽管您的网站可能专用于桌面浏览器，但您可能不想完全忽略移动浏览器。
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).
favicon.ico， 看上面。- 适用于 Android Chrome 的 192x192 PNG 图标
- 一个 180x180 的 Apple Touch 图标（适用于 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.
这不是完整的故事，但在大多数情况下已经足够了。
回答by a828h
- you can work with this website for generate favin.ico
- I recommend use .ico format because the png don't work with method 1 and ico could have more detail!
- both method work with all browser but when it's automatically work what you want type a code for it? so i think method 1 is better.
- 您可以使用此网站生成favin.ico
- 我建议使用 .ico 格式，因为 png 不适用于方法 1 并且 ico 可能有更多细节！
- 这两种方法都适用于所有浏览器，但是当它自动工作时，您想要为它输入代码吗？所以我认为方法1更好。
回答by Hblegg
I used https://iconifier.netI uploaded my image, downloaded images zip file, added images to my server, followed the directions on the site including adding the links to my index.html and it worked. My favicon now shows on my iPhone in Safari when 'Add to home screen'
我使用了https://iconifier.net我上传了我的图像，下载了图像 zip 文件，将图像添加到了我的服务器，按照网站上的说明进行操作，包括将链接添加到我的 index.html 并且它起作用了。当“添加到主屏幕”时，我的收藏夹图标现在显示在 Safari 中的 iPhone 上
