网站图标和 Apple Touch 图标
添加显示在浏览器标签页和主屏幕上的图标
网站图标和 Apple Touch 图标 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
什么是网站图标
网站图标是显示在以下位置的小图标：
- 浏览器标签页
- 书签列表
- 浏览器历史记录
- 搜索结果中（有时）
它可以帮助用户在多个打开的标签页中一眼识别您的网站。
基本网站图标链接
在 head 中使用链接元素添加网站图标：
<head>
<!-- SVG favicon (modern, scales at any size) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallback -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- Legacy ICO for Internet Explorer -->
<link rel="shortcut icon" href="/favicon.ico">
</head>网站图标格式
推荐的网站图标格式策略：
- SVG — 矢量格式，可完美缩放，文件体积小（优先使用）
- PNG 32x32 — 不支持 SVG 的浏览器的备用格式
- ICO — 包含 16x16 和 32x32 尺寸的传统格式
ICO 文件放置位置
域名根目录中的 favicon.ico 文件会被自动获取：
<!-- Browsers request /favicon.ico automatically -->
<!-- Placing it at the domain root means no link tag is needed:
/favicon.ico -- served without any HTML link tag
-->
<!-- But: specifying it explicitly is better: -->
<link rel="icon" href="/favicon.ico" sizes="32x32">sizes 属性
sizes 属性指定图标尺寸：
<link rel="icon" href="/icon-16.png" sizes="16x16">
<link rel="icon" href="/icon-32.png" sizes="32x32">
<link rel="icon" href="/icon-64.png" sizes="64x64">苹果触控图标
当用户将您的网站添加到 iOS 主屏幕时，会显示苹果触控图标：
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Recommended size: 180x180 px -->
<!-- Used by: iOS Safari, some Android browsers -->
<!-- Apple applies rounded corners and gloss effect automatically -->
<!-- Pre-composited icon (no transparency) looks best -->适用于 Android 的可遮罩图标
Android PWA 使用可遮罩图标来填充图标形状：
<link rel="manifest" href="/manifest.json">
<!-- In manifest.json: -->
<!--
{
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
}
]
}
-->深色模式网站图标
提供支持深色模式的 SVG 网站图标：
<!-- SVG favicon with dark mode support: -->
<!-- In /favicon.svg: -->
<!--
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
@media (prefers-color-scheme: dark) {
.icon-bg { fill: white; }
.icon-mark { fill: black; }
}
.icon-bg { fill: #0070f3; }
.icon-mark { fill: white; }
</style>
<circle class="icon-bg" cx="16" cy="16" r="16"/>
<text class="icon-mark" x="50%" y="60%">C</text>
</svg>
-->用于 PWA 图标的 Web 应用清单
渐进式 Web 应用的完整图标设置：
<link rel="manifest" href="/manifest.json">
<!-- manifest.json icons array: -->
<!--
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
-->完整的网站图标设置
完整的现代网站图标配置：
<head>
<!-- SVG: scales to any size, supports dark mode -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallback -->
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
<!-- Apple home screen -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- PWA manifest (for Android home screen) -->
<link rel="manifest" href="/manifest.json">
</head>测试网站图标
如何验证网站图标设置：
- 强制重新加载（Ctrl+Shift+R / Cmd+Shift+R），以清除缓存的网站图标
- 使用网站图标检查工具（realfavicongenerator.net）
- 在实际 iOS 设备上测试苹果触控图标
- 使用 Lighthouse → PWA 审计检查 PWA 清单
快速检查
苹果触控图标图片的建议尺寸是多少？
回顾：网站图标
网站图标要点：
- SVG 网站图标 — 现代、可缩放，并支持深色模式
- PNG 32x32 — 不支持 SVG 的浏览器的备用格式
- 根目录中的 ICO — IE 的传统备用格式
apple-touch-icon180×180 — iOS 主屏幕- Web 应用清单 — Android PWA 图标（192px 和 512px）
常见问题解答
「网站图标和 Apple Touch 图标」课时是免费的吗？
是的 — 「网站图标和 Apple Touch 图标」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「网站图标和 Apple Touch 图标」这节课中我会学到什么？
添加显示在浏览器标签页和主屏幕上的图标 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「网站图标和 Apple Touch 图标」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- title 及其在 SEO 中的作用
- meta charset、viewport、author 和 description
- 规范 URL 与 robots 元标签
- 网站图标和 Apple Touch 图标