如何使用HTML将Favicon添加到您的网站

How To Build a Website With HTML 如何使用HTML构建网站

This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

本教程系列将指导您使用HTML(用于在Web浏览器中显示文档的标准标记语言)创建和进一步自定义此网站 。 不需要任何编码经验，但是如果您希望重新创建演示网站，建议您从本系列的开头开始 。

At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

在本系列的最后，您应该拥有一个可以部署到云的网站，并且对HTML有了基本的了解。 知道如何编写HTML将为学习其他前端Web开发技能(例如CSS和JavaScript)奠定坚实的基础。

In this tutorial, we will walk through the steps involved in adding a favicon to your webpage using HTML. You can use any image you like for your favicon, but keep in mind that simple, high-contrast images often work best given the favicon’s small size. You can also generate a custom favicon through sites like favicon.cc.

在本教程中，我们将逐步介绍使用HTML向您的网页添加收藏夹图标的步骤。 您可以将任何喜欢的图像用作收藏夹图标，但是请记住，考虑到收藏夹图标的尺寸较小，简单，高对比度的图像通常效果最好。 您还可以通过favicon.cc等网站生成自定义图标。

A favicon is a small image that is located in the browser tab to the left of a webpage’s title. The image below illustrates the location of a favicon.

网站图标是位于网页标题左侧浏览器标签中的小图片。 下图显示了网站图标的位置。

To add a favicon to your site, create a folder in your project directory called images (if you don’t already have one) and save your desired favicon image in this folder. If you don’t have an image, you download this Sammy the Shark image that we have hosted on our demonstration website. (For a refresher on how to add images to webpages using HTML, please visit our tutorial HTML Images from earlier in this tutorial series.

要将收藏夹图标添加到您的站点，请在项目目录中创建一个名为images的文件夹(如果尚未创建)，然后将所需的收藏夹图像保存在此文件夹中。 如果您没有图片，请下载我们在演示网站上托管的Sammy the Shark图片 。 (有关如何使用HTML向网页添加图像的更新，请访问本系列教程前面的HTML图像教程。

Next, add the <link> element (highlighted below) to your index.html file right below the <title> element. Your code should now be like this:

接下来，将<link>元素(在下面突出显示)添加到<title>元素正下方的index.html文件中。 您的代码现在应如下所示：

...
<title> Sammy’s First Website </title>
<link rel="shortcut icon" type="image/jpg" href=”Favicon_Image_Location”/>
...

Make sure to replace Favicon_Image_Location with the relative file path of your favicon image. Save the index.html file and reload it in your web browser. Your browser tab should now contain a favicon image.

确保用Favicon_Image_Location图像的相对文件路径替换Favicon_Image_Location 。 保存index.html文件，然后将其重新加载到Web浏览器中。 您的浏览器选项卡现在应包含一个收藏夹图像。

You should now know how to add favicon images to websites using HTML.

您现在应该知道如何使用HTML向网站添加收藏夹图像。

翻译自: https://www.digitalocean.com/community/tutorials/how-to-add-a-favicon-to-your-website-with-html