【前端】网页地址栏设置
2017-11-26 本文已影响255人
吾非言
作者：邹峰立，微博：zrunker，邮箱：zrunker@yahoo.com，微信公众号：书客创作，个人平台：www.ibooker.cc。
书客创作
首先来看一下当我们访问一些网站的时候，无论是哪一个浏览器进行访问，都能在网页地址栏上看到左侧图标和右侧标题内容。
常见的网页地址栏
右侧标题内容，可以通过在网友的<head>标签中的<title>进行设置，那么左侧图标该如何设置呢？
首先看一些这几个网站左侧图标是什么格式：
- 简书：http://www.jianshu.com/favicon.ico
- 书客创作：http://ibooker.cc/ibooker/favicon.ico
- 百度：https://www.baidu.com//favicon.ico
可以看出这三个网站的左侧图标都是favicon.ico格式的文件，实际上favicon.ico 是一种格式，一般用于网页地址栏前或者在标签上以缩略方式显示网站标志，也可以拖曳favicon到桌面以建立到网站的快捷方式。
网站设置favicon图标有哪些好处？
- 以图像形态显示，比文字显示更能加深浏览者的记忆和印像。
- 可以塑造网站的品牌。这也是在网站推广的范畴之内，
- 可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。
如何设置网页图标?
这里介绍两种方式，两种方式都可以实现：
一、Tomcat实现
打开Tomcat安装目录，找到ROOT目录下的favicon.ico，将其替换成想要显示的.ico文件即可。
Tomcat的ROOR目录结构图
二、网页实现
第一步：制作一个16×16像素的图像（LOGO），也可以制作一个200×200像素的图像或更大，然后等比列缩小为16×16 像素，（200×200像素方便制作，favicon的规格一般为16×16像素）。
可以用相关软件把jpg格式转换成ico图标格式。
第二步：将制作好的ico文件放入工程根目录（其他任意目录都可以）。
第三步：在网页<head>标签内容添加如下代码：
<link rel="shortcut icon" href="favicon.ico" >
注意：href写入ico文件地址。
最后，推荐.ico文件在线生成网站
- 打开 FavIcon
FavIcon
- 页面里有个浏览按钮，点击找到你刚才做的图像（logo）
- 点击 Generate FavIcon.ico 按钮提交
- 稍等片刻后，你的favicon.ico将会自动生成，可以点击旁边的保存按钮将 favicon.ico下载到本地。
- 上传favicon.ico文件到网站根目录下
- 最后在网页首面HTML 的<head>……</head>标签之间插入代码：<link rel="shortcut icon" href="favicon.ico">
微信公众号：书客创作
