想必很多朋友都注意到了，每次打开不同的网站，除了网站的固有的标题外，标题旁边还有一个特有的图标方便识别（如下图）
图标
可以看见，每个网站都有其特定的图标，很多网页相关工作者在设置完
后就算结束了，这样如果用浏览器打开则看不到图标，只有标题，如果发布自己的项目识别度并不高，在用户打开的众多网页中无法快速找到原有的网页，加上图标这一点虽然看似没有多大影响，但是基于友好度提升了不少，相对做SEO的朋友应该用得到</p>
<p style="margin: 16px 0px; padding: 0px; color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);">
具体方法如下</p>
<pre style="margin: 0px; padding: 0px; font-family: inherit; white-space: normal; color: rgb(34, 34, 34); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);">
1、网页图标是一个特定的名称，统一是这个名字favicon.ico</pre>
<p style="margin: 16px 0px; padding: 0px; color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);">
z小编这里就直接放上项目源码，方便大家直观的了解。<img alt="网站优化小技巧——网页标题小图标" src="http://p3.pstatp.com/large/2edc0000b87bc545e5cc" style="border: 0px; max-width: 100%; display: block; margin: 10px auto;" /></p>
<p class="pgc-img-caption" style="margin: 0px 0px 16px; padding: 0px; text-align: center; font-size: 12px; color: rgb(119, 119, 119); line-height: 16px; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);">
源码</p>
<p style="margin: 16px 0px; padding: 0px; color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);">
刷新一下后就已经显示图标，如图所示</p>
<p style="margin: 16px 0px; padding: 0px; color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);">
<img alt="网站优化小技巧——网页标题小图标" src="http://p1.pstatp.com/large/2ed40000ca09721a3b31" style="border: 0px; max-width: 100%; display: block; margin: 10px auto;" /></p>
<p class="pgc-img-caption" style="margin: 0px 0px 16px; padding: 0px; text-align: center; font-size: 12px; color: rgb(119, 119, 119); line-height: 16px; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);">
效果</p>
</div>
<div class="q">
<p class="l">上一篇：<a href='/news/78-2-cn.html'>原来网站优化还有这种操作？</a></p>
<p class="r">下一篇：<a href='/news/76-2-cn.html'>微商QQ空间自媒体运营技巧</a></p>
</div>
</div>
</div>
</div>
<div class="b1"></div>
</div>
<span id="code_djs" style="display:none"><script type="text/javascript" src="/zhuitian6/js/427f5093bb4f4bdca2c43860cf6281b4.js"></script></span>
<script type="text/javascript" language="javascript">document.getElementById("ys_djs").innerHTML = document.getElementById("code_djs").innerHTML;</script>
<!-- <div class="u">
<p><a href="/liuyan/" title="留言"><img src="/zhuitian6/picture/dd.png" alt="留言" /></a></p>
<p><a class="Xtop" href="javascript:void(0)" onclick="$('html,body').stop().animate({'scrollTop':'0'})" title="返回顶部" rel="nofollow"><img src="/zhuitian6/picture/ws.png" alt="返回顶部" /></a></p>
</div> -->
<script type="text/javascript" src="/zhuitian6/js/index.js"></script>
<div class="pc">
<img src="/zhuitian6/picture/s.jpg" width="217" height="275" alt="侍" />
</div>
<div class="ah">
<a href="/" target="_blank">重庆短信群发</a>
</div>
<html>
<head>
<style>
.gb-contact {
z-index: 9999;
right: 10px;
position: fixed;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%)
}
.gb-contact li {
margin-bottom: 10px;
height: 60px;
width: 60px;
transition: 0.5s;
position: relative;
list-style:none;
}
.gb-contact .txt {
position: absolute;
right: 0;
top:0;
height: 60px;
overflow: hidden;
transition: 0.5s;
width: 142px;
line-height: 60px;
font-size: 16px;
color: #ffffff;
padding-right: 60px;
text-align: center;
background: rgba(47,173,56,0.8);
border-radius: 60px
}
.gb-contact .txt2 {
position: absolute;
right: 0;
height: 160px;
overflow: hidden;
transition: 0.5s;
width: 246px;
height:160px;
font-size: 16px;
color: #ffffff;
padding-right: 16px;
text-align: center;
}
.gb-contact .ico {
transition: 0.5s;
position: absolute;
right: 0;
top: 0;
background-color: #fff;
background-image: url("/img33.png");
background-repeat: no-repeat;
display: inline-block;
height: 60px;
width: 60px;
border-radius: 60px
}
.gb-contact .ico-phone {
background-position: 0 -70px
}
.gb-contact .ico-sc {
background-position: 0 -140px
}
.gb-contact .ico-cx {
background-position: 0 -210px
}
.gb-contact .ico-zx {
background-position: 0 -280px
}
.gb-contact li:hover .txt {
width: 168px
}
.gb-contact li:hover .ico {
background-color: #2FAD38
}
.gb-contact li:hover .ico-pc {
background-position: -90px 0
}
.gb-contact li:hover .ico-phone {
background-position: -90px -70px
}
.gb-contact li:hover .ico-sc {
background-position: -90px -140px
}
.gb-contact li:hover .ico-cx {
background-position: -90px -210px
}
.gb-contact li:hover .ico-zx {
background-position: -90px -280px
}
</style>
</head>
<body>
<div class="gb-contact">
<ul>
<li class="phone">
<a href="tel:13517224966" class="js-contac">
<div class="txt">13517224966</div>
<span class="ico ico-phone"></span>
</a>
</li>
<li class="qq">
<a href="https://wpa.qq.com/msgrd?v=3&uin=807382458&site=qq&menu=yes" target="_blank">
<!-- <a href="javascript:;" onclick="location.href='tencent://message/?uin=807382458&Site=qq&Menu=yes'"> -->
<div class="txt">在线咨询</div>
<span class="ico ico-zx"></span>
</a>
</li>
<!-- <li class="phone">
<a href="javascript:;" class="js-contac">
<div class="txt2"><img src="/zhuitian/images/weixin.png" style="width:165px;"></div>
<span class="ico ico-sc"></span>
</a>
</li> -->
</ul>
</div>
</body>
</html>
</body>
</html> 
