Favicon 是收藏夹图标的缩写形式，也称为书签图标，可以定义为带有 .ico 文件扩展名的小徽标，而不是通常在地址栏中看到的任何其他 .bmp 或 .gif 文件经常访问的 URL 的个性化图像，有助于广告、促销或作为标准商标制作，同时在 google、Facebook 等网站中发挥着重要作用，我们在地址栏左侧注意到了一个小徽标，专业的外观以及出现在用户收藏夹书签中，并且没有图标图标，该网站仍然是通用网页图标，并作为收藏夹图标的快捷方式而受到青睐。
示例实时示例如下所示。单击书签中的收藏夹会显示典型图标。甚至一些使用 XML 的 Web 服务和搜索引擎也使用 favicon，因为它们具有独特性。
语法：
下面给出了主要元标记以链接到网页。
<link rel="icon" href="image path" type="image/icon type">
登录后复制
在上面的语法中，您将图像路径替换为 favicon.ico 的实际位置，您可以将其放置在图像目录中。最后一个值类型是 MIME 格式文件。您可以在这里使用任何类型的图像，但我们认为 GIF 格式更高级。
如何创建 HTML Favicon？
网页设计师创建他们的个性化图标并将其与网页相关联。支持网站图标的浏览器将其显示在其特定的地址栏中，通过两种方式实现这一点。其次，它在下一个链接中以选项卡式文档界面显示。最重要的是，即使是从硬盘驱动器中选择的图标，也必须使用 (.ico) 文件格式。有一些免费服务可以转换图像。
开发人员完成网站设计后，他们会添加一个网站图标。简而言之，它用官方网页图标替换了浏览器选项卡上的空白文档图标。这使得用户能够使网站更易于访问或找到更易于访问的网站。最流行的搜索引擎 Google 通过其徽标主题给用户留下深刻印象或产生认同。由于图标太小，用户应该能够清楚地理解。创建网站图标有多种方法。方法1 – 使用文件管理器自动生成，方法-2：上传常规图像。
创建 favicon.ico 的步骤。这是一个简单的着陆过程：
- 生成尺寸为 16 x 16 像素的图像（图像识别）。在这里，您可以调整图像大小，使其变小以用作图标。
- 转换为 favicon.ico 文件格式以便浏览器理解。
- 将生成的图标上传到网站。
- 下一步是将代码添加到 HTML。您甚至可以使用图标作为桌面或 Apple 图标。
如何在 HTML 文件中插入 Favicon？
您还可以使用 .gif 或 .png 格式创建具有透明背景的图标。可能会出现这样的问题：为什么我们需要图标？答案非常简单：在全球范围内打造我们的网站品牌并进行营销。小图标让网页显得更加专业。您将网站图标添加到 HTML 文件中，该文件必须具有特定的特征。您可以随时添加或更改网站上的图标。
-
文件格式的标准名称：创建并命名图像后，默认有一个 favicon.ico（使用 X-ICON 编辑器完成的 ICO 文件）。
-
图片文件大小：16 * 16、64 * 64、128 * 128 像素，文件大小不超过 100KB。
-
颜色：也许8口，24或32口
-
图片： 应为 gif 或 png 格式。
图标位于
和 之间。元素并替换图像位置。它使用定义文件链接的链接标签。它使用两个属性：rel 和 href。我们可以使用带有插件的 Photoshop 和其他在线生成器将图像文件转换为 .ico 格式。
图标位置路径：这是标准实现。
<link rel=" icon" ……….../> // It installs variety of icons.
<link rel =" Shortcut icon" href=……….../> // here in the link attribute shortcut installs its own address bar icon.
登录后复制
下一个代码用于IOS用户：
<link rel =" apple-touch -icon" sizes ="180 x 180 href=……….../>
登录后复制
下面是我们可以在 HTML 代码中使用的代码示例。
示例：
<!-- HTML code demo to display an icon in an address bar-->
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title>
EDUCBA icon
</title>
<link rel = "icon" href =https://favi.png type = "image/x-icon">
</head>
<body>
<h1 style = "color:blue;">
EDUCBA Icon
</h1>
<p>
Icon is added to the address bar
</p>
</body>
</html>
登录后复制
输出：
代码说明：我在上面的代码中创建了一个椭圆形小图标，并将其转换为favicon。我们注意到 Internet Explorer 中会显示一个图标，但许多浏览器不支持它。 IE从根目录获取图标。如果不存在指定的路径，HTML 文件将显示服务器响应的 404 错误。您可能需要清空网站的缓存才能更新网站图标，因为网络浏览器会持续保留缓存的网站图标。
注意：虽然成功完成了图标创建，但它并不在所有浏览器选项卡中可见。与 Internet Explorer 5.0+ 和 Netscape 7.0+ 具有良好的兼容性。大多数现代浏览器都支持不同的图形格式作为其图标。当服务器配置不当时就会出现问题：必须创建 type=“image/x-icon .ico 格式的根”。
结论
最后，favicon标志在网站开发中起着至关重要的作用，而且我们也看到了各种创建favicon的方法，从而实现跨浏览器的兼容性。此图标有助于创建域名的可视化规范。将它们添加到网站很容易，因为它们可以指导网站识别和品牌推广，并支持网页设计师展示他们的专业水平。
以上是HTML 网站图标 的详细内容。更多信息请关注PHP中文网其他相关文章！
