2009年11月22日星期日

精品博客

精品博客

利用 Favicon Generator 制作网页徽标

Posted: 21 Nov 2009 06:18 PM PST

favicon

在《如何建立网页徽标》一文中，Daniel 提到了一个可以生成网页徽标(Favicon)的工具 —— FavIcon from Pics，这个工具除了把一张普通图片转换成 ico 文件之外，同时还生成一张 GIF 动画——这也就是为什么有些网站的徽标会动的原因。

不过，FavIcon from Pics 有个不好的地方，那就是它所生成的 ico 文件尺寸有点大，这个或多或少会影响到网页的加载速度。例如，FreeNuts 的徽标就是通过它生成的，大小为 5.3 KB。为什么说 5.3KB 有点大呢？因为有个工具可以把 ico 文件的大小控制在 1.4KB，这个工具就是 —— Favicon Generator

Favicon Generator 是 Dagon Design 网站提供的免费服务，说到 Dagon Design 网站，你或许会想到它的一个著名的 WordPress 插件——网站地图。

Favicon Generator 支持的图片格式为 JPG、GIF 以及 PNG，图片大小不超过 100 KB，上传的图片会很快被转换成 ico 文件。把生成的 ico 文件上传到 WordPress 安装的根目录，即可以通过以下 URL 找到你的网页徽标：

http://你的网站域名/favicon.ico

然后，在你的 WordPress 主题的 header.php 文件的"</head>"之前插入以下代码：

<link rel="icon" href="http://www.essentialblog.cn/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="http://www.essentialblog.cn/favicon.ico" type="image/x-icon">

记得把 "www.essentialblog.cn" 换成你的网站域名。这是精博目前所用的代码，而之前所用的代码则是这个样子的：

<link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

目前所用的代码比之前所用的代码多了个网站域名（www.essentialblog.cn）。像 "http://www.essentialblog.cn/favicon.ico" 这种明确的 URL 叫做绝对地址，而像 "/favicon.ico" 这样的就叫做相对地址。通常来讲，用哪一种地址都不会影响网页徽标的显示，但是有时候我发现使用相对地址的时候会显示不了网页徽标，于是就改用了绝对地址。

-------------------------------------


© 逛逛精品博客，看看博客精品。| 转载请遵循"署名-非商业性使用"的创作共用协议。


相关博文:

  1. 如何建立网页徽标
  2. 非说不可
  3. WordPress主题和插件更新
发帖者 时间：

没有评论:

发表评论

订阅： 博文评论 (Atom)