favicon图标制作

来源：互联网发布：淘宝网购物女装连衣裙编辑：程序博客网时间：2024/04/28 10:08

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、效果图

阅读全文

0 0