WordPress 中的网站图标:如何添加和更改

浏览器选项卡中出现了两个组件 - 在那里打开的网页的标题和一个小图标,称为 favicon。当浏览器窗口中打开多个选项卡时,这两个元素都使用户更容易识别网站。网站图标也是公司企业品牌推广和改善用户体验的重要组成部分。在WordPress中添加图标或更改现有图标时,您有三个选项。继续阅读有关 WordPress 中网站图标的分步说明。

为什么要在 WordPress 中添加网站图标?

术语“favicon”是“favorite icon”的缩写。小图标是公司在线形象不可或缺的一部分。它显示在浏览器的标签栏、书签列表、WordPress 移动应用程序和移动搜索结果中。这使得为您的网站图标选择一个简单而富有表现力的符号变得很重要。向您的 WordPress 网站添加网站图标具有以下 好处:

• 它使您的网站看起来更严肃和专业。

• 它使用户更容易识别您的公司及其所做的工作,从而改善了您网站的用户体验。

• 它对SEO有积极影响。

• 如果用户在浏览器中打开了多个选项卡,则不会显示页面标题,但网站图标始终可见。

小费

大多数公司在 WordPress 中使用他们的徽标或对其进行改编的图标。

如何在 WordPress 中添加或更改网站图标

您可以通过三种方式在 WordPress 中设置网站图标:使用 WordPress 定制器、使用插件或手动添加。继续阅读这些选项的详细信息。

笔记

在本文中,假设您已经创建了一个图标,我们将解释如何将图标添加到您的 WordPress 网站。如果您还没有 favicon,您可以使用最常见的图形程序或使用favicon generator制作一个。

方法一:WordPress 定制器

自 WordPress 4.3 版 以来,就可以使用在 WordPress 中添加网站图标的最简单和最简单的方法。就像上传您的网站图标一样简单,必要时对其进行裁剪,然后单击几下即可完成。

如果您选择此方法在 WordPress 中管理您的网站图标,则您的网站图标的最小尺寸应为 512x512 像素。但是,由于图标将在浏览器选项卡中以 16x16 像素的大小显示,因此您应该确保您的徽标在此比例下仍可识别。我们现在将逐步解释如何使用定制器在 WordPress 中设置网站图标。

第一步:打开定制器

在 WordPress 仪表板中,单击**“外观”**,然后单击“自定义”。

在 WordPress 仪表板中打开定制器。

第二步:打开“站点标识”

WordPress 定制器将打开。接下来,单击**“站点标识”**。

在“站点标识”部分,您可以编辑您网站的标题以及网站图标。

第三步:点击“选择站点图标”

在此区域,您可以设置网站的标题和标语。此信息显示在浏览器选项卡中的网站图标旁边。在“站点图标”部分中,单击“选择站点图标”以在 WordPress 中设置您的网站图标。

单击“选择站点图标”以上传您的网站图标。

第 4 步:选择您的网站图标

在下一步中,WordPress 媒体库 将打开。如果您已经将您的网站图标上传到 WordPress,您只需选择它即可。否则,单击“上传文件”并从计算机中的文件夹中选择文件。单击“选择”按钮确认您的选择。

在 WordPress 媒体库中选择您的网站图标或上传它。

第 5 步:裁剪您的网站图标

然后,您将有机会裁剪您选择的图像。 WordPress 会自动在右侧的菜单中显示您的网站图标的预览。完成裁剪后,单击“裁剪图像”确认您的选择。如果您的图像尺寸已经正确,只需单击“跳过裁剪”。

您可以直接在 WordPress 中裁剪您的网站图标。

然后 WordPress 将自动实现您的网站图标。如果您想再次更改您的网站图标,只需按上述说明导航回 WordPress 定制器。

hbspt.cta.load(8230984, '9abc238c-4be4-4d5c-ac48-e1eec99a66ce', {"useNewLoader":"true","region":"na1"});

方法二:Favicon插件

WordPress 为您可能需要的几乎所有功能都提供了一个插件,因此自然也有一个用于网站图标的插件。 Favicon by RealFaviconGenerator 是最受欢迎的免费插件之一。此插件提供了比 WordPress Customizer 更多的编辑选项,因此您可以提高您的网站图标与各种设备和应用程序图标的兼容性。在下文中,我们将解释如何使用此插件在 WordPress 中添加网站图标。

第一步:安装插件

要安装插件,请打开 WordPress 仪表板中的“插件”部分,然后单击“添加新插件”。

安装合适的插件以便在 WordPress 中设置网站图标。

搜索插件“Favicon by RealFaviconGenerator”,然后在搜索结果中选择插件,点击**“立即安装”**。最后,点击“激活”。该插件现在可以使用了。

RealFaviconGenerator 的 Favicon 是一个流行的插件,用于在 WordPress 中管理 favicon。

第二步:打开插件的设置

安装插件后,单击“外观”,然后单击“Favicon”。在此页面上,您可以调整与您的网站图标相关的设置。

在“外观”下,您可以调整与您的网站图标相关的设置。

第 3 步:选择您的网站图标

单击**“从媒体库中选择”** 以打开 WordPress 媒体库并选择要用于网站图标的图像。图片的最小尺寸要求为 70x70 像素;但是,建议使用 260x260 或更大的尺寸。选择图像后,使用按钮 “Generate favicon” 确认您的选择。

从 WordPress 媒体库中为您的网站图标选择图像。

第 4 步:设置您的网站图标

该插件会自动将您重定向到应用程序的网站。上传网站图标后,您将有机会编辑它。如果您想针对桌面浏览器、Google 搜索结果或各种智能手机调整网站图标的外观,请利用这些功能。

该插件提供了多种用于编辑图标的选项。

如果您已完成更改或想跳过其余步骤,请滚动到页面底部并单击按钮**“生成您的网站图标和 HTML 代码”**。

使用页面底部的按钮确认您的设置。

然后插件会将您引导回 WordPress 后端 并确认您的网站图标设置成功。

该插件会将您引导回 WordPress 仪表板。

方法三:在WordPress中手动添加favicon

在许多情况下,WordPress 还可以手动实现更改。因此,您可以使用文件传输协议 (FTP) 将网站图标添加到您的 WordPress 站点。您需要一个包含各种文件和 HTML 代码的 favicon 包。它们都可以使用在线工具轻松创建。

第一步:创建一个favicon文件

打开一个用于生成网站图标的在线工具。在这个例子中,我们使用“Real Favicon Generator”。在应用程序中,单击“选择您的 Favicon 图片”按钮以上传相关图片。

在 Real Favicon Generator 上上传您的网站图标的图像。来源:https://realfavicongenerator.net

接下来,您将拥有编辑选项图像的属性,例如大小和背景。完成所需的更改后,单击页面底部的“生成您的网站图标和 HTML 代码”。

Favicon Generator 会自动创建您需要的所有文件。来源:https://realfavicongenerator.net

在下一步中,您可以下载 favicon 包并复制 HTML 代码。下载包并将其命名为“favicon.ico”,以便将其识别为 favicon。

下载 favicon 包并复制 HTML 代码。来源:https://realfavicongenerator.net

第二步:使用FTP上传favicon包

您现在可以使用 FTP 访问 WordPress 数据。打开主目录并在那里上传网站图标包。确保您与 WP 管理员或 WP 内容文件夹位于同一文件夹中。

第三步:插入HTML代码

最后,打开文件 header.php 并在标题区域插入网站图标的 HTML 代码。确保您的域和网站图标路径输入正确。

小费

专业的WordPress 托管提供了一个简单的 WordPress 入口点,为您的网站提供更高的安全性和自动备份。