学了这么久前端,好像好多人还不知道tltle位置的网站缩略标志怎么写的?没关系,其实只要一行代码就可以搞定。
首先我们先清楚一下网站缩略标识是什么?其实就是我们平时浏览网站的时候,看到最上面的小图标,比如说我们熟知的百度:
ctrl+U查看网站源码,你就会发现:
源码中写了两行代码来显示这个缩略图标
1.<linkrel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
2.<linkrel="icon"sizes="any" maskhref="//www.baidu.com/img/baidu.svg" />
所谓favicon,即Favorites Icon的缩写,顾名思义,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站。
而IE只支持ico格式的favicon,rel属性必须包含shortcut, 才会在IE下显示;所以大部分网站在head里都会写两行来展示自己网站的图标。
之前看到有写的时候会出现图标不显示的问题,下面总结了几种主要注意的地方:
1、网页图标是一个特定的名称,统一是这个名字favicon.ico;
2、将此命名的图标图片上传到服务器的根目录下面;
3、有的会自动识别图标图片,有的需要添加以下代码,<link href="/favicon.ico" type="image/x-icon" rel="shortcut icon" />;
4、更新网页,刷新,有的浏览器会立刻显示,有的需要有延长时间,清理一下。
最后附上两个制作icon图标的网站方便大家使用:
http://www.ico.la
http://www.bitbug.net