术语图鉴/前端基础/网站图标
←→切换Esc返回

网站图标 Favicon

你可能会说

浏览器标签页上那个小图标怎么换?现在显示的是默认地球。

Favicon 是显示在浏览器标签页、书签栏、历史记录中的网站小图标(通常 16×16 或 32×32 像素)。

浏览器标签页上显示的那个小图标。每个打开的网页都有一个,帮你在一排标签里快速认出自己的网站。

也常被叫作Favicon

生活类比

像书的封面缩略图——书架(标签栏)上一眼就能认出哪本是你的。

🎮 动手试试

👇 选择图标查看标签页效果

🚀My Website×
选择题选择一个你认为最合适的答案

关于「网站图标」,以下哪个描述最准确?

你可以这样告诉 AI

帮我设置网站 favicon:用 Next.js 的 app/favicon.ico,再提供 apple-touch-icon 和 SVG 版本,支持暗色模式。

容易混淆?这样区分

网站图标 Favicon≠
Logo 网站 Logo

Logo 是页面内显示的品牌标识(大),Favicon 是标签页的微型图标(16px)。

网站图标 Favicon≠
App Icon 应用图标

App Icon 是手机桌面的应用图标(180px),Favicon 是浏览器标签的小图标。

什么时候用

品牌识别

浏览器标签页上显示你的小图标,用户在一堆标签中一眼认出你的网站,提升专业感。

和 AI 协作时

想让 AI 配置 favicon 时,直接说「帮我设置网站图标,提供 ico、SVG 和 apple-touch-icon 版本」。

什么时候不用

内部工具/原型

只给自己或团队用的内网系统,标签页有没有图标并不影响使用效率。

与 Web 无关的项目

移动 App、桌面软件、CLI 工具等不需要浏览器标签页图标。

组成结构 · Anatomy

1
核心概念Core

浏览器标签页上显示的那个小图标。每个打开的网页都有一个,帮你在一排标签里快速认出自己的网站。

2
实际表现In Practice

像书的封面缩略图——书架(标签栏)上一眼就能认出哪本是你的。

3
与 AI 的关联AI Context

和 AI 沟通时提到「换个 favicon」,就是换浏览器标签页上的小图标。

典型使用场景

设置网站图标
告诉 AI「帮我给网站加 favicon:准备 32x32 的 .ico 放根目录,再生成 180x180 的 apple-touch-icon,支持暗色模式切换」
想弄懂概念时
告诉 AI「用大白话给我解释什么是网站图标,举个生活中的例子」

延伸阅读