如何将网站的标志放置为浏览器选项卡中的图标图片？

Question

147

在浏览器标签页旁边的页面标题中的图像 - 如何在此处链接图像？

- jay

4

关键词是 favicon.ico。 - user956584

1

http://en.wikipedia.org/wiki/Favicon - Ry-

6个回答

32

它被称为'网站图标'，您需要将以下代码添加到您的网站头部部分。

只需将此代码添加到<head>部分即可。

<link rel="icon" href="/your_path_to_image/favicon.jpg">

- Du-Lacoste

我已经尝试过很多次，但从来没有成功过。 - daddycardona

13

这是网站图标并在链接中有解释。

例如来自W3C。

  <link rel="icon" 
     type="image/png" 
     href="http://example.com/myicon.png">

当然，还需要将图像文件放置在正确的位置。

- Vincent Ramdhanie

4

在您的网站根目录下添加名为“favicon.ico”的图标文件。

- Mike Fulton

请记住，它必须恰好为 16x16 像素。 - uınbɐɥs

5

不，它需要是正方形的，并且可以是任何尺寸，只是加载时间会更长。 - LasagnaAndroid

3

<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 
'apple-touch-icon-retina.png')}">

或者您可以使用这个。

<link rel="shortcut icon" sizes="114x114" href="${resource(dir: 'images', file: 'favicon.ico')}"
type="image/x-icon">

- user3680001

apple-touch-icon 用于 iOS 的 web 应用程序。 - LasagnaAndroid

0

**<HEAD>**

  < link rel="icon" href="directory/image.png">

然后运行并享受它。

- Muji Tech

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- LasagnaAndroid · Accepted Answer

那张图片被称为'favicon'，它是一个小的正方形.ico文件，这是标准的favicon文件类型。你也可以使用.png或.gif，但是为了更好的兼容性，你应该遵循标准。

要设置网站的favicon，您应该：

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 .ico file. You can do this on Gimp, Photoshop (with help of a plugin) or a website like Favicon.cc or RealFaviconGenerator.
Then, you have two ways of setting it up:

A) Placing it on the root folder/directory of your website (next to index.html) with the name favicon.ico.

or

B) Link to it between the <head></head> tags of every .html file on your site, like this:
```
<head>
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
```

如果你想查看任何网站的 favicon，只需写上 www.url.com/favicon.ico 即可（可能）看到。Stackoverflow 的 favicon 大小为 16x16 像素，Wikipedia 的大小为 32x32。

*: 甚至有一个浏览器问题没有文件大小限制。你可以用一个非常大的 favicon 轻松崩溃一个浏览器，更多信息 here。