网站图标生成

图标全套与 favicon.ico

选择文件

将生成的图标

选择图片后会显示结果。

16×16: 浏览器标签页与收藏夹
32×32: 浏览器标签页与收藏夹
48×48: 浏览器标签页与收藏夹
180×180: iPhone 与 iPad 主屏幕
192×192: Android 主屏幕与网页清单
512×512: Android 主屏幕与网页清单
favicon.ico: 16×16 · 32×32 · 48×48

粘贴到网站的 HTML

把下载的文件放在网站根目录，再把下面几行放进 <head>。

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

全部在浏览器中处理，图片不会上传，也不会保存。保存的文件不含原图的拍摄时间、位置(GPS)、相机等信息(EXIF)。

使用说明

用一张图生成整套网站图标：浏览器标签用的 16、32、48px，iPhone 主屏用的 180px，Android 用的 192、512px PNG，以及 favicon.ico，还附上可粘贴进 `<head>` 的 HTML。全部在浏览器中生成，不会上传。

什么时候用

给新建的网站或博客设置标签图标。
更换 logo 后重新生成整套图标。
连手机「添加到主屏幕」时显示的图标也一并准备好。

使用方法

选择原图，建议接近正方形且不小于 512px（最小 48px）。
各个尺寸都会预览，并标注该尺寸用在哪里。
点全部下载（ZIP），或只下载 favicon.ico。
解压后放到网站根目录，并把附带的 HTML 粘贴进 `<head>`。

需要知道的事

favicon.ico 内含 16、32、48px 三种尺寸，旧浏览器和 Windows 资源管理器会读取这个文件。
原图不是正方形时不会裁切，而是居中放置、四周留透明 — 把 logo 裁掉是更糟的结果。
比原图更大的尺寸是放大生成的，可能发虚，出现这种尺寸时页面会提示您。
16px 下细线和文字会糊成一团，图形越简单在小尺寸下越清楚。
全部在浏览器中生成 — 您的 logo 不会被上传。

常见问题

ico 和 png 该用哪个？

两个都放最稳。新浏览器读 PNG，旧浏览器和 Windows 资源管理器找 favicon.ico。ZIP 里两者都有，附带的 HTML 会正确关联。

换了图标但显示的还是旧的。

浏览器会长时间缓存图标。请强制刷新（Ctrl+Shift+R），或在文件名后加 ?v=2 之类改变网址，就会重新读取。

原图不是正方形会怎样？

不裁切，居中放置，四周留透明，这样整只 logo 都看得到。想铺满方形，请先用「图片裁剪」按 1:1 裁好。

可以做透明背景的图标吗？

原图是透明 PNG 就会保持透明。不过深色主题的浏览器里，深色 logo 容易看不见，有底色的图往往更保险。