如何在个人网站上添加logo图标

       如何在个人网站上或网页标题栏的title加入logo图标,也就是ico图标。我们打开一个网页时,常常可以在浏览器的标签栏处看到该网页的标题和logo图标,当网页被添加到收藏夹或书签栏中也会显示该网站图标,可以说,每一个logo图标都代表了这个网站或网页要表达的某种价值观和意思,同时也为这个网站增加了魅力,来吸引更多的人浏览、观看、下载等。那么如何在网站上添加logo图标(即ico图标)呢?

  1. 首先制作一个ico格式的图标,最好是16×16px的,具体的制作方法这里就不详细介绍了,网上都可以查的到,甚至可以直接在网上搜一个ico格式的图标出来;

  2. 制作完ico图标后,自己命名该图标,比如说命名为:favicon.ico,将该图标放在个人网站的根目录下,在网页的head标记中添加如下代码: <link rel="shortcut icon" href="ico地址" type="image/x-icon" /> ;

    注意:(1). 比如说自己写一个网页时,直接将ico图标放在与该网页同级目录下,ico地址可以直接写成:favicon.ico;

                     (2). 如果直接在网上找一个ico图标,ico地址即为该图标的链接地址,总之要注意ico图标的地址要准确,这样浏览器才能识别显示出来;

  3. 我们在使用hexo+GitHub搭建个人博客时,想要在浏览器上显示自己博客网站上的图标,比如说我安装的hexo主题是Next,同样的,在主题Next文件夹中的source文件中放入ico图标,在主题Next件夹中找到_config.yml文件,用记事本打开,在前几行中找到以favicon开头的这一行,改成:favicon: /favicon.ico,这样就可以了。更新一下自己的个人博客网站后,在浏览器中打开网站,如果网站图标没显示出来,可能是因为浏览器的缓存问题等,所以图标才没显示出来。关闭浏览器,再重新打开自己的博客网站,图标就会显示出来了。

原文地址:https://www.cnblogs.com/mix88/p/7663320.html