免费转换器

图片转 网站图标生成器

从任意图片生成多种尺寸(16x16 至 512x512)的网站图标文件。免费、快速,完全在浏览器中运行。

拖放图片到此处

支持 PNG、JPG、SVG、WebP。最大 10MB。

关于此工具

网站图标是出现在浏览器选项卡、书签和历史列表中的小图标。最初的图标 - /favicon.ico 上的 16×16 ICO 文件 - 已扩展为针对不同平台的不同尺寸的一组复杂图标:浏览器选项卡为 16×16 和 32×32,iOS 主屏幕为 180×180,Android 为 192×192 和 512×512,以及 Windows 磁贴的各种尺寸。现代网站图标生成器所做的就是从单个源图像生成所有这些内容。

该工具采用单个高分辨率源图像(通常是方形徽标)并生成全套图标资源以及引用它们所需的 HTML 链接标签。输出包括 ICO、多个 PNG 和用于渐进式 Web 应用程序元数据的 manifest.json。将生成的文件拖放到站点的根目录中,并通过生成的 HTML 引用它们。

所有处理都发生在您的浏览器中。无需上传,无需API调用,无速率限制。输出适用于显示网站图标的所有现代浏览器和操作系统。

为什么要生成网站图标

没有网站图标的网站看起来还没有完成。浏览器选项卡显示通用图标;书签没有视觉标识符;该网站显得不太专业。添加适当的图标集是一个省力、高影响力的抛光步骤,表明对细节的关注。

现代网站图标的要求已经超出了 /favicon.ico 的范围。 iOS 主屏幕图标、Android Chrome 图标、Windows 磁贴图标和深色模式变体都使用不同的文件。从一个来源生成所有文件可确保品牌一致,而无需手动管理每个文件。

使用方法

上传源图片,获取完整的图标集。

  1. 上传源图片: 使用至少 512×512 像素的方形图像。 PNG 是首选(透明度支持); SVG 也被接受。更高分辨率的源会产生更清晰的小图标。
  2. 配置平台选项: 根据需要启用 iOS、Android、Windows 和 PWA 输出。默认设置产生大多数站点需要的标准设置。
  3. 自定义颜色和主题: 选择 Windows 磁贴和 PWA 初始屏幕的主题颜色。匹配您的品牌标识。
  4. 下载并部署: 保存生成的 zip。将文件放置在站点的根目录中,并将生成的 HTML 链接标记添加到 <head> 中。 HTML 以正确的尺寸引用每个图标。

常见用例

技术细节

完整的现代图标集:favicon.ico(16+32+48 多分辨率)、favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png(180×180)、android-chrome-192x192.png、android-chrome-512x512.png、mstile-150x150.png。加上用于 PWA 的 site.webmanifest,用于 Windows 的 browserconfig.xml。

每个 PNG 都是通过基于画布的源下采样生成的。 ICO 使用 JavaScript 构建,通过使用 DataView 写入将 16/32/48 版本组合成多分辨率 ICO 格式。

HTML 链接标记使用适当的 rel 和sized 属性引用每个文件。生成器将这些生成为您网站的 <head> 的复制粘贴就绪片段。

最佳实践

常见问题

我应该上传什么格式的图片?
具有透明背景的 PNG 效果最佳。使用至少 512x512 像素的方形图像,以便该工具可以缩小尺寸而不会损失质量。 SVG 也能很好地工作,因为它可以缩放到任何尺寸。
这会生成什么尺寸?
16x16(浏览器选项卡)、32x32(浏览器选项卡@2x)、48x48(Windows 任务栏)、180x180(Apple Touch 图标)、192x192(Android 主屏幕)、512x512(PWA 启动屏幕)。 ICO 文件包含 16、32 和 48px 尺寸。
我将网站图标文件放在哪里?
将 favicon.ico 放在您的网站根目录中。其他 PNG 尺寸位于您的公共文件夹或任何可访问的路径中。在 <head> 部分中添加指向每个文件位置的 HTML 链接标记。
为什么我的网站图标在浏览器中没有更新?
浏览器积极缓存网站图标。清除浏览器缓存,尝试在隐身窗口中打开,或将版本查询字符串 (?v=2) 添加到图标 URL 以强制刷新。
为什么我的图标不更新?
浏览器会积极缓存网站图标,有时会缓存数天。通过清除缓存、直接打开图标 URL 或将版本查询参数附加到链接标记来强制刷新。
我的图像是否已上传到服务器?
不会。生成发生在您的浏览器中。
我应该使用 SVG 还是 PNG?
源的 SVG(与分辨率无关)。生成器输出特定尺寸的 PNG;现代浏览器还通过链接 rel=icon type=image/svg+xml 支持 SVG 图标。
什么是 site.webmanifest?
用于描述图标、颜色和其他元数据的渐进式 Web 应用程序的 JSON 清单。对于可安装的网络应用程序是必需的;即使包含在标准站点上也是无害的。