在HTML的HEADER内插入以下内容,即可得到站点图标。
不难发现上面内容和常见的插入站点图标的方法最大的区别在于href属性。常规方法href值即为favicon的URL,而此处为图片的base64编码值。刨根问底的话,这是RFC2397标准,见http://www.ietf.org/rfc/rfc2397.txt。
其基本结构如下,详情参见RFC2397
dataurl := "data:" [ mediatype ] [ ";base64" ] "," data具体使用方法呢?怎么获得base64值?
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value
通过下面两个在线的工具即可将二进制文件转化为base64值
http://www.greywyvern.com/code/php/binary2base64
http://www.kawa.net/works/js/data-scheme/base64-e.html
http://www.kawa.net/works/js/data-scheme/base64-e.html
不过上面这两个工具都不支持本地文件上传。这里再提供一个方法——将图片作为附件放到邮件客户端里,另存为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 评论:
发表评论