favicon.ico介绍,网页图标的制作&动态网页图标

    xiaoxiao2021-03-25  57

    1、直接上成功的代码,关键代码:

     

    <!DOCTYPE html> <html> <head> <title>网页图标</title> <link href="favicon.ico" rel="icon" type="image/x-icon"/> <link href="animated_favicon.gif" rel="icon" type="image/gif" > </head> <body> Hello Boy! </body> </html>

     

     

     

    2、文件目录参考:

     

    3、效果如下:

    谷歌浏览器:

     

    火狐浏览器:

     

     

     

    注:火狐浏览器这个是个gif动图,由于动态图标目前仅火狐可用,所以为了区分两者我这里设置的网页图标分别用了两者不同的图。实际当中要显示一致的话可以直接去掉

    <link href="favicon.ico" rel="icon" type="image/x-icon"/>

    这句。谷歌浏览器默认将gif显示为静态图。

     

    4、关于代码:

    网上找了一堆关于设置favicon.ico的结果好几个是无效的,参考如下:

            <link rel="shortcut icon" href="/favicon.ico" /> <link rel="bookmark" href="/favicon.ico" type="image/x-icon" />  <link href="favicon.ico" mce_href="favicon.ico" rel="bookmark" type="image/x-icon" />  <link href="favicon.ico" mce_href="favicon.ico" rel="icon" type="image/x-icon" />  <link href="favicon.ico" mce_href="favicon.ico" rel="shortcut icon" type="image/x-icon" />   <link rel="shortcut icon" href="/favicon.ico"/> <link rel="bookmark" href="/favicon.ico"/> --> <link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />         <link rel="shortcut icon" href="Images/wangyi.ico" type="image/x-icon" />

    最终测试OK的是这三句:

    <link href="favicon.ico" mce_href="favicon.ico" rel="bookmark" type="image/x-icon" />  <link href="favicon.ico" mce_href="favicon.ico" rel="icon" type="image/x-icon" />  <link href="favicon.ico" mce_href="favicon.ico" rel="shortcut icon" type="image/x-icon" />  

    其中关键部分是:

           <link href="favicon.ico" rel="icon" type="image/x-icon"/>

    解释一下:

    href: 这是你网页图标的位置,建议放在服务器根目录下,图标必须是ico文件,我试过直接修改png格式是无效的,文件转换可以网上搜一下工具(比如我用的是这个:http://www.atool.org/ico.php),gif的话就不必转格式了!

     

    rel: 用于解释 href 链接的对象和该网页有毛线关系用的,毕竟全称就是 relationship ,这个很重要!

     

    剩下的 mce_href 、 type 这些就不解释了,百度去吧。 mce_href 有的说是为了搜索引擎(SEO)用的

     

    转载请注明原文地址: https://ju.6miu.com/read-35523.html

    最新回复(0)