📖 Favicon 教程

完整的使用指南和安装教程

目录

什么是 Favicon？

Favicon（"favorite icon"的缩写）是显示在浏览器标签、书签栏和地址栏中的小图标。它是网站品牌识别的重要组成部分。

💡 提示：Favicon 虽然小，但对用户体验和品牌形象非常重要。一个好的 favicon 可以让用户快速识别和找到您的网站。

为什么需要 Favicon？

如何安装 favicon.ico

1. 将生成的 favicon.ico 文件上传到网站根目录

2. 在 HTML 的 <head> 标签中添加以下代码：

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

如何安装 favicon.png

1. 将生成的 favicon.png 文件上传到网站目录

2. 在 HTML 的 <head> 标签中添加以下代码：

<link rel="icon" href="/favicon.png" type="image/png">

HTML Favicon 代码

推荐的完整 Favicon HTML 代码（同时提供多种格式以获得最佳兼容性）：

<!-- 标准 favicon.ico -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">

<!-- PNG 格式（推荐尺寸）-->
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png">

<!-- Apple Touch Icon（用于 iOS 设备）-->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
💡 最佳实践：建议同时提供 ICO 和 PNG 格式，并为不同尺寸创建 separate 文件，以确保在所有浏览器和设备上都能正常显示。

WordPress Favicon

方法 1：使用主题自定义（推荐）

  1. 登录 WordPress 后台
  2. 进入 外观 → 自定义
  3. 点击 站点身份
  4. 在 站点图标 部分上传您的 favicon 图片（建议 512x512 px）
  5. 点击 发布

方法 2：手动添加

  1. 将 favicon 文件上传到主题目录
  2. 编辑主题的 functions.php 文件
  3. 添加以下代码：
function add_favicon() {
    echo '<link rel="icon" href="' . get_stylesheet_directory_uri() . '/favicon.ico" type="image/x-icon">';
}
add_action('wp_head', 'add_favicon');

Shopify Favicon

  1. 登录 Shopify 后台
  2. 进入 Online Store → Themes
  3. 点击 Customize
  4. 点击 Theme settings → Favicon
  5. 上传您的 favicon 图片（建议 32x32 或 64x64 PNG）
  6. 点击 Save

Squarespace Favicon

  1. 登录 Squarespace 后台
  2. 进入 Design → Logo & Title
  3. 在 Browser Icon (Favicon) 部分上传您的图片
  4. Squarespace 会自动处理并生成所需尺寸
  5. 点击 Save
💡 尺寸建议：不同平台推荐的 favicon 尺寸略有不同。一般来说，准备 32x32、64x64 和 512x512 三种尺寸可以覆盖所有使用场景。