【前端】网站favicon图标制作

索西引擎2025-08-06 12:48

favicon.ico 一般用于作为缩略图的网站标志，它显示在浏览器的地址栏或者标签上，如下图所示。目前主要的浏览器都支持favicon.ico图标。

一、制作favicon图标

把品优购图标切成png图片。（具体切图过程请见之前的文章，PSD文件需要可以在评论留言）
把png图片转换成ico图标，这需要借助于第三方转换网站，例如比特虫：https://www.bitbug.net/ 。

二、favicon图标放到网站根目录下

三、HTML页面引入favicon图标

在html文件的元素之间引入以下代码。(注意href属性的文件路径)

html 复制代码

<link rel="shortcut icon" href="favicon.ico" />

VScode编辑器下运行html文件，即可见到效果。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品优购</title>
    <link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
    
</body>
</html>