网站图标生成器 - 从图片、表情符号和文字创建网站图标 在线工具
从图片、表情符号或文字生成多种尺寸的网站图标。下载ICO、PNG、SVG以及HTML标签和manifest.json — 100%客户端处理，无数据发送到服务器。
常见问题
什么是网站图标（favicon）？
网站图标（favicon，"favorites icon"的缩写）是与网站关联的小图标，显示在浏览器标签页、书签、历史记录和搜索结果中。现代网站图标有多种尺寸和格式——旧版浏览器使用ICO，现代浏览器使用SVG（支持暗色模式），移动设备和PWA使用PNG。
如何使用这个网站图标生成器？
1. 选择输入模式：上传图片、粘贴/输入表情符号，或输入1-3个字符的文字。2. 自定义样式：选择背景颜色、形状和内边距。3. 文字模式下选择字体和文字颜色。4. 实时预览所有尺寸的网站图标。5. 复制HTML链接标签和manifest.json代码片段。6. 点击"下载ZIP"获取所有文件。
我的数据安全吗？会发送到服务器吗？
您的数据100%安全，永远不会离开您的浏览器。所有网站图标生成完全在客户端使用HTML5 Canvas API和JavaScript执行。上传的图片使用File API在本地读取，不会传输到任何服务器。
生成哪些尺寸和格式？
本工具按照2026年最佳实践生成完整的网站图标包：favicon.ico（包含16x16、32x32、48x48）、多种尺寸的PNG、apple-touch-icon.png（180x180）、Android Chrome图标（192x192、512x512）、可选的favicon.svg、site.webmanifest文件和即用的HTML代码片段。
ICO、PNG和SVG网站图标有什么区别？
ICO是将多种尺寸打包到一个文件中的传统格式。PNG是用于Apple Touch Icon和PWA图标的现代标准。SVG是最新格式，约90%的现代浏览器支持，提供任何尺寸的完美缩放和通过CSS媒体查询的暗色模式支持。
如何将网站图标添加到我的网站？
下载ZIP文件后，将所有文件解压到网站的根目录。然后在<head>标签内添加提供的HTML标签。确切的HTML代码片段由工具提供，可以一键复制。
可以用表情符号创建网站图标吗？
可以。选择"表情符号"标签页，粘贴或输入任何表情符号字符。工具使用操作系统的原生表情符号字体将表情符号渲染到高分辨率画布上，然后从中生成所有网站图标尺寸。
代码示例
// Generate favicon files in the browser using Canvas API
function renderTextFavicon(text, options = {}) {
const {
size = 512,
fontFamily = 'Inter, sans-serif',
fontWeight = 'bold',
textColor = '#ffffff',
bgColor = '#4f46e5',
shape = 'rounded',
padding = 0.1,
} = options;
const canvas = document.createElement('canvas');
canvas.width = size;
canvas.height = size;
const ctx = canvas.getContext('2d');
// Draw background
ctx.fillStyle = bgColor;
if (shape === 'circle') {
ctx.beginPath();
ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
ctx.fill();
} else if (shape === 'rounded') {
const r = size * 0.15;
ctx.beginPath();
ctx.roundRect(0, 0, size, size, r);
ctx.fill();
} else {
ctx.fillRect(0, 0, size, size);
}
// Draw text
const fontSize = size * (1 - padding * 2) * 0.7;
ctx.fillStyle = textColor;
ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(text, size / 2, size / 2);
return canvas;
}
// Example usage
const canvas = renderTextFavicon('AB', {
bgColor: '#4f46e5',
textColor: '#ffffff',
shape: 'rounded',
});
// Convert to PNG blob
canvas.toBlob((blob) => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'favicon.png';
a.click();
}, 'image/png');