Favicon Generator - Text to Favicon.ico

立即创建自定义图标 - 非常适合网站、应用程序和 PWA

生成您的网站图标

启用 SVG

如何在您的网站上安装网站图标

通过安装自定义图标来增强网站在所有设备上的外观。 请按照以下简单步骤集成新生成的 favicon 包：

  1. 生成您的网站图标：使用我们的网站图标生成器使用您所需的文本、颜色、形状和字体创建自定义图标。 单击“生成网站图标”下载您的网站图标包。

  2. 下载并解压：生成后，下载 favicon 包并将文件解压到您网站的根目录。

  3. 添加 HTML 代码：将以下代码插入 HTML 文件的“head”部分，以确保跨不同设备和浏览器的兼容性：

<link rel="apple-touch-icon" sizes="57x57" href="/favicon-57x57.png" type="image/png" />
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60x60.png" type="image/png" />
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72x72.png" type="image/png" />
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114x114.png" type="image/png" />
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120x120.png" type="image/png" />
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144x144.png" type="image/png" />
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152x152.png" type="image/png" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png" type="image/png" />
<link rel="icon" sizes="16x16" href="/favicon-16x16.png" type="image/png" />
<link rel="icon" sizes="32x32" href="/favicon-32x32.png" type="image/png" />
<link rel="icon" sizes="96x96" href="/favicon-96x96.png" type="image/png" />
<link rel="icon" sizes="192x192" href="/favicon-192x192.png" type="image/png" />
<link rel="icon" sizes="512x512" href="/favicon-512x512.png" type="image/png" />
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#FFFFFF" />
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="/favicon-512x512.png" />

如何使用Favicon生成器

  1. 输入所需的文本（1-2个字符）。
  2. 自定义颜色、形状和字体。
  3. 点击“生成Favicon”按钮。
  4. 下载Favicon包。
  5. 使用提供的代码进行实施。

生成的Favicon尺寸

我们的Favicon生成器会创建以下关键尺寸的图标：

常见的Apple Touch图标尺寸：

  • 57x57px：适用于iPhone和iPod touch。
  • 60x60px：适用于最新款iPhone的触控图标。
  • 72x72px：适用于iPad的图标。
  • 76x76px：适用于Retina显示屏的iPad。
  • 114x114px：适用于Retina显示屏的iPhone。
  • 120x120px：适用于最新款iPhone的Retina触控图标。
  • 144x144px：适用于Retina显示屏的iPad。
  • 152x152px：适用于Retina显示屏的iPad。
  • 180x180px：适用于iPhone 6+及新款Retina图标。

常规图标尺寸：

  • 16x16px：用于浏览器标签的Favicons。
  • 32x32px：标准尺寸的Favicons。
  • 48x48px：Windows快捷方式。
  • 64x64px：Windows快捷方式。
  • 96x96px：Chrome和Android设备。
  • 192x192px：Android设备。
  • 512x512px：适用于高分辨率屏幕和某些渐进式网络应用（PWA）的图标。

其他格式：

  • favicon.ico (32x32px)：包含多种分辨率的图标文件，以最大限度地兼容旧系统和浏览器。
  • SVG格式：如果启用，包中还包括一个可缩放矢量图标（SVG），适合不同尺寸和设备的需求。

为什么多种Favicon尺寸很重要

在当今的多设备世界中，拥有多种Favicon尺寸至关重要：

  • 确保在所有设备和浏览器上的兼容性
  • 提高高分辨率屏幕上的视觉清晰度
  • 满足渐进式网络应用（PWA）的要求
  • 增强在拥挤的浏览器标签中的识别度

常见问题解答