大猫 (Madao) - まるでダメなおっさん

如何制作 APNG 动画 PNG 的 Favicon

by bigCat 78 Comments

玩 Linux 的同学看历史肯定会看到 GNU
何谓GNU? (发音 “嗝妞”)

GNU’s Not Unix

搞 CSS 的页面仔做图片优化时 PNG 是首选
何谓PNG?(发音同 “ping”)

PNG’s Not GIF

媳妇插嘴: GF 不胖
Pang’s not GF

心血来潮弄个动画版的 favicon 啊哈哈
会上下动的片叫A片
辣么会动的PNG当然叫APNG了

例如 (firefox下会动)

再丢个

<link rel="icon" type="image/png" href="http://ooxx.me/favicon.png" />

大警告成了
至于你 favicon.ico 在根目录的,根本不用页面里声明,主流浏览器会自动去读取
也就是说如果你没有丢,会返回一个404,还是随便丢一个吧,体积越小越好,过期时间越长越好

如何制作 APNG 捏?
做每帧的PNG然后用 firefox的插件 APNG Edit 生成即可

最后感谢偶像 Zing 大湿画的小 ico

Comments ( 78 )

  1. Reply久酷
    ;) ;) 我来啦
  2. Replylostindream
    赞,这个favicon与你的博客很配! 我可就不行了,一直没有个像样的满意的favicon
  3. ReplyA.shun
    我火星了,第一次看到png会动的。。 8O 不过作为avicon.ico还不是一样
    • ReplybigCat
      @A.shun, 呃,其实很早前就有这个了, 当时随便看了下PS和fireworks都不能做,就懒得去弄了,今天平安夜突然那个啥...就搞上了
  4. Tweets that mention 如何制作 APNG 动画 PNG 的 Favicon - OOXX.ME PLZ - 大猫の意淫网志 -- Topsy.com
    [...] This post was mentioned on Twitter by BigCat, 茕觞橙. 茕觞橙 said: RT @caitou: 换了个APNG的favicon http://ooxx.me/apng.orz ||何谓GNU? (发音 "嗝妞")。哈哈!"嗝妞儿"好玩! [...]
  5. Replychisdy
    圣诞快乐!哈哈,完全看不懂 8O
  6. Reply新邮件(1)
    有点意思,改天也弄个~ 你这个大猫有点WS,吼吼吼
  7. Replyfatkun
    会动滴 :evil: 可惜在Chrome看不到...
  8. Reply沈蚊
    偶诞节快乐~~ :)
  9. ReplyMaxsailor
    呵呵~ 眼睛眨的好萌啊 :lol:
  10. Reply一米
    哎,IE怎么总是杯具啊。
  11. Replyunderone
    用了Chrome我都好久没开FF了。。。
  12. ReplyJOY
    有意思,找个时间也去耍耍 圣诞快乐
  13. Replysoup
    Merry X'mas :)
  14. Replyyorklaser
    这是我见过最牛逼的Favicon!
  15. ReplyKiss6
    报告长官:IE6 下也没看到动。
    • ReplybigCat
      @Kiss6, - - 我不是说只有ff支持apng么。。。
  16. Reply小飞嘀敲敲门
    :P 新Banner加的那个黑框框很帅(╯3╰)
  17. ReplyXJP
    其实我路过的
  18. Reply葉子
    酷 :!:
  19. Reply左岸读书
    大猫的每个细节都在完善吗? :!:
  20. Reply断峰狼
    这个有点意思~也是第一次看到~
  21. Reply托尔·银月
    大猫不是海外生活么?怎么备案了?
  22. Reply星网
    大家都用邮件发消息上瘾了! :(
  23. Reply匿名
    为啥这次连chrome都被藐视捏 :P
    • ReplybigCat
      @, 哈,小众的玩物~ 不过前景不错
  24. Replychouray
    大猫明年明天快乐 :lol:
  25. Replyhomer
    毛兄,新年快乐~
  26. Reply小姚
    呵呵,你博客头部那个太有意思了~
  27. Reply狗登
    最终还是得备案了吧,唉,不容易的呐,猫兄~~~
  28. ReplyShowfom
    一直在动 aa.cx Firefox 也能动哦
  29. Replyqlj
    会上下动的片叫A片 辣么会动的PNG当然叫APNG了 博主真是意淫达人啊
  30. Replyzing
    哈哈我的弄动了!不过那个APNG Edit为什么不自己弄个软件啊。。。
    • ReplybigCat
      @zing, = = 也是哦...目前还没有软件和他竞争
  31. Reply猫哥
    第一次来,你域名很OOXX。
  32. Reply疯子
    好像已经N久没有更新了
  33. Replycg
    ico是我这些天的痛啊,怎么做都做不明白,灰溜溜爬。
  34. Replypergian
    猫啊,你早说firefox apng 我早有了。
  35. Replypergian
    CC 猫猫的又是错别字! 「早有了」=>「早走了」
  36. Replyxnotepad
    apng目前好像不是官方标准,也只有firefox和Opera支持。并不是很实用。
    • ReplybigCat
      @xnotepad, - - 自己用的爽就行了,啊哈哈 不过目前gif那么大,真需要一个替代品出来
  37. GIF和几种PNG(8/24/32)以及Alpha/索引色透明对比 - 大猫の意淫筆記
    [...] PNG的动画也叫APNG,只是firefox支持,详见 http://ooxx.me/apng.orz ,如Firefox看这里的favicon,是会动滴 [...]
  38. PNG现状整理. - CssRain-前端技术 - 读者的进步速度远大于博客的进步速度。
    [...] PNG的动画也叫APNG,只是firefox支持,详见 http://ooxx.me/apng.orz ,如Firefox看这里的favicon,是会动滴 [...]
  39. Reply瑶哥
    竟然还能用PNG的,厉害
  40. GIF和几种PNG(8/24/32)以及Alpha/索引色透明对比 « 不羁虫
    [...] PNG的动画也叫APNG,只是firefox支持,详见 http://ooxx.me/apng.orz ,如Firefox看这里的favicon,是会动滴 [...]
  41. GIF and PNG 8/24/32) and several (Alpha/index color transparent contrast (turn)
    [...] and GIF animation supportPNG animation also called APNG, just firefox support, seehttp://ooxx.me/apng.orzSee here, such as Firefox the favicon, is moving dropsSo for motion pictures, or GIF support is the [...]
  42. 换个Favicon | 虾子酱
    [...] 每次去大猫那儿都看见那只邪恶的猫咪在眨眼睛玩萌,最后忍不住自己也干了这样的龌龊事,做了一个APNG的动画favicon:  ←请用firefox观看,如果在地址栏看不到动画图标的,就清空浏览器的缓存后重新启动浏览器再看。大猫说的APN的制作工具APNG Edit的作者几百年不更新,这插件已经没法儿继续在firefox上工作了,找了个替代品:Animat,很好用. TAG: apn 0 喜欢 2 Comments [...]
  43. Reply姜小抽
    :roll: 为什么我把favicon.ico丢到根目录里8好用啊(是在火狐下)根目录就是最外层的目录 对不?跟public_html这些文件夹平级的?(我是菜鸟,先感谢帮助了)
    • Replybigcat
      @姜小抽, 丢到public_html里面去 因为对于网站来说,这个才是根目录 外面这个叫用户的home目录
  44. PNG现状整理 | 酷爱前端 | 沙拉酷儿
    [...] PNG的动画也叫APNG,只是firefox支持,详见 http://ooxx.me/apng.orz ,如Firefox看这里的favicon,是会动滴 [...]
  45. Replyhome and garden
    谢谢..
  46. Replyoxxx
    这个Opera下也可以动的呀,做的不错,不过APNG Edit 现在不能在FF17下面安装呀
    • ReplybigCat
      @oxxx opera因为份额的原因..一直没有被考虑... 这文章09年的,也不知道后面出来啥工具可以搞定了,期待分享

Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>