网站开发需配置浏览器标签图标、PWA 图标以及页面 Logo,素材制作流程如下:
一、浏览器 Favicon 图标
使用 AI 绘图工具,生成一张 1:1 正方形 PNG 原图,作为图标基础素材。
转换生成 favicon.ico,用于浏览器标签栏显示。
工具地址:https://favicon.net.cn/img2ico
输出文件命名:favicon.ico,放置到项目 public 公共资源文件夹内。
生成多尺寸 PWA 图标,重点保证192×192、512×512 两个尺寸输出。
工具地址:https://favicon.net.cn/multi-size/
192×192:网页添加至手机 / 电脑桌面快捷方式时展示图标
512×512:PWA 应用启动,页面加载阶段屏幕居中展示的启动页图标
在public\static\img里保存三种尺寸的图片32*32,192×192,512×512
二、网页业务 Logo
准备网站页面展示用 Logo 图片,推荐图片比例 2:1(长方形),也可使用 AI 工具完成设计输出,用于网站头部、页脚等业务展示位置。
如果有多个Logo,可以根据使用位置命名,如logo-header.png,logo-footer.png,logo-mobile.png。如果就只有通用的一张图片就取名logo.png。图片都存放到public\static\img文件夹里面。
三、欣赏AI为我设计的图标(域名将使用citya.cn)


