安卓手机Chrome浏览器对favicon有特殊要求,特别是"添加到主屏幕"功能需要配置manifest.json。本文详解Android Chrome favicon设置方法。
Android Chrome favicon尺寸
Android Chrome需要的图标尺寸:
- 192x192:标准Android图标
- 512x512:高分辨率Android图标
- 32x32:浏览器标签页
- 16x16:小尺寸标签页
HTML代码设置
在
中添加favicon引用:<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
manifest.json配置
Android Chrome"添加到主屏幕"需要PWA manifest:
{ "name": "网站名称", "short_name": "简称", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#ffffff", "background_color": "#ffffff", "display": "standalone" }
在HTML中引用manifest:
<link rel="manifest" href="/manifest.json">
制作Android favicon步骤
- 准备一张高清PNG logo(建议512x512)
- 用图捷智转生成192x192和512x512的PNG
- 同时生成favicon.ico(含16x16、32x32等)
- 上传到网站根目录
- 添加HTML代码和manifest.json
需要制作Android favicon和favicon.ico时,使用图捷智转PNG转ICO在线工具,生成所有需要的图标文件。