ThinkPHP8网站开发图标设计

生活日记 工作心得
25
发表时间: 编辑:顾永胜来源:0513.city标签:网站开发

网站开发需配置浏览器标签图标、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)

用于手机桌面图标
网站头部Logo
网站底部LOGO