Favicon

以前的 favicon 在暗色 Tab 上锯齿问题十分严重,于是我重新做了一个。

这么看着可能有点刺眼,缩小以后还成。

顺便分享几个有关 Favicon 的使用和制作心得。

1. Favicon 最好放置于根目录,引用代码放置于<head>标签内。引用时应该使用绝对路径而非相对路径。

2. Favicon 若要兼容所有浏览器(其实是迁就 IE ),256 色是最佳选择。当然,也可以选择给 IE 单独定制一个。

3. 背景透明的 Favicon 最好用粗线条包一次边,这么做能够最大程度缓解锯齿问题,不过更好的方法是直接用 16 位色生成。

4. Favicon 不一定非要用 ico 格式,也不一定非要用 favicon 作为名字,只要在 .htaccess 里动一下手脚,所有浏览器都会被骗到。举个例子:

RewriteEngine On
RewriteRule ^favicon.ico$ /logo.png$1 [L]

上面的 rewrite 规则将 domain.com/logo.png 重写为 domain.com/favicon.ico。如此一来,放在根目录的建议貌似可以忽略了。

5. 在线 Favicon 制作工具简单快捷,出来的效果其实很差。推荐使用 Iconworkshop 一类的专业制作工具,强很多。

6. 以前说过,Google 缓存了大部分网站的 favicon 并且转化为 PNG 格式,我们可以很方便地调用它们拿来做有趣的应用。调用地址如下(记得替换域名):

www.google.com/s2/favicons?domain=ishawn.net

7. 两个脚本,需 Firefox+Greasemonkey。

脚本下载地址:Ultimate GReader favicons | Favicon with Google 3

前者给 Google Reader 订阅列表添加 Favicon,后者则能插入 Favicons 到每一条 Google 的搜索结果中。

Tag(s):
  • QQ书签
  • Del.icio.us
  • 百度收藏
  • Google
  • 饭否
  • FriendFeed
Shawn Published@17:29 / 2008-11-07 / Trackback / Skip
48 Comments Contributed by Visitors
  1. rebuttonJor / 17:37@2008-11-07 1
    Jor

    沙发。留爪。继续人肉恢复数据。 :mad:

  2. rebuttoniColor / 18:00@2008-11-07 2
    iColor

    你友情链接里的ico显示就是用的第6条吧

  3. rebutton蹲在街角狂笑 / 18:02@2008-11-07 3
    蹲在街角狂笑

    恩...学习来了~~ :smile:

  4. rebuttonShawn / 18:02@2008-11-07 4
    Shawn

    @iColor: 是的,呵呵

  5. rebuttonNickyYe / 18:07@2008-11-07 5
    NickyYe

    我就随便拿了个图片转了ico,满意

  6. rebuttonShawn / 18:08@2008-11-07 6
    Shawn

    @NickyYe: 所以锯齿很明显。。。

  7. rebuttonNickyYe / 18:11@2008-11-07 7
    NickyYe

    @Shawn: 啊?我就一正方形,你都能看出明显的锯齿,厉害

  8. rebuttonxiaorsz / 18:12@2008-11-07 8
    xiaorsz

    我直接放根目录,它自己调用,没加代码!!:smile: 不过现在那个已经跟我皮肤有点不搭了!

  9. rebuttonShawn / 18:16@2008-11-07 9
    Shawn

    @xiaorsz: 浏览器当然可以自己调用,浏览器只查找根目录的 favicon.ico,但是 Google 找不到。所以的 Blog 在 Google 那里没有 favicon 缓存。

  10. rebuttonShawn / 18:17@2008-11-07 10
    Shawn

    @NickyYe: 就是 N 字的那个斜杠部分锯齿很严重。

  11. rebuttonfisio / 18:23@2008-11-07 11
    fisio

    我选择不迁就IE, 我用8位透明通道真彩色~

  12. rebuttonShawn / 18:24@2008-11-07 12
    Shawn

    @fisio: 我也是,我才懒得管IE呢,我现在最烦IE和百度。

  13. rebuttonShawn / 18:26@2008-11-07 13
    Shawn

    @NickyYe: 有个对比你就知道了。点击查看
    左边是优化过的,右边是你现在用的。

  14. rebuttoniColor / 18:26@2008-11-07 14
    iColor

    我的就不锯齿,哈哈哈哈

    还有,Shawn,你的友情链接页面是循环代码出来的还是一个一个加的?,虽然我感觉我这个问题很傻... :???:

  15. rebuttonShawn / 18:27@2008-11-07 15
    Shawn

    @iColor: 是代码,一个一个加累死人,我以前这么干过,后来发现有 Google 了我就不这么干了。

  16. rebuttonfisio / 18:35@2008-11-07 16
    fisio

    @Shawn: 这两个家伙的市占率差不多,哈哈

  17. rebuttonShawn / 18:38@2008-11-07 17
    Shawn

    @fisio: 这也说明一个问题,好东西往往都被少数人使用。 :grin:

  18. rebuttoniColor / 18:38@2008-11-07 18
    iColor

    你怎么把插件页的链接都取消了,多不方便..

  19. rebuttonleehow / 18:40@2008-11-07 19
    leehow

    已经聊开了,优化了是不一样,你们继续。

  20. rebuttonShawn / 18:41@2008-11-07 20
    Shawn

    @iColor: 好久没更新过插件页,那天无聊,从头来过,可惜由于太懒,实在是不想贴链接了。反正也没几个,搜索就出来了。

  21. rebuttonLOKE / 18:42@2008-11-07 21
    LOKE

    哇塞,好酷啊,不过貌似有点像百度那个 :sad:

  22. rebuttoniColor / 18:43@2008-11-07 22
    iColor

    @Shawn: 哦,,嗯,,我想起你那个页面备份数据库的插件,,试用一下 :grin:

  23. rebuttoniColor / 18:45@2008-11-07 23
    iColor

    突然发现,为什么你和Leehow的favicon那么相似,? :grin:

  24. rebuttonShawn / 18:47@2008-11-07 24
    Shawn

    @LOKE: 看来爪子的概念被百度给抢了。不过我的显然比百度那个好看。

  25. rebuttonsein / 19:34@2008-11-07 25
    sein

    为什么我看到的时候,都24楼了已经。。。

    这坨图标不错,要是没放大图对比我还以为是一朵小花 :cool:

  26. rebuttonShawn / 19:39@2008-11-07 26
    Shawn

    @sein: 看吧,这就叫深度。

  27. rebuttontunpishuang / 20:20@2008-11-07 27
    tunpishuang

    都黑喜欢猫猫?

  28. rebuttonShawn / 21:08@2008-11-07 28
    Shawn

    @tunpishuang: 我不喜欢黑猫。。。

  29. rebutton穷人 / 21:10@2008-11-07 29
    穷人

    原来那个东西的名字叫“favicon”又长见识了,呵呵。

  30. rebuttontunpishuang / 21:23@2008-11-07 30
    tunpishuang

    @Shawn: 你误会了,黑是很的意思, :grin:

  31. rebuttonShawn / 21:40@2008-11-07 31
    Shawn

    @tunpishuang: 我忘了你是重庆人了。。。一般,你可以理解那个爪子为熊的爪子。。。。

  32. rebuttonShawn / 21:41@2008-11-07 32
    Shawn

    @穷人: 你应该给自己的 Blog 做一个 Favicon,然后再给自己的邮件地址注册一个 Gravatar

  33. rebuttontunpishuang / 21:44@2008-11-07 33
    tunpishuang

    @Shawn: 你还记得到所,谢了哦。

  34. rebuttonstephen / 21:46@2008-11-07 34
    stephen

    其实我的博客还有Favicon呢。。。改天要搞一个才行了。。。

  35. rebutton大学生乱弹琴 / 22:06@2008-11-07 35
    大学生乱弹琴

    有种胖胖的感觉,很喜欢,也准备换一个,现在是盗版的,呵呵~

  36. rebuttonJoBru / 22:10@2008-11-07 36
    JoBru

    这个图标还不错,不过怎么和leehow的那个这么像 :grin:

  37. rebuttonShawn / 22:12@2008-11-07 37
    Shawn

    @JoBru: 都是我做的嘛。。。

  38. rebuttonJoBru / 22:12@2008-11-07 38
    JoBru

    这里细节的东西很多啊,比如你的网站名,移上去就一颗星星 :idea:

  39. rebutton火星基地 / 22:15@2008-11-07 39
    火星基地

    很注意细节的shawn, :eek: 细节决定品质阿~

  40. rebuttonthw / 22:17@2008-11-07 40
    thw

    我的蛇头明显吗?
    http://flaker.pl 的很明显。

  41. rebuttonShawn / 22:36@2008-11-07 41
    Shawn

    @JoBru: 这里有很多星星,哈哈

  42. rebuttonShawn / 22:43@2008-11-07 42
    Shawn

    @火星基地: 细节好像都是星星构成的。。。

  43. rebuttonShawn / 22:45@2008-11-07 43
    Shawn

    @thw: 这个站是干什么的?

  44. rebuttonthw / 22:49@2008-11-07 44
    thw

    @Shawn: tumblelog∩lifestream

  45. rebuttonthw / 22:50@2008-11-07 45
    thw

    @Shawn:错了,是 tumblelog∪lifestream

  46. rebuttonShawn / 22:50@2008-11-07 46
    Shawn

    @thw: 对这些东西我比较迟钝,你看我今天才玩儿上 Twitter

  47. rebuttonleehow / 23:19@2008-11-07 47
    leehow

    你那个看起真的像小花。

  48. rebuttonShawn / 23:20@2008-11-07 48
    Shawn

    @leehow: 缩小了就好看了吧。

  49. rebuttonfqch / 23:21@2008-11-07 49
    fqch

    很漂亮的呀~~像个小脚丫 :wink:

  50. rebuttonleehow / 23:32@2008-11-07 50
    leehow

    @Shawn: 小熊脚,中间的字母完全看不清,也不知道寓意,睡了。

  51. rebuttonMark / 10:36@2008-11-08 51
    Mark

    喜欢那个greader显示icon的插件。。一直都想要,懒得去搜。。。。
    另外能介绍一下侧边那个友情链接把favicon和文字同时显示的实现方法么?一直想搞,我在后台设置好图片和链接名称之后在侧边添加blogroll结果只显示icon图片。

  52. rebutton老时 / 10:37@2008-11-08 52
    老时

    看了你在穷人那的留言。
    我那博客就因为有用户从搜索过来关键词,一个月内被网(络太)监点名了两次。。。。。。其实我那并不是不河蟹。。。唉。。这个喝血射灰啊。。

  53. rebuttonMark / 10:38@2008-11-08 53
    Mark

    还有啊,乍一看很想一堆小圆圈组成的蜂窝状东西……其实以前满好看的

  54. rebuttonZH CEXO / 12:24@2008-11-08 54
    ZH CEXO

    这个小的也很漂亮的,你的主题也动了一点手脚吧,header看上去有点怪……

  55. rebutton火星人 / 12:36@2008-11-08 55
    火星人

    感觉不要中间那个s 还好看些。 :cool:

  56. rebuttonleehow / 12:38@2008-11-08 56
    leehow

    @Mark: 切中要害!!!蜂窝...哈哈哈哈。

  57. rebuttonShawn / 13:08@2008-11-08 57
    Shawn

    @Mark: 有两个方法可以实现,一种是修改 wp_includes 里面的 widget.php 有关 blogroll 的代码,另一种是通过 JS 来添加。前一种其实方便一点,就是以后升级的时候需要重新修改,如果不太清楚改哪里就加我的 Gtalk 吧:)

  58. rebuttonShawn / 13:09@2008-11-08 58
    Shawn

    @ZH CEXO: header 怎么了?我加了 Twitter 在上面,还是说 header 的内容后显示?

  59. rebuttonShawn / 13:10@2008-11-08 59
    Shawn

    @火星人: 呵呵,我也发现了,缩小以后 S 变成了莫名其妙的东西。。。

  60. rebuttonaunsen / 13:34@2008-11-08 60
    aunsen

    我的Favicon是AV :shock:

  61. rebuttonShawn / 13:35@2008-11-08 61
    Shawn

    @aunsen: 我记得以前是 B 的。。。。

  62. rebuttonZH CEXO / 14:30@2008-11-08 62
    ZH CEXO

    @Shawn: 也没什么,感觉线条很乱,但这样才艺术嘛,只是有点不适应而已 :smile:

  63. rebuttonShawn / 14:33@2008-11-08 63
    Shawn

    @ZH CEXO: 嗯,twitter 暂时放那里,有心情再继续搞。。。。

  64. rebutton老所 / 14:39@2008-11-08 64
    老所

    这图标不就是N多年前ICQ的图标么?

  65. rebuttonShawn / 14:41@2008-11-08 65
    Shawn

    @老所: ICQ 是一朵小花好吧

  66. rebutton老所 / 14:45@2008-11-08 66
    老所

    熊爪和猫爪 :idea:

  67. rebuttoniColor / 18:26@2008-11-08 67
    iColor

    @老所: ICO是小花的.. :???:

  68. rebutton任平生 / 20:50@2008-11-08 68
    任平生

    放大了是百度的熊掌,缩小了是ICQ的小花,强! :lol:

  69. rebutton浮黑 / 18:26@2008-11-09 69
    浮黑

    不愧是高手!
    我不会用ps,只好把自己的照片缩小了当Favicon……

  70. rebuttonShawn / 18:29@2008-11-09 70
    Shawn

    @浮黑: 也是很好的做法,形象统一嘛,哈哈。

  71. rebutton辛格 / 2:13@2008-11-11 71
    辛格

    乍一看,一朵小菊花...囧了...

  72. rebutton辛格 / 2:19@2008-11-11 72
    辛格

    文末后一个JS很好玩,前一个倒是用了有一段时间了,看着很舒服。

    FF3.x就是因为支持了在书签里显示Favicon让我终于放弃了MT2

  73. rebutton火星基地 / 22:54@2008-11-15 73
    火星基地

    虽然不是,但确实很像icq的小花 :lol:

  74. rebuttonPaul / 11:31@2009-02-20 74
    Paul

    请问一下。如果使用了WP Super Cache插件,是不是favicon在IE7里显示不出来(有时候在有些页面又可以,很变态……)?是由于这个插件的问题吗?有办法解决吗?谢了!~ :?: :?:

  75. rebuttonkillfox / 19:59@2009-06-08 75
    killfox

    借用一下,谢谢!

Leave Comments Here...

必填

必填&保密

随您

支持Ctrl+Enter快捷提交

  • 已部署"白忙活" Anti-Spam 系统,猪肉 Spammer 请注意查看源代码链接处。
  • 本站不会泄露您的邮件地址,敬请放心。
  • 支持常用 HTML 代码调用,插入 PHP 代码需注意:< = &lt;> = &gt;
  • 仅当某人针对您的评论做出回应时,您才会收到由本站发出的通知信件。
  • 如您希望以相同方式通知某位网友,请点击 Reply 按钮,或自行输入 @对方名字:
  • 鼠标移至评论列表中的 @someone: 区域即可自动显示 someone 的评论内容。

Shawn Blog

Shawn的个人博客(Blog),分享Wordpress技巧和Firefox浏览器心得,关注Web 2.0应用发展,记录对虚拟主机的使用评价。