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

系统管理员 2022-11-28 15:23 216阅读 0赞

**[How To Build a Website With HTML][] [如何使用HTML构建网站][How To Build a Website With 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][How To Build a Website With HTML] if you wish to recreate the demonstration website.

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

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等][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图片][Sammy the Shark image] 。 (有关如何使用HTML向网页添加图像的更新，请访问本系列教程前面的[HTML图像][HTML Images]教程。

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][https_www.digitalocean.com_community_tutorials_how-to-add-a-favicon-to-your-website-with-html]

[How To Build a Website With HTML]: https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-html
[this website]: http://html.sammy-codes.com/
[favicon.cc]: https://www.favicon.cc/
[Sammy the Shark image]: https://html.sammy-codes.com/images/small-profile.jpeg
[HTML Images]: https://www.digitalocean.com/community/tutorials/html-images
[https_www.digitalocean.com_community_tutorials_how-to-add-a-favicon-to-your-website-with-html]: https://www.digitalocean.com/community/tutorials/how-to-add-a-favicon-to-your-website-with-html