什么，为什么以及如何为您的网站制作最爱

At any given time in the day, I have about 20 tabs open in Chrome. What helps me keep track of which tabs are which are the little icons shown below.

我知道我的Google文档是带有蓝色记事本的标签。我的Trello板是带有迷你Trello板的标签。我引用的HubSpot博客是带有链轮的标签，依此类推。

These icons are known as favicons. Not only can they help boost your visibility in a browser full of open tabs — they can also help strengthen your brand’s identity.

Let’s take a closer look at what favicons are below. Then we’ll look at how you can make one with a favicon generator and add it to your site using HTML.

What is a favicon?

A favicon is a browser icon that represents a brand or website. Most often seen next to a web page’s title in browser tabs, favicons can also be found in address bars, bookmark lists, search results pages, toolbars, browser history, and other places across the web.

Google拥有最知名的粉丝之一。您可以在下面的浏览器的地址栏中看到多色G。

您还可以在我的书签列表中查看Gmail，Google Sheets，Hubspot的Wiki，Hemingway编辑器等的Favicons。

Favicons甚至出现在mobile search results on Google现在。您可以在下面看到我上次搜索的结果 - “应该多久浇一次多肉植物”。

Why do favicons matter?

Favicons not only impact user experience and brand awareness — they can also make your website look more professional.

Notice in the mobile SERP that the websites for欢乐我们的花园andEasy to Grow Bulbshave flower icons, but the site forThe Succulent Source有一个灰色的地球仪。对于关于多肉植物的网站来说，这没有多大意义，是吗？这是因为全球是没有自定义Favicon的网站的默认Favicon Google Chrome集合。

If I’m quickly scanning the page of results, I’ll probably decide to explore欢乐我们的花园andEasy to Grow Bulbs超过The Succulent Sourcefor a few reasons. Not only do they appear first in the SERP, but also their favicons, URLs, page titles, and meta descriptions all point to them being websites dedicated to everything plants and having an answer to my question.

现在，在桌面上的浏览器选项卡中为这三个网站拍摄。记住的自定义粉丝要容易得多欢乐我们的花园andEasy to Grow Bulbsthan the default favicon ofThe Succulent Source。In a sea of open tabs, I’m more likely to click back to the tabs with custom favicons and spend more time on those sites.

Finally, let’s say I click on each of these sites. When visiting欢乐我们的花园andEasy to Grow Bulbs，我立即注意到自定义Favicons基于网站的徽标。后者的彩色徽标如下所示。您会认出郁金香是他们的粉丝。

This helps to strengthen their brand identity and make their site more memorable. When visitingThe Succulent Source另一方面，我将第一次看到它们的徽标。他们可以通过匹配徽标和Favicon来提高品牌一致性。

以下是一些最常见的尺寸及其独特目的。

• 16x16:浏览器图标的大小。
• 32x32：任务栏快捷方式图标的大小。
• 96x96：桌面快捷方式图标的大小。
• 180x180: The size of Apple touch icons.
• 300x300：Squarespace所需的尺寸。
• 512x512：WordPress所需的大小。

Now that we understand what a favicon is, its purpose, and its different sizing, let’s take a look at how to make one.

如何制作最爱

You want to make your favicon recognizable and consistent with your brand identity. So instead of starting from scratch, you should base it on your company logo.

If you don’t have a logo, then start there. You can hire a designer to create one for you, or you can use tools likeLogo Crisptodesign a high-quality logofor a fraction of the cost.

一旦您对徽标感到满意，就可以开始制作您的Favicon。不幸的是，它并不像将徽标压入16x16平方并将其称为一天那样简单。例如，您的徽标可能会有文字，当缩水时不会清晰。

That’s why you want to take the most recognizable part of your logo and make it your favicon.Easy to Grow Bulbs通过从徽标中拿出郁金香并将其制作出来，从而做到了这一点。

李做出改变ke these, you might need to use icon editing software likeICONEDIT2。借助大多数图标编辑软件，您可以在单个图标文件中bob电竞官方下载添加多个尺寸。一旦您满意粉丝图像和尺寸，就可以将文件保存在PNG或JPG格式中，然后将其上传到Favicon Generator。

However, for smaller changes like cropping an image, you can complete the entire process using a favicon generator. Let’s take a closer look at these online tools below.

Favicon Generators

Below are some of the best favicon generators on the web. With these tools, you simply upload your favicon image and it will convert the image into proper favicon formats and make it available to download. This process will only take a few minutes.

Favicons的标准格式是ICO和PNG。ICO与包括Internet Explorer在内的所有浏览器兼容。PNG是另一种常见格式。唯一的缺点是Internet Explorer不会支持PNG文件。理想情况下，您选择的发电机将允许您以两种格式下载粉丝。

Favikon

Creating your favicon in Favikon is easy. You simply upload an image, crop it, and then download the resulting icon in an ICO or PNG format. Below I’ve uploaded the骆驼图标来自名词项目。

不利的一面是Favikon仅支持一个尺寸：16x16像素。有关更多尺寸选项，请查看下面的工具。

Favicon.io

With Favicon.io, you can generate a favicon from scratch or from an image, logo, or emoji. You can preview it in three different sizes before downloading.

You can download the result in ICO and PNG formats and in multiple sizes. The options are listed below:

• Android-Chrome-192x192.png
• android-chrome-512x512.png
• 苹果触摸 - icon.png
• Favicon-16x16.png
• favicon-32x32.png
• Favicon.ico

Favicon.ico & App Icon Generator

With this free tool, you can upload a PNG or JPG image and convert it to ICO and PNG formats in even more sizes.

下载选项如下：

• apple-icon-57x57.png
• apple-icon-60x60.png
• apple-icon-72x72.pnf
• apple-icon-76x76.png
• Apple-Icon-114x114.png
• Apple-Icon-1220x120.png
• apple-icon-144x144.png
• apple-icon-152x152.png
• apple-icon-180x180.png
• android-icon-192x192.png
• favicon-32x32.png
• favicon-96x96.png
• Favicon-16x16.png

Once you’ve generated your favicon in your desired format, you’ll save it in the root directory of your site. You can then link to the file in HTML to implement the favicon on your site.

Before we walk through that process below, it's important to note this applies to site owners who built their site from scratch or with a development framework likeBootstrap CSS。如果您使用了网站构建器或CMS，例如WordPress或WordPress替代方案, then the process will vary slightly.

How to Add a Favicon in HTML

Once you’ve created your favicon, you have to tell browsers and other web apps where to find it. To do so, you have to add a line of code in the section of your HTML file.

Let’s say you saved your PNG file as “favicon.ico.” Then you’d add the following code snippet anywhere between your tags:

Please note: Your favicon does not have to be placed in the root directory of your site — it just usually is. If you saved it in another location, just make sure the href attribute is accurate. So if you saved it to a subfolder named “images” then you’d type in .

Now let’s say you created multiple favicon sizes. You can load them all on your site by adding a line of code for each size to the section of your HTML file. If you created a 16x16, 32x32, 48x48, and 180x180 version, for example, then you’d add the following snippet of code:

Creating Your Favicon

Favicons are an important element of web design. They can improve the visitor experience, strengthen your brand identity, and make your site seem more credible. Don’t make the mistake of overlooking them — particularly when they’re easy to create and add to your site. You just need a free favicon generator and some familiarity with HTML.