指南

Wix 的网站图标

Wix 将您的网站图标存储在网站仪表板的“设置”>“网站信息”>“网站图标”下,并自动将其注入每个已发布的页面。上传至少 100×100 像素的方形 PNG — 512×512 是清晰显示的理想选择。对于 PWA 和 apple-touch-icon 支持,高级用户可以通过 Wix Velo 添加自定义代码。使用 favicon generator 根据您的徽标或品牌标志创建可立即上传的 PNG。

您的网站图标是 Wix 网站上最明显的品牌元素之一 - 它出现在浏览器选项卡、书签栏和地址栏历史记录中。清晰、可识别的图标可帮助访问者快速识别并返回您的 Wix 网站。一旦您上传图像,Wix 就会自动处理网站图标注入,因此所需的工作量很小。

要添加或更改 Wix 网站图标,请登录 Wix 仪表板并导航至“设置”>“网站信息”。滚动到网站图标部分(有时标记为站点图标或选项卡网站图标,具体取决于您的 Wix 版本)。单击上传区域或现有图标缩略图以打开媒体管理器。上传您的方形 PNG 并确认。

Wix 建议最小图标尺寸为 100×100 像素,但这是一个地板,而不是目标。要获得最清晰的结果,请上传 512×512。 Wix 会缩小图像以进行选项卡显示,从较大的源开始意味着小尺寸的质量损失较少。 favicon generator 在几秒钟内从任何徽标中导出完美的 512×512 PNG。

PNG 格式是 Wix 图标上传的最佳选择。它支持透明度,这确保您的图标在浅色和深色浏览器主题下看起来干净,没有彩色或白色背景框。 ICO 文件不是必需的 — Wix 会转换您的 PNG 并使用正确的 MIME 类型为其提供服务。

Wix Studio(Wix 的专业级别)将网站图标设置放置在“设置”>“网站信息”下的同一位置。如果您需要 SVG 图标或 apple-touch-icon 标签,Studio 还允许在“<head>”部分中注入更高级的自定义代码。导航到“设置”>“自定义代码”以在 Wix Studio 项目上添加头脚本。

在 Wix 仪表板中上传您的网站图标后,您必须重新发布您的网站才能使更改生效。单击编辑器右上角的“发布”。 Wix 在您的自定义域上的所有页面上传播新的网站图标。访问者看不到仪表板中保存但未发布的更改。

Wix 自动处理“<link rel='icon'>”标签注入——您不需要添加任何代码。 Wix 还通过将上传的图标大小调整为所需的尺寸,为 iOS 主屏幕保存注入基本的 apple-touch-icon 条目。对于自定义 180×180 apple-touch-icon(与 favicon 不同),请使用 Wix Velo 自定义代码注入。

当您上传带有 Alpha 通道的 PNG 时,Wix 会保留透明背景。如果您的图标具有纯色背景,它将在暗模式浏览器选项卡中显示一个彩色框。上传前导出不带背景填充的徽标。您可以使用 favicon tester 验证透明度是否正常工作,该 favicon tester 在浅色和深色背景上呈现图标。

Wix Velo(Wix 中的 JavaScript 开发平台)允许高级图标定制。使用 Velo 的 `wixLocation` 和页面事件,您可以动态地为每个页面注入不同的 favicon 链接标签。这对于具有特定产品品牌的电子商务网站或每个部分使用不同图标的多类别网站非常有用。

如果您使用的 Wix 模板是在 Wix 引入本机图标支持之前创建的,则图标设置可能会出现在不同的位置,或者可能根本不存在。在这些情况下,请使用 Wix 的自定义代码注入:设置 > 自定义代码 > 添加代码 > 将代码放置在每个页面的“<head>”中,然后手动添加“<link rel='icon' href='URL'>”标签以及指向托管图标的链接。

Wix ADI(人工设计智能)站点会自动从您的品牌资产设置网站图标(如果您在设置向导期间提供这些图标)。您可以随时使用“设置”>“网站信息”>“网站图标”路径覆盖 ADI 选择的网站图标。 ADI 生成的网站图标通常是低分辨率徽标 - 建议将其替换为专用图标。

发布 Wix 图标后,在私人/隐身浏览器窗口中打开您的实时域,即可查看更新后的图标,而无需任何本地浏览器缓存。如果一天后在正常浏览中仍然显示旧的图标,则可能是浏览器缓存问题而不是 Wix 问题。硬刷新(Ctrl+Shift+R 或 Cmd+Shift+R)会强制浏览器丢弃缓存的图标。

对于希望在其 Wix 网站上安装 PWA 支持的企业(将网站添加到具有全尺寸应用程序图标和启动屏幕的移动主屏幕),Wix 具有有限的本机 PWA 功能。使用 Wix 的自定义代码注入添加“<link rel='manifest'>”标签,指向包含 192×192 和 512×512 PNG 图标的外部托管 site.webmanifest 文件。请参阅 web app manifest guide 了解完整的清单设置。

工作原理

  1. 1

    创建一个 512×512 PNG 图标

    使用带有您的徽标或品牌标记的 [favicon generator](tool:favicon-generator) 作为来源。从包中下载 512×512 PNG — 这是 Wix 的正确尺寸。

  2. 2

    打开设置 > 网站信息

    在 Wix 仪表板(不是编辑器)中,导航至“设置”>“网站信息”,然后向下滚动以找到“网站图标”部分。

  3. 3

    上传您的 PNG

    单击上传区域或现有图标缩略图,从 Wix 媒体管理器或您的设备中选择 512×512 PNG,然后确认。保存设置。

  4. 4

    发布您的网站

    单击 Wix 编辑器中的“发布”按钮。 Wix 在您的实时自定义域的所有页面上注入更新的图标标签。

  5. 5

    在隐身窗口中验证

    在私人/隐身浏览器窗口中打开您的实时域。新的图标应该出现在选项卡中。使用 [favicon tester](utility:favicon-tester) 进行快速外部检查。

立即尝试

生成 Wix 就绪的图标

Favicon 生成器

常见问题

Wix 中的图标设置在哪里?+

设置 > 网站信息 > 网站图标(确切的标签可能是“选项卡网站图标”或“网站图标”,具体取决于您的 Wix 版本或模板)。上传一个方形 PNG,保存,然后单击“发布”将其应用到您的实时网站。

我的 Wix 图标应该是多大?+

Wix 至少需要 100×100 像素,但强烈建议使用 512×512 PNG。从较大的源开始,可确保 Wix 可以将采样率降低至 32×32(制表符大小),而不会造成明显的质量损失。

为什么我的 Wix 图标仍然显示旧图标?+

确保您在上传新的图标后单击“发布”——保存的更改在发布之前不会实时推送。然后在私人/隐身窗口中打开您的网站,以绕过浏览器的本地图标缓存。

我可以在 Wix 上使用 SVG 图标吗?+

不是通过本机设置面板 - 它只接受光栅格式。要使用 SVG,请在“设置”>“自定义代码”>“头代码”中添加自定义代码“<link rel='icon' type='image/svg+xml' href='URL'>”,并在外部托管 SVG。

Wix 是否会自动添加 apple-touch-icon?+

Wix 从您上传的网站图标图像中注入基本的 apple-touch-icon。对于自定义 180×180 apple-touch-icon(与选项卡图标分开),请通过 Wix Velo 或设置 > 自定义代码手动注入链接标签。

我的 Wix 图标仍然显示默认的 Wix 图标 — 我该怎么办?+

在“设置”>“网站信息”中保存新的网站图标,然后在编辑器中单击“发布”。检查网站是否已发布到您的自定义域(不仅仅是 Wix 子域预览)。清除浏览器缓存并在隐身窗口中尝试。

我可以在不同的 Wix 页面上使用不同的图标吗?+

是的,使用 Wix Velo。每页添加自定义代码注入,或使用 Velo 的页面就绪事件根据当前页面路径动态更新“<link rel='icon'>”元素。

相关工具

更多指南

指南

探索FetchFavicon

类别

转换器

公用事业

指南

教程