favicon图标制作
程序员文章站
2022-03-05 23:49:43
...
favicon图标制作详细步骤
一、Favicon简介
收藏夹图标，是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。
例如：
二、制作步骤
1、百度搜索favicon在线制作
2、百度出来有很多种方法可以制作图标，在这里，选择第二种作为解析步骤（使用哪一种方法都可以）。
3、选择好要制作的图标文件（例如百度图标）后，进行下一步。
4、出现下图红色圈内所示，稍等一会即可。
5、转换成功后，点击“下载”即可。
6、下载好后，重命名为favicon.ico。
7、将做好的favicon图片文件上传至你网站的根目录下，且保证命名为favicon.ico。
8、在head中插入一下几行代码，这时候重新生成更新网站，并清除浏览器缓存，刷新下就可以看到网站的favicon文件了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>favicon制作</title>
<link href="favicon.ico" mce_href="favicon.ico" rel="bookmark" type="image/x-icon" />
<link href="favicon.ico" mce_href="favicon.ico" rel="icon" type="image/x-icon" />
<link href="favicon.ico" mce_href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<div>hello world</div>
</body>
</html>注：rel属性表示含义是：链接文件与此文件的关系。
属性值bookmark表示的就是相关文章（书签）的关系。（也有人说，这个表示文章页面的永久固定链接。）
shortcut icon,特指浏览器中地址栏左侧显示的图标，一般大小为16x16，后缀名为.ico；
icon，指的是图标，格式可为PNG\GIF\JPEG，尺寸一般为16x16、24x24、36x36等。
只加入这一行代码也可以：<link href="favicon.ico" mce_href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
9、效果图