Html 如何将我网站的徽标作为浏览器选项卡中的图标图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11488960/
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
How do I put my website's logo to be the icon image in browser tabs?
提问by jay
The image next to the page title in the browser tab - how can you link an image here?
浏览器选项卡中页面标题旁边的图像 - 如何在此处链接图像？
回答by LasagnaAndroid
That image is called 'favicon'and it's a small square shaped .icofile, which is the standard file type for favicons. You could use .pngor .giftoo, but you should follow the standard for better compatibility.
该图像称为“网站图标”，它是一个小型方形.ico文件，这是网站图标的标准文件类型。您可以使用.pngor .gif，但您应该遵循标准以获得更好的兼容性。
To set one for your website you should:
要为您的网站设置一个，您应该：
Make a square image of your logo (preferably 32x32 or 16x16 pixels, as far as I know there's no max size*), and transform it into an
.icofile. You can do this on Gimp, Photoshop (with help of a plugin) or a website like Favicon.ccor RealFaviconGenerator.Then, you have two ways of setting it up:
A) Placing it on the root folder/directoryof your website (next to
index.html) with the namefavicon.ico.or
B) Link to it between the
<head></head>tags of every.htmlfile on your site, like this:<head> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> </head>
制作徽标的方形图像（最好是 32x32 或 16x16 像素，据我所知没有最大尺寸*），并将其转换为
.ico文件。您可以在 Gimp、Photoshop（借助插件）或Favicon.cc或RealFaviconGenerator等网站上执行此操作。然后，您有两种设置方式：
A) 将其放置在您网站的根文件夹/目录中（在 旁边
index.html），名称为favicon.ico。或者
B）在您网站上
<head></head>每个.html文件的标签之间链接到它，如下所示：<head> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> </head>
If you want to see the faviconfrom any website, just write www.url.com/favicon.icoand you'll (probably) see it. Stackoverflow'sfavicon is 16x16 pixels and Wikipediais 32x32.
如果您想favicon从任何网站查看 ，只需写信www.url.com/favicon.ico，您（可能）就会看到它。Stackoverflow 的图标是 16x16 像素，维基百科是 32x32。
*: There's even a browser problem with no filesize limit. You could easily crash a browser with an exceedingly large favicon, more info here
*：甚至没有文件大小限制的浏览器问题。您可以轻松地使用超大图标使浏览器崩溃，更多信息请点击此处
回答by Dulith De Costa
It is called 'favicon' and you need to add below code to the headersection of your website.
它被称为“ favicon”，您需要将以下代码添加到您网站的标题部分。
Simply add this to the <head>section.
只需将其添加到该<head>部分即可。
<link rel="icon" href="/your_path_to_image/favicon.jpg">
回答by Vincent Ramdhanie
回答by user3680001
<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file:
'apple-touch-icon-retina.png')}">
or you can use this one
或者你可以使用这个
<link rel="shortcut icon" sizes="114x114" href="${resource(dir: 'images', file: 'favicon.ico')}"
type="image/x-icon">
回答by Mike Fulton
Add a icon file named "favicon.ico" to the root of your website.
将名为“favicon.ico”的图标文件添加到您网站的根目录。
