记一次 WordPress 2025 主题 Logo 与 Favicon 的折腾之旅

从豆包生成到 Photopea 修图，从”方块感”到完美显示

写在前面

最近把博客主题切换到了 WordPress 2025 主题，想着趁这个机会把站点的 Logo 和 Favicon 也一并更新一下。以前用的都是现成的图标，这次我决定自己用 AI 设计一个。

想法很美好，但实际操作下来，踩了一路的坑。从豆包生图、到透明背景处理、再到 Photopea 手动修图，折腾了大半天才最终搞定。

这篇文章记录了我完整的踩坑过程，希望能给遇到类似问题的朋友一些参考。

一、需求背景

我的博客是一个技术博客，主要分享 PHP、Go、Linux、MySQL 等后端开发经验。这次想设计的 Logo 主打”水”与”夜”的意象，配合博客名称”永夜”。

具体要求很简单：

• Logo 用于网站头部显示
• 同时作为站点图标（Favicon）在浏览器标签页显示
• 需要透明背景（Favicon 必须透明）
• 至少 512×512 像素

二、方案一：豆包生成白底 Logo（踩坑开始）

先用豆包生成了一张白色背景的 Logo，整体效果还不错。

但上传到 WordPress 后，问题来了：

在网站头部显示时，Logo 周围有明显的”方块感”，就像一张贴纸贴在了白纸上，边缘有一圈灰白色的杂色。

Favicon 就更明显了，浏览器标签页上直接就是一个白色方块，完全看不出 Logo 的形状。

初步分析：AI 生成的图片虽然在视觉上看起来是”白底”，但边缘残留了半透明的杂色像素，在网页白色背景下这些杂色就暴露了。

三、方案二：让豆包生成 SVG（失败）

既然 PNG 有边缘问题，那直接生成 SVG 矢量格式是不是就能完美解决了？

我让豆包重新生成 SVG 格式的 Logo。

结果下载下来一看——还是 PNG 格式。而且图片上赫然带着”豆包 AI 生成”的水印字样，让豆包去掉，无论怎么描述都去不掉。

这个方案直接宣告失败。

四、方案三：豆包生成透明背景 PNG（更糟）

改成让豆包生成透明背景的 PNG。

上传后，效果比白底更差。

在网页白色背景上，原来只是边缘有些杂色，现在整个 Logo 周围都有一圈明显的半透明灰边，方块感比白底版本更加明显。

Favicon 就更不用说了，直接就是一个灰色方块。

原因分析：豆包的”透明背景”实际上是在生成有底图后再”抠”出来的，边缘残留了大量的半透明像素（专业术语叫”Matte”），这些像素在白色背景上叠加后形成了可见的灰边。

五、转向 Photopea 手动处理

既然 AI 生成的图片都需要后期处理，那就自己动手吧。

我选择了免费的在线图片编辑器 Photopea（web 版的 Photoshop，完全免费）。

5.1 第一步：缩小图像尺寸

原图尺寸是 2048×2048，对于 Favicon 来说太大了。先缩小到 1024×1024。

在 Photopea 中点击 图像 → 图像大小，将宽度设为 1024 像素，高度自动同步。

为什么先缩小再处理？ 如果在大图下清理边缘，缩放到小尺寸后，原本锐利的边缘会产生新的半透明像素，方块感会卷土重来。所以要先缩放再清理。

5.2 第二步：用魔棒工具清理杂色

关键的一步来了。

在 Photopea 中，用魔棒工具（快捷键 W），容差设为 10，点击 Logo 外围的灰白色杂色区域，按 Delete 键删除。

操作要点：

• 解锁背景图层（双击带锁的 Background 图层即可）
• 取消勾选”连续”选项，一次性选中所有分散的杂色
• 如果选中了 Logo 本身，就把容差值调低

5.3 第三步：导出透明 PNG

清理干净后，导出为 PNG 格式。

注意：导出时要确保勾选”透明度”选项。如果看不到透明度选项，说明图像模式不在 RGB 下，先到 图像 → 模式 中切换到 RGB 颜色。

六、验证结果

Chrome 浏览器（无痕模式）

上传到 WordPress 后，在 Chrome 无痕模式下查看：

• 网站头部 Logo：完美融合，无方块感 ✅
• Favicon：正常显示，边缘清晰 ✅

Firefox 浏览器（无痕模式）

Firefox 的 Favicon 渲染一直是个老大难问题，但这次结果也正常：

• 网站头部 Logo：正常 ✅
• Favicon：正常显示 ✅

七、踩坑总结

回顾整个折腾过程，总结几点经验：

1. AI 生成的图片需要后期处理

无论是豆包还是其他 AI 绘图工具，生成的图片直接用于网站往往不够完美。尤其是透明背景的 PNG，AI 的”抠图”算法会留下边缘杂色。

建议：做好心理准备，AI 出图只是第一步，后期处理是绕不开的。

2. 透明 PNG 的”方块感”是边缘杂色导致的

不是因为格式不对，而是因为 PNG 边缘有半透明的灰色像素。这些像素在深色背景下不明显，但在白色背景下就会形成可见的灰边。

解决方案：用 Photopea 的魔棒工具手动删除边缘杂色，或使用”移去白色杂边”功能。

3. 先缩放再清理，顺序很重要

如果在 2048 大图下清理边缘，缩放到 1024 后，边缘会重新产生半透明像素。正确的顺序是：先缩放到目标尺寸，再清理边缘。

4. Favicon 和 Logo 可以分开配置

WordPress 的”站点标识”中，”站点 Logo”和”站点图标”是两个独立的上传位置。如果一张图难以兼顾两者，可以分开上传不同的图片。

5. Photopea 的”保存为 Web 格式”在哪？

中文版的 Photopea 菜单翻译可能有所不同，如果找不到”保存为 Web 格式”，可以直接用 文件 → 导出为 → PNG，其本质上就是 WEB 格式了。或者直接用快捷键 Ctrl+Shift+Alt+S。

八、总结

最终，我用”豆包生成 + Photopea 手动修图”的方式，搞定了 WordPress 2025 主题的 Logo 和 Favicon。
后期打算对于 站点图标 再优化一下了。现在还是有明显的方块感。由于时间关系，决定暂缓处理。

希望这篇文章能帮到正在折腾 WordPress Logo 和 Favicon 的你。