vite 项目: 不同的环境添加不同的 favicon

开发的时候,给不同环境的项目添加不同的 favicon

01 准备 favicon

可以在这里制作不同的 favicon,放在 public 目录下

https://www.photopea.com/

02 不同的环境,使用环境变量.env

不同环境的变量命名,通常我只写这2个环境

# env.developemnt
VITE_FAVICON_URL=/favicon.dev.ico
# env.production
VITE_FAVICON_URL=/favicon.ico

03 在 html 中添加这一句

HTML 中添加 favicon.icon

<link rel="shortcut icon" type="image/x-icon" href="%VITE_FAVICON_URL%" />

实际效果,当前这个为 dev 的 icon

vite react favicon dev beta