炼金中...

幸运兔脚

给网页标题添加icon小图标
前言自使用workpress框架搭建博客以来,已经过了差不多3个月了。最近终于无法忍受wp那个臃肿的系统所带来的卡...
扫描右侧二维码阅读全文
30
2018/09

给网页标题添加icon小图标

前言

自使用workpress框架搭建博客以来,已经过了差不多3个月了。
最近终于无法忍受wp那个臃肿的系统所带来的卡卡的使用体验,于是索性换成了相对比较轻量级的typecho。
但是在搭建过程中,发现网页标题在浏览器中没有图标,后台也没有设置…
img1
这就很尴尬了,于是决定查一下如何从代码里添加图标。

正文

方法一共有两种

第一种

在html文件的head部分添加下面这一行代码。

<link rel="shortcut icon" href="http://xxx.xxx/usr/themes/default/img/favicon.ico" type="image/x-icon" />

rel参数:根据我的理解,这应该是一个标志,固定使用“shortcut icon”字符串,它将被多数遵守标准的浏览器识别为列出可能的关键词(“shortcut”将被忽略,而仅适用“icon”);而Internet Explorer将会把它作为一个单独的名称(“shortcut icon”)。这样做的结果是所有浏览器都可以理解此代码。
href参数:这个是图片所在的路径。
type参数:这个是图片的类型,在今时今日所有浏览器已经能正确识别,所以实际使用中可以省略。

一般来说图标格式最好是.ico格式的,不过试了一下其实png,jpg,bmp的格式都可以。

第二种

制作一个ico格式的图标,命名为favicon.ico。把这个图标放到网站的根目录下就可以了,页面加载时浏览器会自动检索这个图标然后把它加到标题上。

最终效果

img2

参考文章:
使用link rel="shortcut icon"为网页标题加图标
apple-touch-icon,shortcut icon和icon的区别

Last modification:December 22nd, 2018 at 03:51 pm
If you think my article is useful to you, please feel free to appreciate

2 comments

  1. Noob

    老哥,我想问一下,你的博客的动态title是怎么实现的?是修改js还是php?

    1. 幸运兔脚
      @Noob

      首先我要先说一下,PHP是工作在服务器端的脚本,前端的动态样式很难通过后端来处理。而js是前端脚本,这种样式通常都是通过js来实现的。在这篇文章中可以找到你需要的资料--【Web】动态切换网站Title文字

Leave a Comment