HTML 网站图标 -html教程-PHP中文网

如何创建 HTML Favicon？

如何在 HTML 文件中插入 Favicon？

结论

首页

web前端

html教程

HTML 网站图标

王林

Sep 04, 2024 pm 04:48 PM

html html5 HTML Tutorial HTML Properties HTML tags

Favicon 是收藏夹图标的缩写形式，也称为书签图标，可以定义为带有 .ico 文件扩展名的小徽标，而不是通常在地址栏中看到的任何其他 .bmp 或 .gif 文件经常访问的 URL 的个性化图像，有助于广告、促销或作为标准商标制作，同时在 google、Facebook 等网站中发挥着重要作用，我们在地址栏左侧注意到了一个小徽标，专业的外观以及出现在用户收藏夹书签中，并且没有图标图标，该网站仍然是通用网页图标，并作为收藏夹图标的快捷方式而受到青睐。

示例实时示例如下所示。单击书签中的收藏夹会显示典型图标。甚至一些使用 XML 的 Web 服务和搜索引擎也使用 favicon，因为它们具有独特性。

HTML 网站图标

语法：

下面给出了主要元标记以链接到网页。

<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>

登录后复制

输出：

HTML 网站图标

代码说明：我在上面的代码中创建了一个椭圆形小图标，并将其转换为favicon。我们注意到 Internet Explorer 中会显示一个图标，但许多浏览器不支持它。 IE从根目录获取图标。如果不存在指定的路径，HTML 文件将显示服务器响应的 404 错误。您可能需要清空网站的缓存才能更新网站图标，因为网络浏览器会持续保留缓存的网站图标。

注意：虽然成功完成了图标创建，但它并不在所有浏览器选项卡中可见。与 Internet Explorer 5.0+ 和 Netscape 7.0+ 具有良好的兼容性。大多数现代浏览器都支持不同的图形格式作为其图标。当服务器配置不当时就会出现问题：必须创建 type=“image/x-icon .ico 格式的根”。