如何将我的网站徽标作为浏览器标签中的图标图像?


Answers:


175

该图像称为收藏.ico图标,它是一个小方形文件,是收藏夹图标的标准文件类型。你可以使用.png.gif太多,但你应该遵循的标准为更好的兼容性。

要为您的网站设置一个,您应该:

  1. 使徽标的正方形图像(据我所知,最大尺寸最好为32x32或16x16像素*),然后将其转换为.ico文件。您可以在Gimp,Photoshop(借助插件)或Favicon.ccRealFaviconGenerator之类的网站上执行此操作

  2. 然后,有两种设置方法:

    A)将其放在名称为的网站根文件夹/目录(旁边index.html)上favicon.ico

    要么

    B)链接到站点上<head></head>每个.html文件的标签之间,如下所示:

    <head>
      <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    </head>

如果您想favicon从任何网站上查看,只需编写www.url.com/favicon.ico即可(可能)看到它。Stackoverflow的图标图标为16x16像素,维基百科为32x32。

*:甚至存在浏览器问题,没有文件大小限制。您可能会轻易用一个巨大的网站图标使浏览器崩溃,更多信息请点击这里


18

它被称为“ favicon ”,您需要在网站的标题部分添加以下代码。

只需将其添加到该<head>部分。

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


2
<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">

apple-touch-icon适用于iOS
WebApp

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.