如何为您的 WordPress 网站创建站点图标

VPS1352主机测评网(www.vps1352.com)
本文链接:https://www.vps1352.com/7546.html

品牌专家经常谈论知名度.换句话说,您网站的面向用户的元素实际上应该始终反映您的品牌.但是,您可能没有考虑过的一个项目是为您的 WordPress 网站创建站点图标.

好消息是设计网站图标并将其上传到 WordPress 比以往任何时候都容易.事实上,无论您的专业知识、时间和预算如何,都有多种方法可以完成任务.

在这篇文章中,我们将了解如何为您的网站创建网站图标.不过,首先,我们将概述您为什么要考虑创建网站图标,以及您需要考虑的一些事项.

什么是网站图标(以及为什么需要它)

您可能已经看到过站点图标,即使您不确定它们是什么.事实上,您已经看过一个-查看浏览器窗口的左上角:

它本质上是一个小图标,显示在浏览器页面选项卡或搜索引擎结果页面 (SERP) 旁边:

将其视为与您连接到汽车天线的小球等效的数字.但是,站点图标与沃尔玛停车场中的其他 5,000 个彩色球之间存在差异:您可以针对自己的品牌制作站点图标.

当谈到您网站的品牌时,第一印象很重要.更重要的是,消费者希望 一个品牌作为信任标记的一致性.网站图标可以帮助实现这两点.

当然,您的网站图标不会承担您品牌战略的全部重担.但是,它带来的额外可见性(尤其是在潜在客户浏览您的网站时)可能会产生积极影响.

如何为您的 WordPress 网站创建站点图标(分 3 个步骤)

此任务涉及两个阶段.首先,您需要创建一个站点图标.然后,您需要将其上传到您的 WordPress 网站.您可以通过以下三个步骤为 WordPress 网站创建网站图标:

然后我们将向您展示三种上传图标的方法:

还有很多事情要解决,让我们开始吧!

第 1 步:为您的网站图标选择合适的尺寸

首先,是您网站图标的大小.您认为这些文件会很小是正确的.然而,虽然尺寸很小,但了解各种尺寸 可能很复杂.这是因为不同的平台对站点图标(或"favicon")大小有不同的要求.

一般来说,大多数浏览器都支持 32 x 32 像素的 .ico 文件,这已成为数十年来的标准.但是,实际上,您需要使用 512 x 512 像素的 .png 文件.原因是这几乎涵盖了所有基础,来自 默认 Chrome 网站图标大小,降至最低要求.

顺便说一句,这也是 WordPress 后端中的明确建议(稍后会详细介绍).设置好尺寸后,就该考虑设计了.

第 2 步:确保您的网站图标设计采用最佳实践

网站图标设计的诱惑只是使用缩小版本的网站徽标并收工.但是,根据我们关于最佳品牌塑造的建议,您应该花时间处理自定义网站图标,而不是选择简单的选项.

此外,您拥有的虚拟"房间"意味着您可能无法使用常规徽标来表达您的品牌.因此,在组合网站图标时,您需要考虑以下几点:

  • 将您的品牌提炼为一种或两种简单的颜色,提供一致性和可见性.
  • 将您的徽标缩减为最基本的元素,并将其作为主题您的网站图标.
  • 使用对比来突出您网站图标的主要方面.

要提供这些的真实示例,请再次查看 WPKube 站点图标.它使用蓝色和白色,提供高对比度,并且只包含网站的徽标.

这就是所需要的.它提供可见性、与其他品牌元素的一致性,并确保您可以在 SERP 和浏览器屏幕上找到该标签.

第 3 步:选择正确的工具来创建您的站点图标

对网站图标的大小和设计进行排序后的最后一步是创建它.正如您所期望的,有无数种方法可以创建您的图标,如果您有一个工具 例如 Canva,这将是理想的.替代方案 例如 DesignBold 也非常适合任务,特别是如果您的帐户已经存储了您的网站徽标:

Favicon.io 也非常适合快速创建纯文本站点图标,并下载您需要的所有各种尺寸:

请记住,您需要将站点图标保存为 8 位或 24 位非透明 .PNG 文件,因为这是最佳格式.Favicon.io 会为您执行此操作,但您必须更改其他通用编辑器中的设置.

将网站图标上传到 WordPress 的 3 种方法

作为 WordPress 的标准配置,您可以通过多种方式上传站点图标.我们将在下面讨论用例和适用性,但您可以自由调查任何可能适合您的内容.

1. 使用 WordPress 的内置功能

对于大多数 WordPress 用户来说,好消息是该平台提供了用于上传站点图标的快速而直接的功能.

如果您正在寻找一种严肃的方法来完成这项任务,这就是适合您的方法.

步骤 1.在 WordPress 中访问站点标识屏幕

首先,登录 WordPress.从仪表板,您将需要前往主题选项面板.您的高级主题可能有专用选项,但对于 WordPress 的默认主题,这将在 Appearance > 中.自定义 >定制器的站点标识屏幕:

到达这里后,您可以进入下一步.

第 2 步.选择您的站点图标

接下来,查看选择站点图标对话框的站点标识部分:

在这里,像往常一样使用 WordPress 媒体上传点击并上传.请记住为您的网站图标设置合适的"替代文字",以提高您的可访问性.

第 3 步.在前端检查您的站点图标

最后看看你网站的前端,具体看看你的网站图标是否上传正确.您会注意到 WordPress 在浏览器模型中提供了当前站点图标的大预览:

但是,您仍然应该查看图标在浏览器中的呈现方式,主要是因为它会向其他用户展示图标的外观——这是一个更重要的因素.

2.安装合适的 WordPress 插件

对于许多用户来说,安装 WordPress 插件是"首选"解决方案.但是,鉴于几乎所有 WordPress 网站都有用于执行此操作的内置定制器选项,因此插件可能有点过分.

如果您对网站图标有特定要求,或者无法选择使用主题选项上传图标,我们建议您使用这种方法.

步骤 1.选择合适的插件

这一步的标题有点用词不当,因为我们只推荐一个插件:RealFaviconGenerator 的 Favicon:

它本质上是热门网站的插件版本,并增强 WordPress 的内置功能.它从单个图像生成所有必需的站点图标,并将它们存储在媒体库中.

一旦你安装并激活插件,你就快完成了.

第 2 步.上传您的全尺寸网站图标

一旦插件被激活,你会注意到一个新的外观> WordPress 仪表板中的 Favicon 面板.这里的标题带来了一组简单的选项:

虽然措辞有点令人困惑,但您实际上是上传到(或从中选择)媒体库.如果您还没有,请记得在此处添加替代文字.

要开始上传过程,只需点击蓝色的生成收藏夹按钮,然后进入最后一步.

第 3 步:下载您的网站图标

一旦插件开始生成您的网站图标,您会注意到它切换到开发者网站的网络应用版本.您可以在此处找到各种平台和维度的所有不同站点图标:

请注意,您可以在此处选择一些其他特定于平台的选项,这些选项与您网站图标的设计和呈现相关:

但是,一旦您准备好,请点击生成您的收藏夹和 HTML 代码,此时插件将发挥其魔力.

最后,您将被带回您的 WordPress 仪表板,您将在其中看到各种模型中网站图标的预览:

您的网站图标现在应该可以滚动了——同样,您需要检查前端以确保.

3.使用代码显示您的站点图标

考虑到替代方案,我们将包含的最终方法对于普通用户来说可能已经过时了.但是,使用代码来显示您的网站图标非常适合非常精确的要求,或者即使您正在创建自定义主题.

步骤 1.使用文件传输协议 (FTP) 访问您站点的服务器

对于这种方法,您需要 通过 FTP 访问服务器.更重要的是你需要一个合适的客户端,比如 Cyber​​duckFilezilla,以及 足够敏锐的技能.由于我们将使用 WordPress 的核心文件,因此还建议使用子主题.

完成这些设置后,请使用在您的主机控制面板中找到的凭据登录您的服务器.如果您不确定在哪里可以找到它们,您应该联系您的房东的支持渠道.它们也可以在您最初购买主机时收到的电子邮件中找到.

第 2 步.将您的网站图标文件上传到 WordPress

一旦您访问了服务器,您的 FTP 客户端应该会显示您站点的目录列表:

在这里,将您的站点图标文件上传到您的主要主题文件夹(位于 wp-content > themes 中)和您站点的根目录.

到这里,你就快完成了.最后一步是将您的网站图标硬编码到 WordPress 中.

第 3 步:将代码添加到您网站的标题

对于最后一步,您需要回到 WordPress,特别是 Appearance >主题编辑器页面:

当您第一次访问该页面时,会弹出一个警告对话框.在点击我明白之前,此屏幕的初学者需要阅读通知.

正确的屏幕将在此处显示构成整个 WordPress 网站的代码,并且所有内容都是可编辑的,因此请谨慎操作.

您首先要在选择要编辑的主题下拉菜单中检查您是否使用了正确的主题:

接下来,向下滚动 Theme Files 列表,直到找到 Theme Header (header.php) 选项.您需要在此处选择此项,这将在编辑器中显示您的 header.php 文件.

您需要搜索以 <link rel="shortcut icon" 开头并以 /favicon.ico"/> 结尾的一行代码.如果找到,请将其替换为以下代码行:

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico"/>

如果该行根本不存在,您可以在 标签之间添加该行:

最后,点击蓝色的更新文件按钮,然后在前端查看您的站点图标.

总结

简而言之,您网站的图标可以帮助用户识别您的品牌,并提高您的知名度.应考虑任何诱骗潜在客户的机会;考虑到创建站点图标所需的时间和资源,您可以轻松做出决定.

在这篇文章中,我们研究了如何使用三种方法为您的 WordPress 网站创建站点图标.让我们快速回顾一下:

  1. 使用 WordPress 的内置功能上传您的图标.
  2. 安装一个插件,例如 RealFaviconGenerator 的 Favicon.
  3. 使用代码显示您的网站图标.

网站图标是否会成为您网站整体品牌战略的一部分?在下面的评论部分分享您的想法!

9
订阅评论
提醒
0 评论
内联反馈
查看所有评论