
使用您的徽标
替换默认徽标是配置网站的第一步。您需要在 /public
目录下准备以下三个文件:
文件名 | 推荐格式 | 用途 | 最佳实践 |
---|---|---|---|
logo.svg | SVG、PNG、JPG | 网站导航栏的徽标 | - 透明背景的 SVG 格式 - 不包含文字 ¹ - 紧凑裁剪(主题会自动添加边距) |
favicon.png | PNG、JPG | 浏览器标签页图标 | - PNG 格式 - 1:1 正方形 - 512x512 像素 - 紧凑裁剪 - 小尺寸下清晰可辨 - 深浅背景都清晰可见 |
social-image.jpg | JPG、PNG | 社交媒体分享预览图 | - JPG 格式 - 2:1 宽高比 - 1200x600 像素 - 居中的徽标和文字 - 预留足够边距适配不同平台 |
提示
¹ 建议将徽标图形与文字分开,这样可以让主题根据屏幕尺寸自动调整文字排版。如果您的徽标必须包含文字,请在主题配置中进行相应设置。
自定义网站图标
如果您需要为不同平台生成完整的图标集(如 iOS/Android 书签图标、Windows 磁贴图标等),可以使用 realfavicongenerator 工具。
虽然这些特殊图标使用频率较低,但添加方法也很简单:
- 使用该工具生成图标包
- 将生成的图标文件放入
/public
目录 - 在
.vitepress/config.ts
的head
配置项中添加相应的link
标签