favicon.ico 介绍与使用 - 实践

小咪咪 2022-12-06 12:59 332阅读 0赞

1.应用场景

<table> 
 <tbody> 
  <tr> 
   <td>主要用于了解favicon.ico的作用以及使用，帮助更好地理解web系统与开发.</td> 
  </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
  <tr> 
   <td> <p>1.文档阅读</p> <p><a href="https://www.cnblogs.com/nyw1983/p/11222350.html" rel="nofollow">https://www.cnblogs.com/nyw1983/p/11222350.html</a>&nbsp; //favicon.ico是什么？</p> <p><a href="https://blog.csdn.net/guzhao593/article/details/93972193" rel="nofollow">https://blog.csdn.net/guzhao593/article/details/93972193</a>&nbsp; //如何给网站设置favicon.ico图标</p> <p>&nbsp;</p> <p>2.个人整理输出：</p> <p>简单说：</p> <p>favicon，即其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。</p> <p>favicon&nbsp;中文名称：网页图标 &nbsp;</p> <p>英文名称：favorites icon<strong>&nbsp;。</strong></p> <p>&nbsp;</p> <p>当然，这不是Favicon的全部，根据浏览器的不同，Favicon显示也有所区别：在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中，favicon不仅在收藏夹中显示，还会同时出现在<a href="https://baike.baidu.com/item/%E5%9C%B0%E5%9D%80%E6%A0%8F/9637129" rel="nofollow">地址栏</a>上，这时用户可以拖曳favicon到桌面以建立到网站的快捷方式；即网页左上角的小图标，以百度为例：</p> <p><img alt="" height="71" src="https://img-blog.csdnimg.cn/20200913193519798.png" width="290"></p> <p><strong>&nbsp;标签式浏览器</strong>甚至还有不少扩展的功能，如FireFox甚至支持动画格式的favicon等。favicon.icn 网页图标可以使网页显得更加专业美观，有辨识度，更好的塑造网站的主题形象。</p> <p>&nbsp;</p> <p>&nbsp;了解了什么是favicon.icn之后我们也可以自己尝试着给自己构建的网页添加一个 网页图标。那么<strong>&nbsp;</strong>该如何添加favicon网页图标？</p> <p>见3-实践</p> <p>&nbsp;</p> <p>3.工具/素材</p> <p><a href="http://www.bitbug.net/" rel="nofollow">http://www.bitbug.net/</a></p> <p><img alt="" height="581" src="https://img-blog.csdnimg.cn/20200913193924712.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="831"></p> <p><a href="http://www.faviconico.org/" rel="nofollow">http://www.faviconico.org/</a>&nbsp; //需要能访问外网</p> <p><img alt="" height="523" src="https://img-blog.csdnimg.cn/20200913194004730.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="856"></p> <p><a href="https://v3.bootcss.com/components/" rel="nofollow">https://v3.bootcss.com/components/</a></p> <p><img alt="" height="641" src="https://img-blog.csdnimg.cn/20200913194039905.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="860"></p> <p>&nbsp;</p> <p>3.实践</p> 
    <table> 
     <tbody> 
      <tr> 
       <td> <p>简单说： 即借助favicon.ico在线生成工具，选择自己的图片文件生成即可。</p> <p>这里文件图片可以png或者其他格式图像文件，但是推荐使用png格式，因为要背景色透明才好，可以使用PS自己设计或者在原有的图片上去除背景色。</p> <p>&nbsp;</p> <p>具体操作：暂时省略</p> <p><img alt="" height="147" src="https://img-blog.csdnimg.cn/20200913194126185.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="700"></p> <p>效果如下：</p> <p><img alt="" height="205" src="https://img-blog.csdnimg.cn/20200913194209820.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="767"></p> <p>收藏时：</p> <p><img alt="" height="280" src="https://img-blog.csdnimg.cn/2020091319431548.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="271"></p> </td> 
      </tr> 
     </tbody> 
    </table><p>后续补充</p> <p>...</p> </td> 
  </tr> 
 </tbody> 
</table>

3.问题/补充

4.参考

<table> 
 <tbody> 
  <tr> 
   <td> <p><a href="https://www.cnblogs.com/nyw1983/p/11222350.html" rel="nofollow">https://www.cnblogs.com/nyw1983/p/11222350.html</a>&nbsp; //favicon.ico是什么？</p> <p><a href="https://blog.csdn.net/guzhao593/article/details/93972193" rel="nofollow">https://blog.csdn.net/guzhao593/article/details/93972193</a>&nbsp; //如何给网站设置favicon.ico图标</p> <p><a href="http://www.bitbug.net/" rel="nofollow">http://www.bitbug.net/</a></p> <p><a href="http://www.faviconico.org/" rel="nofollow">http://www.faviconico.org/</a></p> <p><a href="https://v3.bootcss.com/components/" rel="nofollow">https://v3.bootcss.com/components/</a></p> </td> 
  </tr> 
 </tbody> 
</table>

后续补充

...