在 Mac 上为网站生成网站图标
网站所需的所有网站图标，外加 Web 应用清单和可粘贴到页面中的 HTML。
Mac 上的网站图标生成器
App 截图，使用的是示例文件。
如何使用网站图标生成器
- 1
拖入标志
使用一张图像，尽量为正方形且至少 512 px。非正方形图像会被裁剪为居中的正方形。
- 2
添加你的网站信息
为 Web 清单输入网站名称和主题颜色，并选择 Apple touch 图标背景。
- 3
点按“制作网站图标”
所有网站图标文件都会生成，同时附带清单文件和 HTML 代码片段。
- 4
上传到你的网站
将“favicons”文件夹（位于“下载 › OneMacTools”中的带日期文件夹里）中的文件拷贝到网站根目录，并将 HTML 粘贴到页面的 <head> 中。App 中也会显示这段代码。
网站图标生成器的功能
只需一个标志，即可得到内含 16、32 和 48 px 的 favicon.ico，16 和 32 px 的 PNG，带纯色背景、在 iPhone 上不会变黑的 180 px Apple touch 图标，以及用于 Android 和可安装 Web App 的 192 和 512 px 图标——另外还有包含网站名称和主题颜色的 site.webmanifest，以及可粘贴到 <head> 中的 HTML 代码片段。
适合
- 为新网站添加网站图标
- 让网站可以安装到手机上
- 替换模糊的网站图标
选项说明
- 网站名称
- site.webmanifest 中使用的名称，有人在手机上安装你的网站时会显示。留空则使用图像的文件名。短名称取前 12 个字符。
- 主题颜色
- 十六进制颜色，例如 #1E90FF，用作浏览器的主题颜色和 manifest 的背景颜色。留空则为白色。
- Apple touch 图标背景
- 白色、主题颜色或黑色。iPhone 会把透明的主屏幕图标显示在黑色上，因此 180 px 的 Apple touch 图标会使用纯色背景。
- 圆角
- 默认关闭。为每种尺寸网站图标中的标志添加圆角。
最佳实践
- 请使用简洁的图形，而不是带文字的完整标志。在 16 px 下，只有粗重的形状才能辨认。
- 从透明 PNG 开始，这样网站图标在浅色和深色浏览器标签页上都能好看。
- 以十六进制值输入主题颜色。它会为部分手机上的浏览器界面着色，因此请选择你的主品牌色。
- 上传后，请在无痕窗口中打开你的网站检查新图标，因为浏览器会长时间缓存网站图标。
兼容
- 输入
- 一张图像，最好是 512 px 或以上的正方形 PNG。
- 输出
- 一个“favicons”文件夹，包含 favicon.ico（内含 16、32 和 48 px）、favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png (180 px)、android-chrome-192x192.png 和 android-chrome-512x512.png，以及 site.webmanifest 和 add-to-head.html。
- 非正方形图像会居中裁剪为正方形。
关于网站图标生成器的问题
网站需要哪些网站图标文件？
用于旧版浏览器的 favicon.ico，用于标签页的 16 和 32 px PNG，用于 iPhone 主屏幕的 180 px Apple touch 图标，以及用于 Android 的 192 和 512 px 图标和 Web 清单。OneMacTools 会生成所有这些文件，以及可粘贴到页面 <head> 中的 HTML。
文件会保存到哪里？
放在网站根目录中，与 index.html 放在一起。HTML 代码片段和清单文件都默认它们在那里。
如何在 Mac 上制作 favicon.ico？
将标志拖到“网站图标生成器”上并点按“制作网站图标”。生成的 favicon.ico 内含 16、32 和 48 px 三种尺寸，另外还有各种尺寸的 PNG。
为什么我的图标在 iPhone 主屏幕上显示为黑色？
iOS 会将主屏幕图标的透明区域显示为黑色。为避免这种情况，Apple touch 图标会放在纯白色、黑色或主题颜色的背景上。
site.webmanifest 有什么用？
当有人把你的网站添加到主屏幕或安装为网页 App 时，它会告诉手机你网站的名称、图标和颜色。
我的新网站图标没有显示，哪里出了问题？
浏览器会强力缓存网站图标。请检查文件是否位于网站根目录、代码片段是否在 <head> 中，然后在无痕窗口中重新加载。
网站图标生成器会上传我的文件吗？
不会。网站图标生成器完全在你的 Mac 上运行，文件绝不会离开你的 Mac，离线也能用。
网站图标生成器会改动我的原文件吗？
不会。结果会存储为新文件，放在“下载 › OneMacTools”中带日期的文件夹里；除非你打开了另有说明的选项，否则原文件会原封不动。
网站图标生成器需要什么？
只需一台运行 macOS 26 或更高版本的 Mac，无需安装其他任何东西。
下一步
制作 1200 × 630 的卡片，在 X、LinkedIn、Slack、WhatsApp 和 iMessage 上分享你的链接时显示。
App 图标生成器一张方形图像生成所有 App 图标：用于 Xcode 的 iOS 资源目录、Android 启动器图标和自适应图标，以及 Mac .icns。
