Favicon 是在网站标签页、收藏夹和书签栏等位置显示的小图标，可以帮助用户快速识别网站。在大多数情况下，这个图标是一个静态文件，使用 <link> 标签引入到 HTML 页面中。但是，在某些情况下，我们可能需要动态生成 Favicon，例如：
- 在不同的页面上显示不同的图标；
- 根据用户偏好设置来显示不同的图标；
- 显示与当前时间相关的图标。
那么如何动态生成 Favicon 呢？本文将介绍两种方法：通过 Canvas 生成图片和通过 Blob URL 生成图片。
使用 Canvas 生成图片
第一步是创建一个空的 canvas 元素，并设置其宽度和高度：
<canvas id="favicon-canvas" width="64" height="64"></canvas>
接下来，我们可以使用 JavaScript 代码来绘制图像。例如，以下代码将在画布上绘制一个红色的圆形：
const canvas = document.getElementById('favicon-canvas');
const context = canvas.getContext('2d');
context.fillStyle = 'red';
context.beginPath();
context.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, 0, 2 * Math.PI);
context.fill();最后，我们需要将 canvas 中的内容转换为 favicon，并将其插入到 HTML 页面中。具体来说，我们可以使用 toDataURL() 方法来将 canvas 转换为 data URI：
const link = document.createElement('link');
link.rel = 'icon';
link.type = 'image/png';
link.href = canvas.toDataURL();
document.head.appendChild(link);这将创建一个新的 <link> 元素，并将其插入到 HTML 页面中。现在，您应该可以看到网站标签页上显示了一个红色的圆形图标。
使用 Blob URL 生成图片
第二种方法是使用 Blob URL。Blob URL 是一种特殊的 URL，可以指向一个 Blob 对象。Blob 是二进制数据的一个容器，可以包含任何类型的数据，包括图像、音频和视频等。以下是使用 Blob URL 动态生成 Favicon 的步骤：
- 创建一个空的 canvas 元素，并设置其宽度和高度。
<canvas id="favicon-canvas" width="64" height="64"></canvas>
- 绘制图像，然后将 canvas 转换为 Blob 对象。
-- -------------------- ---- ------- ----- ------ - ------------------------------------------ ----- ------- - ------------------------ ----------------- - ------ -------------------- ------------------------ - -- ------------- - -- ------------ - -- -- - - --------- --------------- ------------------ -- - ----- --- - -------------------------- ----- ---- - ------------------------------- -------- - ------- --------- - ------------ --------- - ---- -------------------------------- -- -------------
- 将 Blob 对象转换为 Blob URL，并将其插入到 HTML 页面中。
我们使用 toBlob() 方法将 canvas 转换为 Blob 对象。toBlob() 方法需要一个回调函数作为参数，该函数接受一个 Blob 对象作为参数。在回调函数中，我们可以使用 createObjectURL() 方法将 Blob 对象转换为 Blob URL。最后，我们创建一个新的 <link> 元素，并将其插入到 HTML 页面中。
总结
本文介绍了两种方法来动态生成 Favicon：通过 Canvas 生成图片和通过 Blob URL 生成图片。这些技术可以帮助您实现一些有趣的功能，例如根据当前时间或用户设置来生成不同的图标。请记住，在使用这些技术时，要确保您生成的图像是有效的，并遵守浏览器和 Web 标准。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25657