如何自定义网站书签、分享场景的展示图标（非标签页favicon）

嘿，我太懂你说的那种浏览器自动生成的丑图标有多闹心了——咱们直接上代码搞定这个问题！这些图标专门用于分享链接预览、添加书签、移动设备主屏幕快捷方式场景，和标签页的favicon完全无关，下面分不同平台和场景给你对应的代码，全部放到网页的<head>标签里就行：

1. 通用分享卡片图标（适配社交平台&多数浏览器） #

这个是Open Graph（OG）标准，几乎所有主流社交平台、浏览器分享功能都会读取这个图标：

<!-- Open Graph 通用分享图标 -->
<meta property="og:image" content="/path/to/your-icon.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<!-- 可选：针对Twitter的优化，和OG兼容但可单独设置 -->
<meta name="twitter:image" content="/path/to/your-icon.png">
<meta name="twitter:card" content="summary_large_image"> <!-- 用这个会显示大图卡片 -->

注意：推荐用1200x630像素的PNG/JPG图（比例1.91:1），如果想兼顾方形图标，也可以用512x512的尺寸，确保图标清晰不模糊。

2. 移动设备主屏幕图标（iOS/Android） #

当用户把网站添加到手机主屏幕时，这个图标会替代默认生成的黄色方块：

<!-- iOS 专用图标（Android 也会兼容读取） -->
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/ios-icon-180x180.png">
<!-- 适配不同尺寸的设备，可选添加 -->
<link rel="apple-touch-icon" sizes="167x167" href="/path/to/ios-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/path/to/ios-icon-152x152.png">
<!-- Android 可选的专用图标声明 -->
<link rel="icon" type="image/png" sizes="512x512" href="/path/to/android-icon-512x512.png">
<link rel="icon" type="image/png" sizes="192x192" href="/path/to/android-icon-192x192.png">

注意：180x180是iOS目前最常用的尺寸，建议优先做这个；图标最好用透明背景，避免被系统添加多余的圆角或边框。

3. Windows 开始屏幕瓷砖图标 #

如果用户在Windows设备上把网站添加到开始菜单，这个可以自定义瓷砖样式：

<!-- Windows 瓷砖图标 -->
<meta name="msapplication-TileImage" content="/path/to/windows-tile-144x144.png">
<meta name="msapplication-TileColor" content="#ffffff"> <!-- 瓷砖背景色 -->

注意：图标尺寸推荐144x144，背景色可以换成你网站的主题色。

最后几个小提示 #

• 所有图标路径要确保正确，最好用绝对路径（比如https://yourdomain.com/icons/xxx.png）避免加载失败；
• 测试的话，可以用浏览器的开发者工具检查<head>标签里的这些元素是否正确加载，或者直接把网站添加到书签/主屏幕看效果；
• 图标尽量用高清图，避免缩放后模糊。

内容的提问来源于stack exchange，提问作者Gustav