× 326字 × 8阅

为 Blogger 添加 Favicon

Favicon 是 favorites icon 的缩写,亦被称为 website icon(网页图标)、page icon(页面图标)或 url icon(URL图标)。Favicon 是与某个网站或网页相关联的图标。网站设计者可以多种方式创建这种图标,而目前也有很多网页浏览器支持此功能。摘自维基百科

早些年 Blogger 还未推出 favicon 服务的时候,需要跟 WordPress 一样手动添加代码在 <head></head> 里:

<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon" />

而现在,在 Layout 里上传 favicon.ico 文件就好,Blogger 会自动帮你配置好。不过,怎么创建 favicon.ico 文件呢?很简单,首先按照网站风格或者个人 logo 制作一个方形的图片,然后在 FavIcon Generator 上传图片制作 .ico 文件。

我之前的 favicon 是我个人 logo,发现做成 favicon 后太小看不清,于是干脆学谷歌的样子,取个首字母 C 做了一个简单的,个人还是比较满意的。在新创意出现之前就先这样吧。

首字母 C 做的 favicon
首字母 C 做的 favicon
由于 Blogger 没有提供二级菜单功能,所以只好自己用 CSS 创建一个,但是唯一的缺点就是当前菜单无法高亮。Blogger 默认的菜单是有此功能的,所以鱼和熊掌不能兼得的我在遍寻谷歌只找到 javascript 的方法而且屡试屡败后还是放弃了。如果你也不介意没法高亮这件事,且来听我说说如何用 CSS 创建下拉菜单吧。 HTML 部分 这个部分很简单,用 <ul> 和 <li> 标签建立一个无序列表即可,比如我的如下: <div class='navi' id='navi'> <ul class='nav' id='nav'> <li><a href='/'>首页</a></li> <li><a href='/p/aboutblog.html'>关于</a></li> <li><a href='/p/archive.html'>归档</a> <ul> <li><a href='/search/label/%E7%94%9F%E3%83%BB%E7%AE%80%E6%85%A2'>生&#12539;简慢</a></li> <li><a href='/search/label/%E8%B6%A3%E3%83%BB%E7%9B%8E%E7%84%B6'>趣&#12539;盎然</a></li> <li><a href='/search/label/%E9%80%94%E3%83%BB%E6%99%B4%E6%9C%97'>途&#12539;晴朗</a></li> <li><a href='/search/label/%E7%9F%A5%E3%83......
点击加载Disqus评论