iOS网页图标不显示的根本原因是只认apple-touch-icon且要求严格：必须用声明、PNG格式、无透明通道、绝对路径、尺寸精准匹配（如180x180），且需真机验证。
iOS网页图标为什么总不显示？
根本原因是 iOS 只认 apple-touch-icon，且对尺寸、格式、路径位置极其挑剔。普通 在 Safari 移动版基本无效。
- 必须用
，不能只靠favicon.ico - 推荐尺寸是
180x180（iPhone 主屏图标标准），152x152（iPad）也建议提供 - 图片必须是 PNG 格式，无透明边框，无 alpha 通道（否则 iOS 可能自动加白底或拒用）
- 路径需为绝对路径（如
/icons/icon-180.png），相对路径在某些 iOS 版本下会失败
如何正确声明多个尺寸的 iOS 图标？
不要只塞一个 apple-touch-icon，iOS 不同设备和缩放场景会按需选取；但必须显式声明，它不会自动缩放裁剪。
- 把图标文件放在根目录或明确路径下，例如
/apple-touch-icon-180x180.png - 在
中按尺寸逐个声明：<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"><br><link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"><br><link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"><br><link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
- 注意：
sizes属性值必须与实际图片像素完全一致，写成"180x180"，不能写"180"或"180px"
标题怎么让 iOS 主屏显示得干净？
iOS 添加到主屏时，默认取
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 长度控制在 12–15 个英文字符或 6–7 个汉字以内（超出会被省略为 …）
- 避免开头空格、末尾标点（如
"My App —"显示为"My App"，但"My App"更稳） - 不要依赖
—— 这个属性早已被 iOS 忽略（自 iOS 12 起失效） - 如果用了 PWA，
manifest.json中的short_name才会影响主屏图标下方文字，但前提是已启用 Web App Manifest 且用户是“添加到主屏幕”而非单纯收藏
验证图标是否生效的实操步骤
别信浏览器开发者工具预览，真机测试才是唯一标准。
- 用 iPhone Safari 打开网页 → 点击分享按钮 → 滚动到底部点“添加到主屏幕”
- 添加后立刻查看主屏图标，不是缓存图 —— 如果还是默认灰色图标，说明
apple-touch-icon声明失败或图片返回了 404/403 - 用 Safari 开发者工具（连接 Mac 的 Safari → 开发 → [你的设备] → [页面]）检查 Network 标签页，过滤
apple-touch-icon请求，确认状态码是 200 且响应头含Content-Type: image/png - 如果图标显示模糊，大概率是图片本身非精确尺寸（比如用 CSS 缩放 300x300 图片到 180x180），iOS 不重采样，只会硬裁或拉伸
真正卡住人的地方不在代码写法，而在图标文件本身：PNG 必须是 RGB 模式（不能带 Alpha）、边缘必须紧贴画布、尺寸必须严格匹配 sizes 值、路径必须可被 Safari 直接请求并返回 200。少一个条件，主屏就 fallback 成默认图标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
