您的WordPress Favicons指南

Anna Fitzgerald
Anna Fitzgerald

更新:

Published:

Recognition is crucial for your website to succeed. Fromcreating a great logodeveloping key messaginganddelivering great content,访问者识别您的品牌的越容易,他们会记住您的网站的机会就越好,从内容的好奇心转变为sales conversion

网站所有者上传WordPress Favicon

But reliable recognition isn’t just about the big things — done well, even the smallest details of yourWordPress websitecan help it stand out from the crowd and attract customer notice. This is the role of the favorite icon or“favicon”该网络浏览器选项卡,书签和移动设备上的应用程序用于您的网站的应用图像。

不确定Favicons是如何工作的,或者如何在您的网站上启动和运行?我们为您提供了我们的Favicons功能指南 - 它们是什么,为什么重要以及如何在WordPress中启用它们。

Grow Your Business With HubSpot's Tools for WordPress Websites

If you would rather follow along with a video, here's a walkthrough created byElegant Themes

什么是WordPress Favicon?

官方WordPress support pagedefines a favicon as “an icon associated with a particular website or web page.” This description doesn’t do the term justice — in fact, favicons are everywhere and are intrinsically associated with your brand.

Let's take a closer look at how favicons look and why they matter below.

But what does a favicon look like in real life? For a quick example, take a look at the browser tab of this webpage if you’re on a desktop or the area just under the address bar on your mobile device. Notice anything? That orange symbol with lines and circles is HubSpot’s favicon — and it shows up anytime you’re on our site.

In most cases, favicons are the same as brand logos scaled down to fit web and mobile browsers. Where this isn’t possible — such as cases where your logo is too complex or detailed — site owners typically opt for similar配色方案and thematic elements to ensure brand consistency.

一旦您开始看到Favicons,就无法看见它们;从网页到标签到书签和移动应用程序,您为Favicon选择的图标与您的网站和品牌无关紧要 - 因此请确保明智地选择。

Why Favicons Matter

Favicons are the visual currency of your brand. They’re everywhere — from browsers to bookmarks tomobile apps——成为你网站的一不可或缺的一部分ll branding strategy.

As result, effective favicon design and deployment offers three broad benefits:

Improved Brand Recognition

Think of your favicon like your calling card — the icon needs to be simple, recognizable and consistent. The more places your favicon appears, the better, since this makes it easy for users to connect your WordPress site with your icon image.

Consistency is also key as users open multiple browser tabs and the available space for text descriptions naturally shrinks. Open enough tabs and all that’s left is — you guessed it — room for the favicon.

增加了消费者的信心

While visitors may not be able to define what a favicon is or how it works, these icons are inherently familiar. So familiar, in fact, that sites without favicons often stand out from the crowd for all the wrong reasons.

Much like relevant social media content and secure site connections, favicons are critical to boosting consumer confidence in the products or services you offer on your site.

集成的移动一致性

The impact of mobile devices can’t be ignored, with smartphones and tabletsnow outpacing desktopsas the primary means of consumer online interaction. Favicons make it possible to ensure your brand easily translates to mobile — when users create website bookmarks on mobile home screens, your favicon stands in for the link.

Favicon Creation Guidelines

不确定如何开始创建网站的Favicon?让我们分解一些最佳实践指南。

1. Get the size right.

如上所述,Favicons通常为512 x 512像素。虽然可以使用较大的WordPress Favicon尺寸,但该平台通常会要求您裁剪图像。

2. Keep it simple.

While it’s possible to add background colors and other customization to your favicon, keeping it simple is often the best choice. Here, simplicity includes opting for transparency over background colors and keeping the number of foreground colors in your favicon to one or two at most.

Ideally, your favicon will look almost identical to your brand’s logo — if that’s not possible, try to pull elements from your logo such as shapes or color schemes that help tie in your new favicon.

3. Choose wisely.

网站所有者可以随时更新自己的图标,but it’s a good idea to keep the number of changes to a minimum. Here’s why: If users see a different favicon every time they log on to your website, they won’t have an opportunity to associate a specific image with your brand.

底线?最好没有Favicon,直到找到适合您的网站的产品并且不打算更改的网站。

如何启用WordPress Favicons

为了使您的Favicon在WordPress网站上启动并运行,您有三个选择:

  1. Use the Site Icon feature
  2. 安装Favicon插件
  3. Upload the new favicon yourself

Let’s break down each method in more detail.

1. Use the site icon feature.

从WordPress版本4.3开始内容管理系统(CMS)包括一个启用Favicons的站点图标函数。只需准备您的映像文件 - 可以是.jpeg,.ico,.gif或.png文件 - 然后前往WordPress网站的管理页面。

Next, click on “Appearance” and then “Customize”, then click “Site Identity.” Now, click “Select Image” under the Site Icon subheading and upload the file you’ve prepared. You should see a screen like this:

在WordPress仪表板中使用站点图标功能创建Favicon

If you like the favicon you’ve created, no further action is required. If not, you can easily remove the file or upload a new image.

2.安装Favicon插件。

You can also use a plugin — such asFavicon by RealFaviconGenerator— to create and deploy your favicon. Thismust-have WordPress plugin不仅可以自定义您的Favicon,还可以确保创建多个版本以满足不同的操作系统和设备版本的要求。

只要您上传到插件的图像至少为70 x 70像素,realfavicongonerator就会照顾其余的。

3. Upload the new favicon yourself.

如果您想自己做腿部工作,则可以创建并上传自己的Favicon到WordPress网站。

首先,创建一个至少16 x 16像素并保存为.ICO文件的图像。然后,使用FTP客户端将此文件上传到当前的主文件夹WordPress主题— typically the same place as your wp-admin and wp-content folders.

尽管这应该在大多数Web浏览器中显示您的Favicon,但一些较旧的浏览器版本将需要您编辑WordPress标头HTML代码。结果?除非您熟悉更多技术WordPress功能,否则不建议使用DIY Favicons。

最终的最爱思想

whie favicons仅形成您的一小部分WordPress website build,它们对于网站识别至关重要。一致且清晰的Favicons使访客可以轻松记住您的网站,并在台式机,平板电脑和移动设备上进行这种心理连接。

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

话题: WordPress网站

相关文章

Capture, organize, and engage web visitors with free forms, live chat, CRM, analytics, and more.

DOWNLOAD THE FREE PLUGIN