基础介绍【04】如何在 Divi 中添加网站商标和浏览器图标

时间:2022-01-05 来源:未知网络 作者:996建站网

网站商标(指Logo)指一般放企业商标或者品牌标志的地方,显示在导航栏;浏览器图标(Favicon)是显示在浏览器上面的图片。

网站商标(指Logo)

您的Logo位于 Divi 主题标题中每个页面的顶部。

基础介绍【04】如何在 Divi 中添加网站商标和浏览器图标插图

您可以在 WordPress 仪表板的 Divi 主题选项页面中定义自己的Logo图像。要找到 Divi 主题选项,请单击WordPress 仪表板中的「Divi > 主题选项」链接。

基础介绍【04】如何在 Divi 中添加网站商标和浏览器图标插图

在主题选项中,在「General > General」选项卡下,找到「Logo」字段。在该字段中,输入Logo图像的完整 URL。如果您还没有上传您的Logo图片,您可以使用该字段下方的「Upload」按钮上传您的Logo图片。上传完毕后,将文件的 URL 复制并粘贴到该字段中,然后单击「Save」以保存您的设置。

基础介绍【04】如何在 Divi 中添加网站商标和浏览器图标插图

如果您还没有Logo图像,则可以使用包含的 logo.psd 文件作为起点。如果您有 Photoshop,则可以打开此文件,并且可以使用 Photoshop 的文字工具轻松编辑Logo的文本。

浏览器图标(指Favicon)

Favicon(“收藏夹图标”的术语)是 Web 浏览器用来添加额外品牌元素的小图标,以便用户识别您的网站/公司。如果在您的站点上正确安装了图标,浏览器将根据需要在不同的位置使用它。这些位置包括浏览器选项卡(在页面标题旁边)、地址栏(在 URL 旁边)、书签等。

你可以使用Divi主题选项添加网站图标,方法和添加网站Logo是一样的。下面介绍另一种方法。

替代方案:使用 WordPress 定制器添加 Favicon/Logo

您只需要一个图像文件(png、gif、jpeg),剩下的由 WordPress 完成。从 Wordrpess 4.3 开始,您可以在定制器中轻松地将网站图标(或站点图标)添加到您的 WordPress 站点。从 WordPress 仪表板,导航到外观 > 自定义。

基础介绍【04】如何在 Divi 中添加网站商标和浏览器图标插图

然后选择站点标识,您将找到一个选项来设置站点图标(站点图标只是 Favicon 的另一个术语)。然后您可以从媒体库中选择您的图片或上传一张新图片。确保您的文件至少为 512 x 512,以确保为所有用例提供最佳质量的图像渲染。

基础介绍【04】如何在 Divi 中添加网站商标和浏览器图标插图1

选择所需图像后,系统会提示您裁剪图像,以便在浏览器上正确呈现。如果您上传的图像不是完美的方形,这会很有帮助。

基础介绍【04】如何在 Divi 中添加网站商标和浏览器图标插图1

裁剪图像后,WordPress 将生成所有网站图标用例所需的必要图像大小:

  • 32px浏览器 favicon;
  • 180px IOS 应用程序图标;
  • 192px Chrome 应用程序图标;
  • 270px Windows tile;

它甚至可以生成图标外观的有用预览。

基础介绍【04】如何在 Divi 中添加网站商标和浏览器图标插图1

发布您的更改,并刷新您的页面以查看您的网站图标神奇地出现在您的浏览器中。如果您不能立即看到它,您可能需要清除站点缓存或在无痕浏览器窗口中打开您的站点才能看到它。


下一篇:基础介绍【05】使用 Divi 主题和模块定制器

基础介绍【04】如何在 Divi 中添加网站商标和浏览器图标插图2

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序