如何为你的网站/部落格加上 Favicon ?(Part 2)

Written on October 19, 2007 by KennyP

在昨天的《如何为你的网站/部落格加上 Favicon ?(Part 1) 》,我已经向大家介绍了 Favicon ,列出了 Favicon 能够为网站或部落格带来的好处。

KennyP.cn's Favicon

KennyP.cn's Favicon

今天的 Part 2 ,我就开始教大家动手制作 Favicon ,为你的网站或部落格加上 Favicon 。

我们为网站或部落格加上 Favicon 的流程如下:

  1. 找来或制作一个正方形图片
  2. 将以上图片转换为适用于 Favicon 的 ico 文件
  3. 将 ico 文件上传到服务器和修改网站代码

完成以上步骤,你的访客就会开始在你的网站看到 Favicon 了。

首先你需要一个用来做成 Favicon 的正方形图片,你可以到网上搜索适合的图片、修改现有的图片或者制作一个全新的图片。图片所使用的颜色和结构都要尽量保持简单,因为它将会被缩成很小很小的 ico 文件,所以要考虑图片变小后的效果。

有了正方形图片,我们要使用网上工具 FavIcon from Pics ,将图片转换成用作 Favicon 的 ico 文件,步骤如下。

来到网站 FavIcon from Pics 。

FavIcon from Pics

按“ Browse ”选择你的图片。

FavIcon from Pics

选择打开你准备好的正方形图片。

FavIcon from Pics

按“ Generate FavIcon.ico ”开始将你的图片转换为 ico 文件。

FavIcon from Pics

你的 ico 文件出来了,点击“ Download FavIcon ” 下载你的文件。你下载回来的文件是个 ZIP 压缩档,解压后你可以在里面找到你需要的文件“ favicon.ico ”。

将你得到“ favicon.ico ”上传到你的网站或网上任何地方,你需要这个“ favicon.ico ”的网址,把这个网址记下。

最后是修改网站或部落格的 HTML 或模板的代码,于 <head> 和 </head> 之间加入下面的代码。

<link rel=”shortcut icon” href=” ico 文件的网址” type=”image/x-icon” />

记得把“ ico 文件的网址 ”换成你刚才记下的“ favicon.ico ”网址。

加入代码并储存后,所有步骤就完成了,现在你可以在你的网站看到 Favicon 了。

最后的部分我可能解释得不够清楚,如果你有问题的话请留言告诉我。

Popularity: 21% [?]

KennyP

Tags

,

Related Posts

  • 如何为你的网站/部落格加上 Favicon ?(Part 1)
  • 本周精彩文章(07年-42周)
  • Google Adsense 和部落格赚钱 案例研究 momolimlo (Part 2)
  • Google Adsense 和部落格赚钱 案例研究 momolimlo (Part 1)
  • BT 下载之 BT 电影下载和提高 BT 下载速度(下篇)
  • 8 Responses to “如何为你的网站/部落格加上 Favicon ?(Part 2)”

    1. dreamnic said:

      请问要怎样把ico的file upload 到blogger,blogger 不能接受ico file…

    2. KennyP said:

      dreamnic:
      没错,你不能上传到 Blogger ,所以你要上传到像 Photo Leech 和 Imageshack 这些地方,只要得到 ico 文件的网址就行了。

      欢迎来到 KennyP.cn ,谢谢你的留言。 :)

    3. aLExpikachU said:

      Save 去 Favorite 后那 icon 還會動的! :D :D:D:D
      好好玩

    4. Kitkat said:

      Very good. Put sexy girls in favicon :)

    5. KennyP said:

      aLExpikachU:
      如果自己做 gif 还能更多花样。 :D

      Kitkat:
      Good idea but too small to see anything. :(

    6. 365Hope said:

      我想请教一个问题:在Wordpress文件里如何添加这段代码 ? 直接放在index.php文件里似乎不可以阿??

    7. KennyP said:

      365Hope:
      在 WordPress 你应该添加到 Header 或者 header.php ,记得放在 <head> 和 </head> 之间。

      欢迎你来到 KennyP.cn 。 :D

    8. wendybb said:

      = = 不能的 ??

    Leave a Reply

    XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>