修改网站图标与设计图片的完整规范：favicon、Logo、Open Graph、触摸图标
网站图标是品牌展示的重要部分，包括favicon、Logo、社交分享图、手机桌面图标等，统一规范能提升品牌专业度。
favicon（浏览器标签图标）。1. 尺寸：16x16、32x32、48x48像素，ICO或PNG格式。2. 制作：设计正方形图标，导出PNG，用favicon.io转成ICO。3. 放置：favicon.ico放网站根目录，大部分浏览器自动读取。4. 明确指定：head.html加。5. 多尺寸：。6. 清缓存测试，favicon缓存很顽固，用无痕模式验证。
Apple Touch Icon（iOS桌面图标）。1. 尺寸：180x180像素，PNG格式。2. 命名：apple-touch-icon.png放根目录。3. 效果：用户把网站添加到iOS主屏幕时显示，系统自动加圆角和光泽。4. 不要自己加圆角，系统会处理。5. head里加。6. 可以指定不同尺寸：180x180、152x152、144x144，适配不同设备。
Android桌面图标。1. 创建site.webmanifest文件：{"name":"网站名","short_name":"短名","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}]}。2. head加。3. 图标尺寸192x192和512x512，PNG格式。4. 主题颜色：。
Open Graph图（社交分享图）。1. 尺寸：1200x630像素（1.91:1比例），JPG或PNG，<300KB。2. 用途：分享到微信、Facebook、Twitter、LinkedIn时显示的预览图。3. head加。4. 同时加og:title、og:description、og:url、og:type。5. 微信分享图建议300x300正方形，微信会自动裁剪。6. 每个页面可以有不同的og图，PbootCMS模板里用文章缩略图作为og图。
Twitter Card。1. 。2. 。3. 和OG图可以共用同一张图。
Logo。1. PC端Logo：高度40-60px，宽度自适应，透明背景PNG或SVG。2. 移动端Logo：可以用简化版或缩小尺寸。3. 格式：SVG最佳（矢量、小、清晰），其次PNG-24。4. 替换：上传到/template/模板名/images/覆盖，或改head.html的img src。5. Logo旁的网站名称：如果是文字，在head.html里改。6. favicon和Logo风格保持一致，用相同的图形元素和颜色。
Banner设计图。1. PC Banner：1920x500或1920x600，JPG，<300KB。2. 移动Banner：750x400，单独准备。3. 安全区域：重要内容放中间1200px，两侧留空，响应式裁切不丢内容。4. 文字对比度：Banner上的文字和背景对比度够，加半透明遮罩确保可读。5. 轮播Banner风格统一，尺寸一致。
设计图片通用规范。1. 品牌色统一，用品牌标准色值。2. 字体统一，标题和正文字体符合品牌规范。3. 圆角、阴影、边框样式一致。4. 图片风格统一（摄影/插画/扁平）。5. 所有图片压缩，WebP格式优先。6. Retina屏提供2x图或SVG。7. 保留设计源文件（PSD/AI/Sketch/Figma），方便后续修改。
替换后验证清单。1. 浏览器标签页favicon显示（清缓存或无痕模式）。2. Chrome、Safari、Firefox都看。3. iPhone添加到桌面看图标。4. 安卓添加到桌面看图标。5. 微信分享看预览图。6. PC和手机端Logo清晰。7. Banner在不同尺寸下关键内容不被裁切。8. 所有图标文件可访问，无404。
图标虽小，影响品牌第一印象。花时间做好多端适配和统一规范，网站专业度大幅提升。用favicon.io一次生成全套图标（favicon、apple-touch-icon、android图标、manifest），效率高。
更新时间：2026-08-26 18:02:31
上一篇：修改网站图标（favicon）与设计图片：尺寸、格式、替换与多端适配
下一篇：修改网页模板的常见误区与正确做法