HTML - 将图标添加到浏览器选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26445755/
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
HTML - Add icon to browser tab
提问by user3577397
I'm doing an assignment for class, and we were tasked to make a webpage. All went well with creating the page, but I'm struggling to get the icon on my browser tab.
我正在做课堂作业，我们的任务是制作一个网页。创建页面一切顺利，但我正在努力在我的浏览器选项卡上获取图标。
He instructed us to get the icon from one of our folders
他指示我们从我们的一个文件夹中获取图标
This is from his directions
这是来自他的指示
"Note in order to show your icon, you insert this line in your html head section"
“请注意，为了显示您的图标，请在您的 html 标题部分插入这一行”
<link rel="shortcut icon" href="images/favicon.ico" type="favicon/ico" />
"Assuming that your company icon is in the folder images"
“假设您的公司图标在文件夹图像中”
I've tried many variations of that, but it won't work.
我已经尝试了很多变体，但它不起作用。
Mine is called favicon(1).ico
我的叫做 favicon(1).ico
Here's one of my attempts
这是我的尝试之一
<link rel="shortcut icon" href="/favicon(1).ico" type="image/x-icon" />
Here's another.
这是另一个。
<link rel="shortcut icon" href="images/favicon(1).ico" type="favicon/ico" />
I have a folder on my Desktop called "Question 1" and within that folder I have my HTML file for this assignent and another folder called "images". In the "images" file I have the "favicon(1).ico icon.
我的桌面上有一个名为“问题 1”的文件夹，在该文件夹中，我有这个分配的 HTML 文件和另一个名为“图像”的文件夹。在“图像”文件中，我有“favicon(1).ico”图标。
Is there a way I can take that icon from my folder and place it in my code?
有没有办法可以从我的文件夹中取出那个图标并将它放在我的代码中？
回答by RenokK
This is the Snippet that I use whenever I need to configure a favicon:
这是我在需要配置收藏夹图标时使用的代码段：
<!-- for FF, Chrome, Opera -->
<link rel="icon" type="image/png" href="/assets/favicons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/assets/favicons/favicon-32x32.png" sizes="32x32">
<!-- for IE -->
<link rel="icon" type="image/x-icon" href="/assets/favicons/favicon.ico" >
<link rel="shortcut icon" type="image/x-icon" href="/assets/favicons/favicon.ico"/>
This should work just fine.
这应该工作得很好。
You need to use .png in FF, Chrome and Opera and support them with 2 resolutions, for different devices and screen resolutions.
您需要在 FF、Chrome 和 Opera 中使用 .png 并以 2 种分辨率支持它们，适用于不同的设备和屏幕分辨率。
IE needs the .ico Image and needs the rel to be "icon" and "shortcus icon", don't ask me why, IE is always a bit of a wierdo as we all know :D
IE 需要 .ico 图像并且需要 rel 为“图标”和“快捷图标”，别问我为什么，众所周知，IE 总是有点怪异：D
回答by arenaq
Try:
尝试：
<link rel="shortcut icon" href="favicon(1).ico">
or this (for Mozilla)
或者这个（对于 Mozilla）
<link href="favicon(1).png" rel="icon" type="image/png" />
It can be .png or .ico
它可以是 .png 或 .ico
