如何在我的网站上添加收藏夹图标?


20

在网站上添加Favicon的现代标准是什么标记?标准图像格式和尺寸是什么?

Answers:


8

.ico最好在所有浏览器中工作,因为大小最广泛使用32x32,16x16也可以工作(这是大多数地方在浏览器中使用的实际大小)。

同样不是您的问题,它们应为8或24位色深。

可能值得注意的是,如果您打算让iWhatever用户将您的站点添加为书签<link>,则该图像是单独的,例如StackOverflow:

<link rel="apple-touch-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png">

这是:
SO Touch图标


6

您可以使用http://www.favicon.cc/之类的工具导入图片并将其转换为收藏夹图标,或者仅从头开始创建。

之后,如果您命名文件favicon.ico并将其放在网站的根目录中,则大多数网络浏览器都会自动获取它。

但是您也可以像这样在html文件中明确声明它:

<link rel="shortcut icon" type="image/png" href="path/to/your/favicon.png" />

具有使用以外的其他格式的优点ico,在不同页面上使用不同的图标,将图标放置到其他位置,使用其他名称favicon等。



2

使用IE的完整域http路径标记并将favicon保留在文档文件夹中:

<link rel="shortcut icon" href="http://www.your-site-domain/favicon.ico">

标准图片格式:

  • .ico
  • 16 x 16像素

1

对于不同的设备,浏览器和操作系统,可以使用不同的图标。例如,下面的列表可能会启发您。务必随着事情的进展来纠正/编辑列表。

<link rel="icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="icon" type="image/png" sizes="96x96" href="/images/icons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png" />
<link rel="shortcut icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="apple-touch-icon" sizes="57x57" href="/images/icons/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/images/icons/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/images/icons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/images/icons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/images/icons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/images/icons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/images/icons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/images/icons/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" href="/images/icons/android-chrome-192x192.png" sizes="192x192" />
<link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-TileImage" content="/images/icons/mstile-144x144.png" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<meta name="theme-color" content="#282B34" />

0

您不再需要链接,但这很有用。相反,只要您在根目录中保留名为favicon.ico的文件(这是一个ico),它将用作图标。


0

使用GIMP创建.ico文件时遇到了一些麻烦,但是本文提供了详细的说明。技巧似乎是先保存为GIF格式以转换为索引色表,然后再将其转换为ICO格式。

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.