WordPress 网站图标是网站品牌建设中最容易被忽视的方面之一。无论您拥有实体业务还是在线业务,品牌塑造都是取得成功的一个重要方面。 不过,如果您阅读这篇文章的目的不是为了向您的网站添加网站图标,那么您可能想知道网站图标到底是什么。 目录 什么是网站图标? 为什么您应该将网站图标添加到您的网站? 如何将 Favicon 添加到您的 WordPress 网站 方法一:通过WordPress定制器上传图片 方法2:通过插件上传Favicon 方法三:通过主题选项上传Favicon 方法4:在header.php中添加自定义代码 什么是网站图标? 本质上,favicon 是一个 16×16 像素的小图标,出现在浏览器顶部的选项卡上,并附有网站名称,如下图所示。 您可以在 Adobe Photoshop 等照片编辑软件上轻松地自行创建一个网站图标,也可以要求您的设计师为您的网站创建一个网站图标。 然而,了解为什么您应该拥有 WordPress 图标非常重要! 为什么您应该将网站图标添加到您的网站? 请记住,如今网站图标已成为网站的重要组成部分。它不仅有助于网站品牌塑造,还可以赋予您的网站身份并帮助访问者记住您的品牌。 大多数时候,您的访问者会在浏览器上打开许多选项卡,如下所示: 如果您的 WordPress 网站有像我们一样的网站图标,您的访问者将可以更轻松地识别您的网站,并在需要时快速切换到该网站。 但是,您可能已经了解所有这些,只是想知道如何将 Favicon 添加到您的 WordPress 网站。言归正传,让我们开始讨论您来这里的真正目的。 如何将 Favicon 添加到您的 WordPress 网站 与大多数与 WordPress 相关的事情一样,添加 Favicon 并不需要太多努力。在这里,我将概述添加 WordPress Favicon 的 4 种方法: 通过 WordPress […]
Favicon

Favicon 通常被称为浏览器选项卡中显示在网站名称旁边的小图标。然而,虽然那是它们的起源,但您的WordPress网站图标也用于其他地方,例如浏览器书签、iOS主屏幕按钮等。
Favicon 通常被称为浏览器选项卡中显示在网站名称旁边的小图标。然而,虽然那是它们的起源,但您的WordPress网站图标也用于其他地方,例如浏览器书签、iOS主屏幕按钮等。 因此,它是您品牌的重要组成部分。如果使用得当,您的网站图标或“站点图标”可以帮助用户轻松识别您的业务。它可以帮助提高品牌知名度,甚至可以增强网站的用户体验 (UX)。 在本文中,我们将讨论在WordPress站点中使用网站图标的好处。然后我们将解释如何创建一个,并引导您完成将其添加到您的站点的三个简单选项。 最后,我们将用一些 WordPress 网站图标提示和最佳实践来总结它。让我们开始吧! 使用WordPress网址图标的好处 如何创建WordPress网站网址图标 如何将网址图标添加到WordPress网站 使用WordPress网址图标的其他提示 使用WordPress网址图标的好处 如果您曾经同时打开过多的标签页(有罪!),您可能会体会到收藏夹图标的用处。当用户在浏览器中打开多个选项卡时,网站图标可让用户轻松快速识别您的网站: Chrome浏览器中的教学博图标 根据打开选项卡的数量,您网站的标题可能并不总是可见。因此,添加网站图标有助于改善访问者的用户体验。 除了提高品牌知名度,使用WordPress网址图标还可以让您的网站看起来更专业和可信。反过来,这有助于提高客户的信任度。 此外,如果有人将您的网站保存到其移动设备的主屏幕,您的网站图标将显示为图标。使用您的品牌徽标或类似图像有助于使您的网站更易于识别,并有助于整体营造有凝聚力的美感。 如何创建WordPress网站网址图标 如果您已经有一个可以使用的网站图标(大多数企业使用他们的徽标或其变体),请随时跳到下一部分。否则,让我们看看如何创建您的网站图标图片。 过去,您必须为您的网站图标使用特定的ICO文件。但是,如今,所有现代浏览器都支持将ICO、PNG和GIF文件用于您的收藏夹图标。JPEG也得到广泛支持,但并非在所有Internet Explorer版本中都得到支持,这使得它不太适合使用收藏夹图标。 如果您熟悉Photoshop,则可以使用它来手动创建网站图标。但是,使用基于云的基本工具从现有图像创建收藏夹图标集通常更容易。 RealFaviconGenerator (我们稍后将讨论的基于云的插件版本)是一个很好的选择,因为: 它还创建应用程序图标。 它提供了PNG和ICO格式的网站图标。 您可以在上传图片后自定义您的网站图标。 您需要做的就是粘贴插件提供给您的代码。 其他有用的图标生成器是: Favicon.cc,可让您从头开始创建网站图标或上传现有图像。 Favicon Generator,其功能类似于RealFaviconGenerator。 要使用RealFaviconGenerator,首先通过单击Select your Favicon image上传您要使用的图像: 在RealFaviconGenerator上上传网站图标源图像 在下一个屏幕上,您可以配置有关您的收藏夹图标集的特定详细信息(如果需要)。完成后,滚动到底部并单击Generate your Favicon and HTML code: RealFaviconGenerator上的网址图标生成器设置界面 在下一页上,单击Favicon package下载您的favicon图片: 下载Favicon包界面 如果您打算手动将网站图标添加到您的网站,请确保让此页面保持打开状态。 创建WordPress网址图标的技巧 在创建收藏夹图标之前,有一些设计和格式提示值得一提和审查。最重要的是,推荐的图标大小为512×512像素。 虽然您的WordPress图标将是一个完美的正方形,但您也可以使用矩形图像并在将其上传到WordPress之前或之后对其进行裁剪。如果您通过定制器添加站点图标,WordPress带有内置的站点图标裁剪功能(我们将很快引导您完成)。 此外,请务必注意,您的网站图标将显示为 16×16 像素的正方形。因此,您希望选择缩小到这些尺寸后看起来不错的图像。尽管它将以该尺寸显示,但它的高度和宽度仍应至少为 512 […]

经常发现WordPress教学的主题或者插件用户的网站不设置网址图标favicon。当然这个网址图标也不是非有不可,只是有这个网址图标favicon,可以让你的网站更加完整,在你的网站品牌打造上起到一定的作用。下面由
经常发现教学博的主题或者插件用户的网站不设置网址图标favicon。当然这个网址图标也不是非有不可,只是有这个网址图标favicon,可以让你的网站更加完整,在你的网站品牌打造上起到一定的作用。下面由小编来简单地介绍一下这个网址图标favicon、网址图标的作用及如何设置网址图标。 什么是favicon Favicon是favorites icon的缩写,中文一般称为网址图标、网页图标、页面图标及URL图标,小编更喜欢称它为网址图标。这个Favicon最早只是应用于浏览器的收藏夹,但现在除了在收藏夹中展示收藏的URL地址对应的favicon外,还会在浏览器的页面标签上展示当前页面的favicon。如下图所示: Chrome浏览器上的网址收藏夹及标签页 网址图标的作用 网址图标对网站功能、网站外观等是没有任何影响的。通过上述的favicon介绍,我们知道这个favicon仅面向客户端,在客户访问你的网站时,在浏览器端展示。 那么是不是这个favicon可有可无?那也不能够这样理解,给网站增加favicon有以下好处: (1)方便用户在浏览器端快速定位到你的网站,毕竟视觉感官往往比文字阅读直观很多; (2)其二,favicon一般与网站Logo相呼应,在浏览器端展示你的网站favicon,在一定程度上可以增加你的网站品牌知名度。 如何设置网址图标 首先你的网站得有个正方形的Logo,并且这个Logo应该能够让访客第一反应——知道这个Logo属于哪个网站的。个人建议: 直接取材于你的网站Logo,这样经常访问你的网站的用户能够从中读取到信息; 这个Logo的配色尽可能与你的网站主色调或者Logo色调保持一致; Logo尽可能精简,简单的图形、单个字母或者汉字即可。 然后,我们需要将这个正方形Logo转化成favicon图标,这可以借助一些在线工具快速生成favicon。个人墙裂推荐:favicon-generator。 访问favicon在线生成工具网站favicon-generator.org,点击Choose File上传你提前准备的正方形Logo,然后点击Create Favicon; ,上传及生成favicon 跳转页面后,点击Download the generated favicon,将生成的各种规格的favicon的压缩包下载至本地。 下载favicon网址图标至本地 打开压缩包,选择favicon的任何一个尺寸(16*16,32*32或者96*96),推荐使用32*32px尺寸。我们还可以看到该工具还可以生成各种应用程序的ico。 将生成的favicon上传至你的网站根目录,并在你的主题header.php添加对应尺寸的网址图标代码,如下: <link rel=”icon” type=”image/png” sizes=”32×32″ href=”/favicon-32×32.png”> <link rel=”icon” type=”image/png” sizes=”96×96″ href=”/favicon-96×96.png”> <link rel=”icon” type=”image/png” sizes=”16×16″ href=”/favicon-16×16.png”> 如果你使用的主题支持直接上传favicon(教学博的主题是支持该功能的),则直接在WordPress仪表盘后台上传即可,无需手动添加代码。 教学博主题支持favicon上传功能

Favicon by RealFaviconGenerator – WordPress plugin WordPress插件下载
点击下载 Favicon by RealFaviconGenerator 插件描述 为桌面浏览器,iPhone / iPad,Android设备,Windows 8平板电脑生成和设置图标和更多。在几秒钟内,设计一个在所有主要平台上都很棒的图标。 Favicon不仅仅是在您网站中间放置的单个 favicon.ico 文件。如今,有这么多不同的平台和设备,你需要一堆图片来完成工作。使用RealFaviconGenerator,可以生成桌面浏览器,iPhone / iPad,Android设备,Windows 8设备等所需的所有图标。 iOS设备使用高分辨率Apple touch图标来说明书签和主屏幕快捷方式。第一代iPhone需要57×57的照片,而带Retina屏幕的全新iPad则需要152×152的照片。 Android Chrome如果找到它们也会使用这些图片。 Windows 8采用另一种途径,带有一组专用图标和HTML声明。 Favicon不仅是具有不同分辨率的图片的问题。各种平台具有不同的UI指南。例如,经典桌面favicons经常使用透明度。但iOS需要不透明的图标。 Windows 8有自己的建议。 使用RealFaviconGenerator及其配套插件节省数小时的研究和图像编辑。在几秒钟内,您设置了一个兼容以下的图标: Windows(IE,Chrome,Firefox,Opera,Safari)Mac(Safari,Chrome,Firefox,Opera,Camino)iOS(Safari,Chrome,Coast)Android( Chrome,Firefox)Surface(IE)以及更多 我们非常重视兼容性。有关完整列表,请参见http://realfavicongenerator.net/favicon_compatibility。 **本地化** 英语( en_EN ) Philippe Bernard法语( fr_FR ) Philippe Bernard 瑞典语( sv_SE ) Linus Wileryd 巴西葡萄牙语( pt_BR )Marcelo Volgarini,CriaçãodeSites 荷兰语( nl_NL ) Axel Vanderhaeghen 丹麦语( da_DK ) […]
WordPress 技巧:使用 Gravatar 作为博客的 Favicon
使用 Gravatar 作为博客的 Favicon 其实很简单,只需要简单的两步: 第一步:在当前主题的 functions.php 文件中增加 gavatar_as_favicon() 函数: function gavatar_as_favicon() { echo ‘http://www.gravatar.com/avatar/’ . md5(strtolower(trim(‘you@yourdomain.com’))). ‘?s=16’; } 注意要把上面的邮件地址替换成你 Gravatar 账户关联的邮件地址。 第二步:在 header.php 中增加 link 标签: <link rel=”shortcut icon” href=”<?php gavatar_as_favicon(); ?>” /> 标签:WordPress 技巧

