WordPress网站图标添加

1. 先唠唠为啥网站图标这玩意儿重要。你打开浏览器看网页，标签页上那个小图片就是它。别看尺寸不大，但能让人一眼认出你的站，好比苍蝇馆子的招牌，不一定豪华但得有辨识度。WordPress 从不知道哪个版本开始，把这事儿整得贼简单——你甚至不用碰代码，但今天咱偏要代码和后台都折腾一下，反正最后能成。

2. 常规玩法：用后台自定义器。登录 WordPress 后台，左边菜单摸到“外观” -> “自定义”，点进去找“站点身份”或者“网站图标”选项。这里你上传一张图片，系统会自动给你裁成各种尺寸，从电脑到手机都能适配。但问题来了，有时候主题瞎搞，或者缓存插件作妖，上传了图标却不显示。这时候别慌，咱有代码保底。

3. 手动硬核方案：直接往主题里插代码。打开你正在用主题的 functions.php 文件（路径一般是 /wp-content/themes/你的主题/），然后塞下面这段：

function add_site_favicon() {
    echo '<link rel="icon" href="' . esc_url(get_stylesheet_directory_uri() . '/images/favicon.ico') . '" type="image/x-icon">';
    echo '<link rel="shortcut icon" href="' . esc_url(get_stylesheet_directory_uri() . '/images/favicon.ico') . '" type="image/x-icon">';
}
add_action('wp_head', 'add_site_favicon');
add_action('admin_head', 'add_site_favicon');

这段代码的意思是说，在网站前台和后台的头部都输出一个 favicon 链接。注意看，图标文件我假设放在主题下的 images 文件夹里，名字叫 favicon.ico。你要是放别处，自己改路径哈。

4. 但现代浏览器整得花里胡哨，除了传统 favicon，还得照顾苹果设备和安卓 Chrome。所以最好整一套 PNG 图标，然后多行代码一起上：

function add_fancy_favicons() {
    $icon_path = get_stylesheet_directory_uri() . '/assets/icons/';
    ?>
    <link rel="icon" href="<?php echo $icon_path ?>favicon-32x32.png" sizes="32x32" />
    <link rel="icon" href="<?php echo $icon_path ?>favicon-192x192.png" sizes="192x192" />
    <link rel="apple-touch-icon" href="<?php echo $icon_path ?>apple-touch-icon.png" />
    <meta name="msapplication-TileImage" content="<?php echo $icon_path ?>mstile-144x144.png" />
    <?php
}
add_action('wp_head', 'add_fancy_favicons');

这样写的话，你得提前生成一堆尺寸的图标文件，扔到主题的 assets/icons 目录下。具体要哪些尺寸？常见的比如 32x32、192x192、180x180（苹果），还有微软磁贴用的 144x144。生成这些图标可以去在线工具站，比如 realfavicongenerator.net，传一张大的上去，它帮你切好全家桶。

5. 有时候你发现图标上传了、代码也加了，但浏览器死活不更新。这时候八成是缓存问题。试试 Ctrl+F5 强制刷新，或者清理浏览器缓存。如果还不行，可能是服务器或者CDN缓存，等一会儿再瞅瞅。代码写错路径也是常见翻车点，打开网页源代码检查一下链接地址对不对。

6. 最后扯点玄学：为什么 WordPress 要搞这么复杂？其实不是它复杂，是网络生态本来就乱。每个设备每个浏览器都想搞点特殊，结果苦了咱们开发的。但好在只要按套路来，图标总能显示。如果真遇到鬼打墙，回头检查代码括号有没有少写，引号是不是配成对，这些基本操作往往能救命。好了，折腾完图标，下次可以再折腾别的，WordPress 就是这样，越折腾越上头。

Tags：

文章版权声明：除非注明，否则均为WP集市原创文章，转载或复制请以超链接形式并注明出处。