Favicon制作
一张图片制作网站的favicon，加边框生成
Editor / 编辑器
等待图片输入
Export Options / 导出设置
Pure Client-Side Processing
01. 纯前端处理
利用现代浏览器 Canvas API 进行像素级裁切。图片无需上传服务器，保护品牌隐私，实现秒级生成体验。
02. 多尺寸支持
支持从传统的 16px 到高清 Retina 512px。完美适配 PC 浏览器、iOS 主屏幕以及 Android 桌面图标规格。
03. 实时环境模拟
内置 Light/Dark 模式预览。通过实时圆角和背景填充调节，确保图标在不同系统 UI 环境下都能保持美观。
Specifications
各平台 Favicon 规范指南
| 目标平台 | 推荐尺寸 | 格式 | 作用描述 |
|---|---|---|---|
| 浏览器标签页 | 16x16 / 32x32 | ICO / PNG | 最基本的图标，显示在网页标题左侧。 |
| iOS 桌面图标 | 180x180 | PNG | Apple Touch Icon，添加至主屏时显示。 |
| Android Chrome | 192x192 / 512x512 | PNG | 用于 PWA 应用安装及高分辨率设备。 |
| Windows 磁贴 | 150x150 | PNG | 用户将网站固定到“开始菜单”时使用。 |
HTML 配置提示
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
* 将生成的 ICO 文件重命名为 favicon.ico 并放置在根目录，可获得最佳兼容性。
W
G
A
Compatible with all browsers
Favicon 最佳实践 Optimization Logic
Favicon 不仅仅是地址栏的一个小点。随着现代设备的多样化，它承载了更多功能：
品牌识别
在用户打开几十个标签页时，图标是唯一的快速视觉定位依据。
主屏收藏
移动端“添加至主屏幕”时，会优先调用 128px 以上的高清版本。
Multi-Platform Guide
ICO: 传统的 IE/Edge 兼容格式，单文件支持多分辨率。
PNG: 现代浏览器首选，完美支持透明通道。
SVG: 支持无损缩放，是矢量图标的未来趋势。
Pro Tip
建议同时生成 16px (普通标签) 和 32px (Retina 高分屏) 以获得最佳观感。