如何给网站设置favicon.ico图标

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/guzhao593/article/details/93972193
            </div>
                                                <!--一个博主专栏付费入口-->
                      <!--一个博主专栏付费入口结束-->
        <link href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-4a3473df85.css" rel="stylesheet">
                                    <div class="markdown_views prism-atom-one-dark" id="content_views">
                <!-- flowchart 箭头图标 勿删 -->
                <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                    <path id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke-linecap="round" d="M 5 0 L 0 2.5 L 5 5 Z" />
                </svg>
                                        <h4><a id="faviconico_1"></a>favicon.ico是什么?</h4>

所谓favicon,即Favorites Icon的缩写,顾名思义,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站。

favicon.ico是一个网站必要的吗?

不是必要的,但是web服务器在网站加载时都会请求favicon.ico这个文件,如果不存在就会报404错误,并且会记录到错误日志中,所以最好的设置。

favicon.ico怎么设置?

第一种方式:放在根目录

这种方法最简单,在服务器根目录下放一个 favicon.ico 的文件,浏览器发现后就会使用。

注:这种方式,ico文件的名称一定要叫:favicon

第二种方法:link标签

在head里面加入代码:

<link rel="shortcut icon" href="ico文件url"><link rel="icon" href="../favicon.ico"><link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
  • 1
  • 2
  • 3
  • 4
  • 5

注:这种方式,ico文件的名称就可任意命名了。

第一种方法设置的是全站的,第二种方法可以针对某个网页单独设置ico

favicon的格式一定是ico格式吗?

favicon的格式不一定是ico格式,它可以是pngjpg甚至是gif,不过ico格式是所有浏览器都支持的。

favicon.ico的尺寸有16×16、32×32、48×48,在添加到桌面、任务栏小尺寸的图标就不是很理想了,这就需要多种尺寸兼容各种设备和情况。

favicon.icon文件怎么制作?

简单的方式就是在线制作,推荐网址:ico图标在线制作: http://www.faviconico.org/

原文地址:https://www.cnblogs.com/mmit/p/11996384.html