【海北网站设计制作】WordPress 网站icon图标怎么使用

【海北网站设计制作】WordPress 网站icon图标怎么使用

每个网站都应该有自己的喜好。虽然身材很小,但是网页浏览器会用图标(或网站图标)来以一种强大的方式来代表你的网站(或品牌)。图标不仅用于在浏览器选项卡中显示小图像,还可以用于书签和窗口瓷砖。WordPress使您很容易从自定义器向您的站点添加一个偏好图标。现在,这是一种重获成功的方法。但是还有一些其他的方法也可以满足你的需求。

理解WordPress中的偏好

什么是偏袒?

一个图标(意为“最喜欢的图标”)是一个小图标,由网页浏览器使用,以添加一个额外的品牌元素,让用户识别您的网站/公司。如果在您的站点上正确安装了一个图标,浏览器将根据需要在不同的位置使用它。这些位置包括浏览器标签(页面标题旁边)、地址栏(URL旁边)、书签和其他。

海北网站设计制作

在WordPress中,偏好图标被称为“站点图标”,这是一种有用的描述,它告诉用户这个图标将用于在各种实例中表示您的站点。

偏袒的重要性

图标(或网站图标)是类似于一个公司的标志,因为它可以发挥一个小,但关键的作用,在您的网站品牌。一个没有偏袒的网站对用户来说可能不那么可信(因为我们都习惯于看到他们)。另一方面,一个网站一个图标会给用户提供他们所需要的强大的视觉效果,并提高用户的体验。好好想想。找到旁边有图标的书签要比阅读文本容易得多。

文件格式

海北网站设计制作有几个可以接受图像格式可供偏爱,但最受欢迎的两个是ICO和PNG。这些格式支持的浏览器最多,支持透明的背景为您的偏爱图标(不像jpg)。

ICO格式

传统上,偏袒被创建为一个ICO文件(faicic.ico)。ICO文件允许您在一个文件中存储多个大小不同的图像,允许浏览器(桌面和移动)从可用图像中选择所需的大小。ICO格式的问题是,没有多少人知道它是什么,也不知道如何创建它。您可以在像Gimp这样的照片编辑器中创建ico文件,但它似乎更倾向于使用onliine。偏袒发生器这使得这个过程真的很容易,特别是对于产生透明背景的偏袒来说。

谢天谢地,随着WordPress 4.3,我们不必担心创建一个ICO格式的图标来向您的站点添加一个。自定义程序有一个SiteIcon选项,可以接受更流行的格式,如PNG、gif和jpeg。稍后再谈这个。

注意:值得一提的是,一些较旧的浏览器只支持ICO格式,不支持其他任何内容,可能是旧版本浏览器的必要后盾。因此,如果你想拥有两个世界中最好的(即。(PNG和ICO),您可能需要查看插件或手动添加插件。

PNG格式

从HTML 5开始,png格式是您偏爱的、可接受的格式。所有主要浏览器现在支持他们。可以说,这是未来更好的选择,因为PNG由于其在整个网络中的广泛使用而更加一致。但是,由于所有浏览器(甚至旧浏览器)都支持ICO,所以最好同时使用PNG和ICO版本,以避免不必要的404错误。

大小

您的站点需要多个图片大小,以便在所有用例中最优地显示它们(这就是为什么偏袒以ICO格式开始)。我不会在这里讨论所有不同的大小,但是只要您从WordPress自定义程序中添加站点图标,就会自动生成4种最常见的大小,因此不需要强调。

但是,您需要确保上传到自定义程序的图像至少为512 x 512。WordPress将从原始文件中创建其他大小,如下所示:

32x32px偏袒。
180x180px应用程序图标,用于iOS,直至iPhone 6+。
192x192px Android/Chrome应用程序图标。
270x270px适用于Windows的中型瓷砖。

命名和安置

您可能还记得,在那些日子里,偏袒图标必须有确切的文件名“feicon.ico”。然后将它添加到根目录中,基本上就是这样。时代已经改变,谢天谢地,WordPress也发生了变化。现在,您可以将文件命名为任何内容,以其他格式保存,并将其存储在站点的任何位置。如果您正在使用WordPress定制器添加您的网站图标(偏好图标),WordPress将创建多个图像并将它们存储在您的媒体文件夹中。

注意:将Favicon.ico放在根目录下仍然是一个好主意,但要小心使用正确的方法或从插件中获得一些帮助。

创建你的图标

一个图标是一个形象,所以设计你自己的图标将与设计你自己的标志没有什么不同。您可以使用照片编辑器,例如瘸子Photoshop。记住把你的图标设计成一个完美的正方形。512×512为您的WordPress网站图标)。如果您想要透明的背景,请将文件保存为PNG(或gif)。之后,你可以上传你的图片到WordPress作为我们的网站图标(更多这一点稍后)。如果您想将png转换为ico格式,我建议使用在线文件转换器,如转换.

提示:有时你可以通过裁剪你的标志的正方形部分来创建你的图标。如果您想简化流程,这可能是个好主意。请记住,这个图标将代表你的品牌,所以不要粗心。

如何以三种方式向WordPress网站添加偏好图标

订阅我们的YouTube频道

#1在WordPress定制器中添加一个偏袒图标

海北网站设计制作对于大多数人来说,这是你需要考虑的WordPress的唯一方法。您只需要一个图像文件(png、gif、jpeg)和WordPress就可以完成剩下的工作。

由于Wordrpess 4.3,您可以添加一个偏袒图标(或网站图标)到您的WordPress网站很容易在定制。从WordPress仪表板,导航到外观>定制。

然后选择网站标识,你会发现一个选项来设置你的网站图标(网站图标只是另一个术语的偏袒)。然后,您可以从媒体库中选择您的图像,或者上传一个新的。确保您的文件是至少512 x 512,以确保您的图像的最佳质量呈现为所有用例。

一旦您选择您想要的图像,您将被提示裁剪您的图像,以便它将正确地呈现在您的浏览器上。如果你上传的图片不是完全正方形的,这是很有帮助的。

海北网站设计制作

就这样!剩下的将由WordPress来完成。一旦图像被裁剪,WordPress将为所有的图标用例生成所需的图像大小:

适用于浏览器的32 px
180 px for IOS应用程序图标
适用于Chrome应用图标的192 px
270 pxforWindows瓷砖

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

发布您的更改并刷新页面,以便在浏览器中神奇地显示您的偏爱图标。如果您不能立即看到它,您可能需要清除站点缓存,或者在匿名/私有浏览器窗口中打开站点才能看到它。

#2使用插件添加偏袒图标

如果你想得到插件的帮助,给你的WordPress网站添加一个图标,你的运气就好了。一个简单的搜索WordPress存储库将为您提供一些伟大的免费插件可供选择。就我个人而言,我只想RealFaviconGenerator提供的。此插件将确保您的首选图标是兼容所有浏览器通过在所有正确的地方放置多个图像。它甚至允许您自定义每个图像的设计,这是不容易做自己的。

若要使用插件添加偏好图标,请安装插件并导航到外观>图标。然后上传你的照片。确保它是完美的正方形和至少260 x 260。

这个插件将把你转到在线生成器,完成对iOS、Android(Chrome)、Windows和MacOS(Safari)图标的定制。在短短几分钟内,您可以添加您的品牌颜色,海北网站设计制作使这些图标看起来很棒的所有实例。完成后,单击页面底部的“生成您的偏好图标和HTML代码”按钮。

由于您使用的插件,您将不必担心任何代码。您将被重定向到您的网站,并欢迎您的图标显示良好的预览。

就这样!

#3手动添加偏好图标(WordPress 4.2及更高版本)

在WordPress的旧版本中(在定制器升级之前),您可以分两个步骤向站点添加偏好图标。确保您正在使用子主题来修改站点文件。

首先,你需要把你的文件上传到你的网站(如果不是本地安装的话,你需要使用像FileZilla这样的FTP客户端)。一旦您访问您的网站文件,上传的偏袒图标到您的根目录。您也可以选择将偏好图标添加到您的子主题文件夹中。

对于是否应该将偏好图标添加到根目录、主题文件夹或两者都有不同的看法。例如,一些人建议在根目录中保留一个偏袒图标,以便在馈线阅读器中显示。因此,为了安全起见,请始终将其保存在根目录中。无论您选择放在哪里,请确保链接到标题中的文件位置。不要只是把它放在你的文件夹中,相信所有浏览器都会自动找到它。一些旧浏览器可能不会。

链接到您的图标需要在Head标记内的主题(或子主题)头文件(head er.php)中使用html链接标记。以下是两个例子。

要链接到主题(或子主题)文件夹根目录中的图标(ICO格式),可以在Head标记中添加以下代码。

<link rel="icon" type="image/x-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">

若要在主题文件夹的根目录(例如,www.yourwebsite.com/wp-content/themes/twentyfourteen/favicon.ico),)中放置fi.ico文件,请使用:

若要在主根目录中放置fi.ico,请使用以下命令:

<link rel="icon" type="image/x-icon" href="http://www.yourdomain.com/favicon.ico">

我不知道你怎么样,但我真的很感激WordPress 4.3。

使用主题选项添加偏好图标

一般来说,如果可以使用WordPress定制器中的网站图标功能,这仍然是最佳实践,因为它是专门为WordPress构建的。但是,一些WordPress主题(特别是较老的主题)包括一个选项,可以直接从主题设置上传一个图标。在使用此自定义主题选项时要小心,因为它可能使用过时的方法,并且只生成用于多个实例的一个映像。

主要外卖

如果您需要简单介绍一下,这里有一些关于在WordPress站点中添加偏好的主要方法:

  1. 如果可用的话,您应该使用WordPress自定义器添加您的偏好图标。

  2. 如果你想确保你的图标位置在任何需要的地方,并且对你的图标的外观有更多的控制,在一个案例的基础上,使用一个插件,像realicongenerator插件。

  3. 如果出于某种原因,你发现自己陷入了WordPress的黑暗时代,或者需要采取一种手动的方法,请确保使用正确的方法。

  4. 避免使用内置主题选项(WordPress自定义器除外)添加您的偏好图标,除非您有充分的理由这样做。






二维码