网站选项卡处缩微logo图标的制作方法

出自：http://blog.csdn.net/xuefeng0707/article/details/18273521

在HTML中可以使用link标签来实现shortcut icon。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/dtd/xhtml1-transitional.dtd">  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.         <title>link标签实现shortcut</title>  
  6.         <link rel="shortcut icon" type="images/x-icon" href="http://www.baidu.com/favicon.ico">  
  7.     </head>  
  8.     <body>  
  9.         Hello, please look at the shortcur icon.  
  10.     </body>  
  11. </html>  


把href换成自己网站的favicon即可。

参考：http://zh.wikipedia.org/wiki/Favicon

这里的favicon必须是16*16或者32*32的，必须是8位色或者24位色的，格式必须是png或者ico或者gif。

16*16/32*32 且 8位或24位色 且 png/ico/gif。

另一种实现favicon的方法是把名为favicon.ico的图片放在WEB根目录下。这种方法不推荐，因为这种方法违反了互联网规范，这个图片的访问是没有被授权的。

参考：http://www.w3.org/2005/10/howto-favicon

----------------------

做图标方法：

 

我们在浏览很多网站的时候会发现，在网页选项卡处，在网页标题的前面，会有一个很小的网站logo，例如百度、新浪等等，这在网页中实现其实很简单。首先，我们需要将我们网站的logo转换成.ico图标格式，很多网站都能提供在线处理的功能，例如http://www.bitbug.net/。当图标处理成功后，我们只需要在相应网页的<head></head>之间插入如下代码即可实现：

 

<link rel="shortcut icon" href="ico图标的路径"  type="image/x-icon"  />
<link rel="bookmark" href="ico图标的路径"  type="image/x-icon"/>

 

posted @ 2015-07-21 18:13  江湖丶丿新进程  阅读(160)  评论(0)    收藏  举报