修改网站图标（favicon）与设计图片：尺寸、格式、替换与多端适配
网站图标包括浏览器标签页的favicon、手机桌面图标、社交分享图等，修改这些图标是品牌统一的重要环节。
favicon修改。favicon是浏览器标签页上的小图标。尺寸：16x16、32x32、48x48像素，ICO格式或PNG格式。制作：用Photoshop设计正方形图标，导出PNG（32x32），然后用在线工具（如favicon.io）转成ICO。替换方法：1. 把favicon.ico放到网站根目录，大部分浏览器自动读取。2. 在模板head.html里加，明确指定路径。3. PbootCMS模板在head.html里加。4. 清浏览器缓存（favicon缓存很顽固，可用无痕模式测试）。
多尺寸favicon适配。现代设备需要多种尺寸：，，（iOS桌面图标）。用favicon.io生成全套图标，下载后放根目录，把生成的HTML代码加到head里。
苹果触摸图标（Apple Touch Icon）。用户把网站添加到iOS主屏幕时用的图标。尺寸180x180像素，PNG格式，圆角和光泽由系统自动添加。命名apple-touch-icon.png放根目录，或在head里指定路径。不要自己加圆角，系统会处理。
安卓桌面图标。Android Chrome用manifest.json定义图标。创建site.webmanifest文件，内容：{"name":"网站名","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}]}。head里加。用favicon.io生成时会包含这些文件。
社交分享图（Open Graph）。分享到微信、Facebook、Twitter时显示的预览图。尺寸1200x630像素（1.91:1），JPG或PNG，<300KB。在head里加，同时加og:title、og:description。微信分享图建议300x300正方形，微信会自动裁剪。PbootCMS可以在head.html里加固定的og图，或用插件按页面设置不同的分享图。
Logo修改。网站Logo是品牌核心。PC端Logo尺寸根据设计稿，通常高度40-60px，宽度自适应。格式：透明背景PNG，或SVG矢量图。替换：1. 准备新Logo，尺寸和旧Logo一致（高度相同，宽度可不同但要调整CSS）。2. 上传到/template/模板名/images/目录，覆盖logo.png。3. 或改模板head.html里的img src。4. SVG Logo直接改SVG文件内容，或替换文件。5. 移动端Logo可能单独设置，检查CSS里的移动端Logo样式。
Banner设计图片替换。首页Banner图尺寸PC端1920x500或1920x600，JPG格式，<300KB。移动端单独的Banner图750x400。替换：后台轮播管理里换图，或模板index.html里改img路径。注意Banner上的文字不要太靠边，响应式时两侧会被裁切，重要内容放在中间1200px安全区域。
设计图片规范。1. 所有图标和图片用品牌标准色，保持一致性。2. 导出时压缩，PNG用TinyPNG，JPG质量85%。3. 文件名用英文小写，如logo-header.png、favicon.ico。4. 保留设计源文件（PSD/AI/Sketch），方便后续修改。5. 视网膜屏（2x/3x）提供高分辨率图，SVG最佳。
替换后验证。1. 浏览器标签页favicon显示（清缓存或无痕模式）。2. 不同浏览器（Chrome、Safari、Firefox）都看。3. 手机添加到桌面看图标。4. 微信分享看预览图。5. PC和手机端Logo显示清晰。6. Banner图在不同屏幕尺寸下关键内容不被裁切。
图标虽小，影响品牌专业度。花时间做好多端适配，用户体验和品牌形象都提升。
更新时间：2026-08-26 18:02:25
上一篇：宝塔面板Linux环境要求_操作系统版本_硬件配置_安装前准备清单