如何从PNG或SVG创建favicon.ico(多尺寸)
构建一个在每个浏览器和标签栏中都能正常工作的清晰多尺寸favicon.ico
创建您的网站图标网站图标是出现在浏览器标签页、书签、历史列表和地址栏中的小图标。它是用户注意到您网站的第一个视觉元素之一,正确设置它比大多数开发人员意识到的更重要。模糊、缺失或尺寸不正确的网站图标会使网站看起来未完成和不专业。
ICO格式仍然是网站图标最可靠的选择,因为它可以将多个图像尺寸捆绑到单个文件中。当浏览器需要标签栏的16x16图标时,它从ICO文件中提取16x16图像。当操作系统需要任务栏快捷方式的32x32图标时,它提取32x32版本。这确保您的网站图标在每个尺寸始终看起来清晰,而不是从单个分辨率放大或缩小。
在本指南中,您将准备源图像、使用Any2ICO将其转换为多尺寸ICO文件、选择正确的网站图标尺寸,并添加正确的HTML标签,以便浏览器找到并显示您的图标。整个过程不到两分钟,转换在您的浏览器中进行。
步骤1:准备源图像
优秀的网站图标始于优秀的源图像。输入的质量直接决定输出的质量,因此在转换任何内容之前花一点时间正确设置是值得的。
使用方形图像。网站图标总是显示为正方形,因此您的源应该是正方形或非常接近正方形。如果您的标志宽度大于高度,请考虑将其裁剪为方形部分或使用简化标记而不是完整的文字标记。如果您的图像不是完美的正方形,Any2ICO提供包含和覆盖缩放模式。包含将整个图像适配到带有可选背景填充的正方形内,而覆盖缩放图像以完全填充正方形,裁剪边缘。
从可用的最高分辨率开始。至少256x256像素的图像为Any2ICO提供从16x16到256x256的每个网站图标尺寸的干净源数据。如果您的源只有32x32,该工具仍然可以通过缩小来创建较小的尺寸,但它无法从微小的原始图像生成清晰的256x256版本。如有疑问,选择更大的。
PNG是理想的输入格式。PNG保留透明度且无损,使其成为图标转换的最佳起点。如果您的标志具有透明背景,PNG将完美地将该透明度带到ICO输出中。JPG也可以,但它不支持透明度,并且可能在源中引入压缩伪影。
SVG可以,但有注意事项。SVG是一种矢量格式,理论上可以缩放到任何分辨率,这听起来非常适合网站图标。Any2ICO接受SVG文件并在转换期间将它们光栅化。但是,具有外部字体引用、链接图像或复杂CSS的SVG在浏览器中光栅化时可能无法按预期渲染。如果您的SVG在Web浏览器中看起来正确,它几乎肯定会正确转换。
步骤2:使用Any2ICO转换为多尺寸ICO
准备好源图像后,前往Any2ICO将其转换为正确结构的多尺寸ICO文件。该过程简单明了,只需点击几下。
上传您的图像。将PNG、SVG、JPG、WebP、GIF、BMP或AVIF文件拖放到转换器区域。您还可以直接从剪贴板粘贴图像、从URL导入或连接到Google Drive或OneDrive。Any2ICO接受最大10 MB的文件,这远远超过任何网站图标源所需的大小。
选择ICO尺寸。Any2ICO允许您选择要嵌入ICO文件中的尺寸:16、32、48、64、128和256像素。对于大多数网站,选择16、32和48涵盖基本用例。如果您想要完全覆盖,包括Windows应用程序图标和高DPI显示器,还要添加64、128和256。每个选定的尺寸在单个ICO文件内添加一个单独的图像层。
选择缩放模式。如果您的源不是完美的正方形,选择包含以将完整图像适配到方形边界内(对空区域进行背景填充)或覆盖以通过裁剪填充整个正方形。对于大多数标志,包含是更安全的选择,因为它保留完整图像而不裁剪任何内容。
设置背景。如果您的源具有透明度并且您想保留它,请选择透明背景。如果您更喜欢实心背景,请选择白色。透明背景在现代浏览器和操作系统中看起来最好,而白色背景在您的标志有可能在深色标签栏上消失的非常细或浅的元素时很有用。
下载您的ICO。点击转换按钮并下载生成的favicon.ico文件。转换由Canvas API直接在您的浏览器中执行。要准确了解Any2ICO在上传和导入期间如何处理您的文件,请访问我们的关于页面。
步骤3:选择正确的网站图标尺寸
并非每个尺寸都同样重要。下表显示了标准网站图标尺寸、是否应该包含它们以及每个尺寸为什么重要。
| 尺寸 | 包含? | 为什么 |
|---|---|---|
| 16x16 | 是(必需) | 浏览器标签页、地址栏和历史记录。这是最常显示的网站图标尺寸。 |
| 32x32 | 是(必需) | Windows任务栏快捷方式、高DPI屏幕上的浏览器标签页和新标签页磁贴。 |
| 48x48 | 推荐 | Windows桌面快捷方式和某些浏览器书签显示。 |
| 64x64 | 可选 | 更高分辨率环境中的Windows网站图标。浏览器很少直接使用。 |
| 128x128 | 可选 | Chrome网上应用店图标和某些高DPI桌面环境。 |
| 256x256 | 可选 | Windows Vista及更高版本用于大图标视图。如果用户创建指向您网站的桌面快捷方式很有用。 |
对于典型网站,16、32和48是涵盖浏览器标签页、书签和桌面快捷方式的实用最小值。如果您的网站可能被固定到Windows任务栏或保存为桌面快捷方式,添加64和256可确保在这些场景中获得清晰的图标。有关浏览器如何在尺寸之间选择的更深入了解,请阅读我们的网站图标尺寸说明指南。
步骤4:将网站图标标签添加到您的网站
拥有favicon.ico文件后,您需要将其放在服务器上并告诉浏览器在哪里找到它。
将文件放在域的根目录。将favicon.ico文件保存到Web服务器的根目录,以便可以在https://yourdomain.com/favicon.ico访问它。即使没有任何指向它的HTML标签,大多数浏览器也会自动在此确切路径查找文件。这个约定可以追溯到网站图标的最早时期,并且仍然是最可靠的方法。
在HTML头部添加链接标签。虽然将文件放在根目录通常就足够了,但在<head>部分添加显式<link>标签可确保每个浏览器都能可靠地找到它,包括那些查看非根路径或子域的浏览器。这是您需要的最小片段:
<link rel="icon" href="/zh/favicon.ico" sizes="any">sizes="any"属性告诉浏览器ICO文件包含多个尺寸,浏览器应该为其当前场景选择最佳尺寸。如果您想明确说明包含哪些尺寸,可以列出它们:
<link rel="icon" href="/zh/favicon.ico" sizes="16x16 32x32 48x48">对于大多数网站,带有sizes="any"的单行版本完全足够。浏览器在从多尺寸ICO文件中选择正确尺寸方面很智能。有关网站图标链接标签、属性值和边缘情况的完整参考,请参阅我们的网站图标HTML标签指南。
验证它是否有效。在浏览器中打开您的网站并检查标签页图标。如果您看到旧的网站图标或根本没有网站图标,您可能需要清除浏览器缓存。每个主要浏览器都会积极缓存网站图标,因此硬刷新(Ctrl+Shift+R或Cmd+Shift+R)或在隐身窗口中打开页面是确认新图标正确加载的最快方法。
总结
创建正确的多尺寸favicon.ico是一个四步过程:准备高质量的方形源图像(最好是256x256或更大的PNG或SVG)、使用Any2ICO以正确的尺寸将其转换为ICO、选择与您的受众匹配的尺寸(最少16、32和48),并在HTML头部添加简单的<link>标签。整个过程不到两分钟,并产生一个在每个浏览器标签页、书签栏和桌面快捷方式中看起来清晰的网站图标。
多尺寸ICO文件仍然是跨浏览器和操作系统最普遍支持的网站图标格式。虽然现代浏览器也接受PNG和SVG网站图标,但ICO格式保证了与Internet Explorer的兼容性,并与Windows桌面快捷方式无缝协作。通过将多个尺寸捆绑到单个文件中,您可以确保浏览器始终有正确的分辨率可用,而无需为每个场景下载单独的文件。
准备好创建您的网站图标了吗?前往Any2ICO,上传您的标志,选择尺寸,并在几秒钟内下载完成的favicon.ico。无需注册、无水印,转换在您的浏览器中进行。