zoukankan      html  css  js  c++  java
  • 打造浏览器 网站LOGO(ICO图标):

                    怎样让浏览器地址栏显示自己网站LOGO(ICO图标)~

     

        大家都有发现,在打开一些大型网站时,在地址栏上都会显示其公司的logo,那么怎样让自己的网站也显示公司LOGO呢,也就是ICO图标.

    什么是网站 ICO 图标?

      打开微软、百度等网站后看到浏览器的标题栏、地址栏,很多浏览器的标签上都显示了一个小图标,如怎样让浏览器地址栏显示自己网站LOGO(ICO图标) ,这里说的就是这个东东。如果用户收藏了网站,这个图标还会出现在用户收藏夹里。

      如何制作 ICO 图标?

      这里使用最简单的办法。因为 ico 格式图片比较特殊,一般软件(如 Windows 自带的画图、Adobe Photoshop 等)都制作不了,我们就分两步做。

      第一步是用 Windows 自带的画图或 Adobe Photoshop 制作一个 ico 的原图,格式可以是 jpg / jpeg / gif / png 等,大小大概在 32×32 像素差不多,最好是 16px×16px 的,因为浏览器标题栏和地址栏上显示的就是这个尺寸。

      第二步是将制作好的 favicon原图转换为 ico 格式,制作好后去一个可以在线转换 ico 格式的网站(百度一下会有不少,也可以下载一个转换软件进行处理)。这里推荐http://free.logomaker.cn/tools/icoMaker.aspx,打开该网站后界面很清晰明了,经数秒简单的处理即可转换为我们要的 ico 格式图标文件,文件被自动命名为 favicon.ico。

      这样 ico 图标就制作完成了。

      如何让 ICO 图标在网站上显示?

      先将转换好的 ico 图标文件上传到网站服务器,一般为根目录。以我的网站www.cxflp.com为例,我上传到www目录下,也就是说 ico 文件的路径是 http://www.cxflp.com/favicon.ico

      然后在需要显示该图标的页面模板头部(<head> 与 </head> 之间)插入以下代码:

    <link rel="Shortcut Icon" href="favicon.ico">

      如果你的模板是 XHTML 规格的,代码应该是:

    <link rel="Shortcut Icon" href="favicon.ico" />

         不过,以上步骤完成后,地址栏也不一定会马上显示ICO图标,不用担心,只要你正确操作了,你过一段时间在打开你网站就会看到公司LOGO了。

     

           通过link rel="icon"可以实现部分浏览器的动画图标效果

    语句一:<link rel="shortcut icon" type="image/ico" href= "favicon.ico" />


     

    语句二<link rel="icon" href="animated_favicon.gif" type="image/gif" />


     

    Favicon功能最早由微软创设,而微软公司的Internet Explorer网页浏览器会对每一个网站都请求favicon。微软支持的link标签不遵从World Wide Web Consortium(W3C,万维网联盟)的HTML建议[1],因为:
    rel属性必须包含一个用空格作分隔符的link类型的列表,所以一个包含两词的link类型不能被遵守标准的浏览器理解。
    “.ico”文件类型(一种用于Microsoft Windows上图标的光栅格式)没有一个注册的MIME类型,而且似乎在当时也不能被多数浏览器理解。然而2003年,这一格式在IANA获得注册,其MIME类型是image/vnd.microsoft.icon,进而消除了此问题的第一部分。
    在网站上使用保留地址(reserved location)与Architecture of the World Wide Web(互联网的结构)矛盾,同时被认为是link squatting(链接劫持)或URI squatting(URI劫持)。
    Mozilla浏览器通过一种遵从Web标准的方法添加了对favicon的支持。它采用rel="icon"并允许网络设计人员添加任何支持的图像格式的favicon。例如<link rel="icon" type="image/png" href="/path/image.png">。后来鉴于此功能将被用于所有新内容,多数浏览器都对此功能增加了支持。


     

    利用图标工具(有很多)制作图标文件(favicon.ico)上传到网站所在的服务器的根目录下,这个文件必须是16*16大小的图标文件。当然,也可以在<head></head>之间加上
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    就可以了。但是,ico给出的是静态的图标文件。


     

    如果想要动起来,就得做个gif动画了。gif动画也是16*16的,传到服务器。在<head></head>之间加上:
    <link rel="icon" href="animated_favicon.gif" type="image/gif" >
    就可以了。


     

    如果想要收藏夹中的图标也要改变的话,那么就加上这句:
    <link rel="Bookmark" href="favicon.ico" />
    这个图标还可以使用png格式,png格式现在的势头很猛。


     

     

                                使用PHP纠正favicon.ico的浏览器不兼容

     
     
    使用PHP正确的图标。图标浏览器不兼容的
     
    假设您有一个gif类型图标。它工作得很好,但不与IE和火狐兼容。当然,你是不允许有两个图标。为您的网站图标。唯一的解决办法是使用PHP提供服务器端脚本命令来显示:
     
    a .一个GIF类型图标。除了IE图标对于其他浏览器。
    b显示一个普通的图标。对于只支持IE图标。
     
    下面是PHP脚本,它将被放在头部分的动态网站模板:
     
    <?php
    $agent=$_SERVER['HTTP_USER_AGENT'];
    if (preg_match("/\bMSIE\b/i",$agent))
    {
    //支持IE
    echo '<link rel="shortcut icon" href="http://domain.com/path to your favicon.ico to be used for IE only" />';
    }
    else
    //其他浏览器不是IE
    {
    echo '<link rel="shortcut icon" href="http://domain.com/path to gif style favicon.ico for other browsers" />';
    }
    ?>
     
    要实现这两个图标。图标在你的服务器,一个用于IE和一个用于其他浏览器。编辑path上面反映该图标。图标的位置。

     

    相关链接:

    http://www.jb51.net/css/37629.html ;http://simon-c.iteye.com/blog/811528

    http://msdn.microsoft.com/zh-cn/library/ie/ms537656(v=vs.85).aspx

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

     

    http://www.xiconeditor.com/

    http://www.chami.com/html-kit/services/favicon/

    http://tools.dynamicdrive.com/favicon/

     

     

  • 相关阅读:
    Kudu-Impala集成特性
    [转]IIS的各种身份验证详细测试
    [转]The NTLM Authentication Protocol and Security Support Provider
    [转]WxEmojiView
    [转]Redis 数据类型
    [转]a-mongodb-tutorial-using-c-and-asp-net-mvc
    [转]MongoDB 概念解析
    [转]flash.net.Socket
    [转]emailjs-smtp-client
    [转]jquerUI Dialog中隐藏标题栏的关闭"X"按钮
  • 原文地址:https://www.cnblogs.com/enjoy233/p/3011161.html
Copyright © 2011-2022 走看看