跳到主要内容

免费网站图标生成器

将任意图片转为完整的网站图标包:多尺寸 favicon.ico、Apple 触摸图标、Android/PWA 图标、Web 清单和可直接粘贴的 HTML 代码片段——全部打包为 ZIP,在浏览器中完成。

将文件拖放到此处,或点击浏览

PNG, JPG, WebP, SVG, HEIC, HEIF · 在你的设备上处理

或按 Ctrl+V 从剪贴板粘贴

浏览文件

你的文件永远不会离开你的设备。所有处理都在你的浏览器中本地进行。

💡 为获得最佳效果,请上传至少 512×512 的正方形图片。透明 PNG 或 SVG 效果最佳。

常见用途

  • 创建网站网站图标生成每个浏览器和设备都需要的完整网站图标集。
  • 生成PWA和清单图标获取PWA需要的192px和512px图标以及网络清单。
  • 创建Apple触摸图标生成iOS在将网站保存到主屏幕时使用的180×180图标。
  • 将徽标转换为网站图标将您的品牌徽标转换为清晰易识别的网站图标。
  • 为任何框架生成网站图标获取适用于React、Next.js、WordPress等的即插即用网站图标文件。

工作原理

此工具将任意 PNG、JPEG、WebP 或 SVG 转换为完整的网站图标包——多尺寸 .ico、Apple 触摸图标、Android/PWA 图标、Web 清单文件和可直接粘贴的 HTML 片段——完全在你的浏览器中使用 Canvas API 和 JSZip 完成。不会上传任何内容;所有渲染和文件组装都在本地进行。

  1. 1
    Canvas 缩放你的图片
    浏览器将源图片按每种所需尺寸(16、32、48、180、192 和 512 px)绘制到离屏 HTML Canvas 元素上。没有明确 width/height 属性的 SVG 会先通过 DOMParser 和 XMLSerializer 规范化,使 Firefox 和 Chrome 生成相同的像素输出,而不是空白画布。
  2. 2
    手写 ICO 编码器打包 .ico 文件
    小尺寸 ICO 条目(16、32、48 px)编码为原始的 32 位 BGRA DIB 位图——BITMAPINFOHEADER 加上自下而上的 XOR 行和 1bpp AND 掩码——因为 Windows 外壳组件在这些尺寸下需要未压缩的 DIB 格式。工具完全使用 DataView 和 Uint8Array 写入 ICO 目录头并拼接各条目,不涉及任何外部 ICO 库。
  3. 3
    通过 canvas.toBlob 生成 PNG 输出
    每种 PNG 变体(favicon-16x16、favicon-32x32、apple-touch-icon-180x180、android-chrome-192x192、android-chrome-512x512)通过以 'image/png' 调用 canvas.toBlob 获得,将无损编码交给浏览器内置的图像引擎。可选的内边距、背景色和形状裁剪(方形、圆角或圆形)会在获取前应用到画布上下文。
  4. 4
    JSZip 将所有内容打包为一个下载
    JSZip 将所有生成的文件——favicon.ico、五个 PNG、包含你应用名称的 site.webmanifest,以及带正确 <link> 标签的 favicon-snippet.html——组装成一个 .zip blob,并自动下载到你的设备。

你的图片直接加载到浏览器的 Canvas API 中,绝不会离开你的设备——任何时候都不会向服务器传输文件数据。

相关工具

常见问题