2009年4月6日 星期一

修改blogger的站点图标

Google的Blogger支持很多高级功能,惟独不支持favicon站点图标。favicon通常在浏览器的地址栏、标签栏和收藏夹中显示,是一个网站区别于其他网站的重要标志。废话说了一堆,说说实际怎么用。

在HTML的HEADER内插入以下内容,即可得到站点图标。


不难发现上面内容和常见的插入站点图标的方法最大的区别在于href属性。常规方法href值即为favicon的URL,而此处为图片的base64编码值。刨根问底的话,这是RFC2397标准,见http://www.ietf.org/rfc/rfc2397.txt

其基本结构如下,详情参见RFC2397
dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value
具体使用方法呢?怎么获得base64值?

通过下面两个在线的工具即可将二进制文件转化为base64值

不过上面这两个工具都不支持本地文件上传。这里再提供一个方法——将图片作为附件放到邮件客户端里,另存为eml文件。然后用记事本等文本编辑器打开即可看到base64的编码,将其复制到正确的地方即可。


此方法不仅适用于favicon,普通图片、CSS背景、甚至连javascript脚本都能使用。

<img src="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACg..." />

div.image { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKgAAAB3...);}

<script type="text/javascript" href="data:text/javascript;base64,KGZ1bmN0aW9uKCl7CnZhciBmPW5hdmlnYXRvci...">

<link rel="stylesheet" type="text/css" href="data:text/css;base64,LyogICAgSFRUUCBIb3N0OiAgc3RhdGlj..." />
不过需要注意的是,IE6不支持RFC2397 - The "data" URL scheme

0 评论:

发表评论