网站favicon部署实操：文件、声明与缓存刷新

标准favicon包包含5类文件，分别适配不同设备和浏览器。ICO格式favicon.ico是传统格式，尺寸多为16×16、32×48，放置在网站根目录可被旧版IE自动识别。

PNG格式多尺寸图标用于现代浏览器和移动设备，常用尺寸包含16×16、32×32、180×180。apple-touch-icon专为iOS Safari设计，让用户添加网站到主屏幕时显示清晰图标。Web manifest文件为PWA应用提供图标配置，适配安卓系统添加主屏幕的场景。

声明顺序遵循向下兼容规则，先声明高优先级现代格式，后声明兜底传统格式。具体顺序为，先声明32×32尺寸的PNG格式图标，再声明apple-touch-icon图标，最后声明ICO格式favicon。

所有link标签需要添加正确的rel属性和尺寸属性，PNG图标需添加sizes属性标注对应尺寸，apple-touch-icon默认适配180×180尺寸，可省略额外尺寸标注。manifest文件需添加rel="manifest"属性，指向文件对应路径。

Next.js 13+版本使用App Router时，需要将favicon.ico放置在app目录根层级，Next.js会自动处理路由输出。多尺寸PNG、apple-touch-icon和manifest文件可放置在app/public目录，引用时使用根路径绝对地址。若使用Pages Router，所有文件放置在public根目录即可。

WordPress自定义主题部署favicon时，可将所有favicon文件放置在主题目录的assets子文件夹，也可直接上传到网站根目录，通过主题functions.php文件添加对应link标签声明。部分WordPress版本支持在后台外观自定义菜单上传favicon，系统会自动生成声明和路径。

浏览器会对网站favicon进行长期强缓存，多数桌面浏览器缓存周期超过7天。修改favicon后，仅刷新页面无法触发浏览器重新请求新文件，因此会出现旧图标持续显示的问题。

最可靠的更新方法是给favicon资源URL添加版本查询参数，比如将href="/favicon.ico"修改为href="/favicon.ico?v=2"，参数变更后浏览器会视为新资源，直接请求最新文件，绕过原有缓存。也可以清理浏览器缓存后重新访问页面，但该方法仅适合开发者本地调试，无法影响访问用户的缓存。

部署后需要验证多个场景下的图标显示状态，逐一确认适配效果。首先验证桌面浏览器标签页的图标显示，检查16×16、32×32尺寸是否清晰。其次验证浏览器书签栏的图标显示，确认尺寸适配正确。

移动设备需要验证两个场景，分别是iOS Safari添加网站到主屏幕后的图标显示，以及安卓PWA添加到主屏幕后的图标显示。最后检查网站源代码，确认所有link标签路径正确，无相对路径错误导致的404错误，可以通过浏览器开发者工具网络面板确认所有图标文件返回200状态码。