HTML Favicon

Favicon 是一种显示在浏览器标签页页面标题左侧的小图像。

Favicon image from programiz

这里,网页标题前的小图像就是 favicon。


添加 Favicon

我们使用 HTML <link> 标签将 favicon 附加到文档中。例如:

<link rel="shortcut icon" href="/images/favicon.ico">

让我们看看这在实际网站上的样子。例如,programiz.com 的代码中可能有这样的内容:

<head>
    <title>Programiz: Learn to Code for Free!</title>
    <link rel="shortcut icon" href="favicon.png">
</head>
Favicon of programiz.com in the tab

这里,favicon.png 是通过 program 网站中 <link> 标签显示的,其中

  • rel - 定义链接文档的类型,即快捷图标
  • href - 定义图标的 URL

注意:几乎任何图像都可以用作 favicon。但是,建议使用简单、易于识别、小(通常为 16px X 16px)的图像。大多数网站都使用其徽标或徽标的缩小版本作为 favicon。


标题栏外的 Favicon

Favicon 还会在其他地方显示,例如:

浏览器书签

Favicon of programiz.com in a bookmark

在历史页面上

Favicon of programiz.com in user's browsing history

在移动搜索结果中

Favicon of programiz.com in search results


支持的文件格式

以下格式在所有主要浏览器中都受支持。

  • .ico
  • .png
  • .gif
  • .jpg
  • .svg

我们的高级学习平台,凭借十多年的经验和数千条反馈创建。

以前所未有的方式学习和提高您的编程技能。

试用 Programiz PRO
  • 交互式课程
  • 证书
  • AI 帮助
  • 2000+ 挑战