如何制作 APNG 动画 PNG 的 Favicon

玩 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://bigc.at/favicon.png" />

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

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

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

25 12 月, 2009

bigCat

Codex

apng, favicon

《 “如何制作 APNG 动画 PNG 的 Favicon” 》有 78 条评论

久酷说道：

2009-12-25 00:24

😉 😉 我来啦

回复
lostindream说道：

2009-12-25 00:29

赞，这个favicon与你的博客很配！

我可就不行了，一直没有个像样的满意的favicon

回复
- bigCat说道：
  
  2009-12-25 00:34
  
  @lostindream, 啊哈哈,还得多感谢zing大湿
  
  回复
A.shun说道：

2009-12-25 00:31

我火星了，第一次看到png会动的。。 😯
不过作为avicon.ico还不是一样

回复
- bigCat说道：
  
  2009-12-25 00:35
  
  @A.shun, 呃,其实很早前就有这个了, 当时随便看了下PS和fireworks都不能做,就懒得去弄了,今天平安夜突然那个啥…就搞上了
  
  回复
Tweets that mention 如何制作 APNG 动画 PNG 的 Favicon – OOXX.ME PLZ – 大猫の意淫网志 — Topsy.com说道：

2009-12-25 00:32

[…] This post was mentioned on Twitter by BigCat, 茕觞橙. 茕觞橙 said: RT @caitou: 换了个APNG的favicon http://bigc.at/apng.orz ||何谓GNU? (发音 "嗝妞")。哈哈！"嗝妞儿"好玩! […]

回复
chisdy说道：

2009-12-25 01:05

圣诞快乐！哈哈，完全看不懂 😯

回复
新邮件(1)说道：

2009-12-25 01:12

有点意思，改天也弄个~
你这个大猫有点WS，吼吼吼

回复
- bigCat说道：
  
  2009-12-25 09:29
  
  @新邮件(1), :)虽然不如gif实用，但凑合还能用
  
  回复
fatkun说道：

2009-12-25 01:14

会动滴 👿 可惜在Chrome看不到…

回复
- bigCat说道：
  
  2009-12-25 09:29
  
  @fatkun, 哈，只有firefox支持
  
  回复
- 匿名说道：
  
  2009-12-28 14:43
  
  @fatkun,
  
  回复
沈蚊说道：

2009-12-25 01:18

偶诞节快乐~~ 🙂

回复
- bigCat说道：
  
  2009-12-25 09:29
  
  @沈蚊, 圣诞快乐~~~~
  
  回复
Maxsailor说道：

2009-12-25 02:39

呵呵~ 眼睛眨的好萌啊 😆

回复
- bigCat说道：
  
  2009-12-25 09:29
  
  @Maxsailor, 哦吼吼吼
  
  回复
一米说道：

2009-12-25 08:33

哎，IE怎么总是杯具啊。

回复
- bigCat说道：
  
  2009-12-25 09:30
  
  @一米, 除了firefox貌似都不支持。。。
  
  回复
underone说道：

2009-12-25 10:42

用了Chrome我都好久没开FF了。。。

回复
- bigCat说道：
  
  2009-12-25 19:19
  
  @underone, 哈，我还要靠firebug吃饭。。。
  
  回复
JOY说道：

2009-12-25 10:50

有意思，找个时间也去耍耍

圣诞快乐

回复
- bigCat说道：
  
  2009-12-25 19:19
  
  @JOY, Merry X’mas 🙂
  
  回复
soup说道：

2009-12-25 12:13

Merry X’mas 🙂

回复
- bigCat说道：
  
  2009-12-25 19:19
  
  @soup, Merry X’mas 🙂
  
  回复
yorklaser说道：

2009-12-25 14:00

这是我见过最牛逼的Favicon!

回复
Kiss6说道：

2009-12-25 15:02

报告长官：IE6 下也没看到动。

回复
- bigCat说道：
  
  2009-12-25 19:19
  
  @Kiss6, – – 我不是说只有ff支持apng么。。。
  
  回复
小飞嘀敲敲门说道：

2009-12-25 20:57

😛 新Banner加的那个黑框框很帅(╯3╰)

回复
- bigCat说道：
  
  2009-12-29 19:38
  
  @小飞嘀敲敲门, – – 最近风头紧,抓紧时间自我阉割
  
  回复
XJP说道：

2009-12-26 17:03

其实我路过的

回复
葉子说道：

2009-12-26 22:17

酷 ❗

回复
左岸读书说道：

2009-12-27 21:26

大猫的每个细节都在完善吗？ ❗

回复
- bigCat说道：
  
  2009-12-29 19:39
  
  @左岸读书, 嘿嘿,最近的重心转移回老本行了
  
  回复
断峰狼说道：

2009-12-28 17:12

这个有点意思~也是第一次看到~

回复
托尔·银月说道：

2009-12-28 19:26

大猫不是海外生活么？怎么备案了？

回复
- bigCat说道：
  
  2009-12-29 19:46
  
  @托尔·银月, 05年备案的…
  
  回复
  - 托尔·银月说道：
    
    2009-12-29 21:13
    
    @bigCat, 之前你还销魂的鄙视备案～～～～写在页脚那里～～～
    
    回复
    - bigCat说道：
      
      2009-12-29 21:14
      
      @托尔·银月, 🙁 惹不起
      
      回复
      - 托尔·银月说道：
        
        2009-12-29 21:25
        
        @bigCat, 现在囧了～～～～话说怎么之前都备案了还能那么拽？不查验你？
        
        回复
        
        bigCat说道：
        
        2009-12-30 02:12
        
        @托尔·银月, 要知道之前可没现在这么严峻…
        
        回复
        
        托尔·银月说道：
        
        2009-12-30 12:38
        
        @bigCat, 但是你那么堂而皇之人家也看不见～
        
        回复
星网说道：

2009-12-28 20:13

大家都用邮件发消息上瘾了！ 🙁

回复
匿名说道：

2009-12-28 23:42

为啥这次连chrome都被藐视捏 😛

回复
- bigCat说道：
  
  2009-12-29 19:47
  
  @, 哈,小众的玩物~ 不过前景不错
  
  回复
chouray说道：

2009-12-31 17:51

大猫明年明天快乐 😆

回复
- bigCat说道：
  
  2010-01-17 15:59
  
  @chouray, 😆 啊哈哈,新年快乐~
  
  回复
homer说道：

2010-01-02 03:20

毛兄，新年快乐～

回复
- bigCat说道：
  
  2010-01-17 15:58
  
  @homer, 新年快乐~~
  
  回复
小姚说道：

2010-01-02 14:36

呵呵，你博客头部那个太有意思了~

回复
狗登说道：

2010-01-04 23:37

最终还是得备案了吧，唉，不容易的呐，猫兄~~~

回复
- bigCat说道：
  
  2010-01-17 13:44
  
  @狗登, 被逼滴,几年前的备案号翻出来…
  
  回复
Showfom说道：

2010-01-05 17:18

一直在动 aa.cx Firefox 也能动哦

回复
- bigCat说道：
  
  2010-01-17 13:43
  
  @Showfom, 只有ff能动…
  
  回复
qlj说道：

2010-01-06 23:01

会上下动的片叫A片
辣么会动的PNG当然叫APNG了

博主真是意淫达人啊

回复
zing说道：

2010-01-11 17:23

哈哈我的弄动了！不过那个APNG Edit为什么不自己弄个软件啊。。。

回复
- bigCat说道：
  
  2010-01-17 13:42
  
  @zing, = = 也是哦…目前还没有软件和他竞争
  
  回复
猫哥说道：

2010-01-14 17:40

第一次来，你域名很OOXX。

回复
疯子说道：

2010-01-16 12:50

好像已经N久没有更新了

回复
- bigCat说道：
  
  2010-01-17 13:40
  
  @疯子, 忙半死啊
  
  回复
cg说道：

2010-01-17 03:16

ico是我这些天的痛啊，怎么做都做不明白，灰溜溜爬。

回复
- bigCat说道：
  
  2010-01-17 13:40
  
  @cg, 做个图片转为ico即可
  
  回复
pergian说道：

2010-04-05 03:09

猫啊，你早说firefox apng 我早有了。

回复
pergian说道：

2010-04-05 03:12

CC 猫猫的又是错别字！

「早有了」=>「早走了」

回复
xnotepad说道：

2010-07-18 09:36

apng目前好像不是官方标准，也只有firefox和Opera支持。并不是很实用。

回复
- bigCat说道：
  
  2010-07-18 10:59
  
  @xnotepad, – – 自己用的爽就行了，啊哈哈
  不过目前gif那么大，真需要一个替代品出来
  
  回复
GIF和几种PNG(8/24/32)以及Alpha/索引色透明对比 – 大猫の意淫筆記说道：

2010-12-18 20:38

[…] PNG的动画也叫APNG,只是firefox支持,详见 http://bigc.at/apng.orz ,如Firefox看这里的favicon,是会动滴 […]

回复
PNG现状整理. – CssRain-前端技术 – 读者的进步速度远大于博客的进步速度。说道：

2011-01-11 16:14

[…] PNG的动画也叫APNG,只是firefox支持,详见 http://bigc.at/apng.orz ,如Firefox看这里的favicon,是会动滴 […]

回复
瑶哥说道：

2011-04-27 09:22

竟然还能用ＰＮＧ的，厉害

回复
GIF和几种PNG(8/24/32)以及Alpha/索引色透明对比 « 不羁虫说道：

2011-07-12 11:42

[…] PNG的动画也叫APNG,只是firefox支持,详见 http://bigc.at/apng.orz ,如Firefox看这里的favicon,是会动滴 […]

回复
GIF and PNG 8/24/32) and several (Alpha/index color transparent contrast (turn)说道：

2011-09-18 15:52

[…] and GIF animation supportPNG animation also called APNG, just firefox support, seehttp://bigc.at/apng.orzSee here, such as Firefox the favicon, is moving dropsSo for motion pictures, or GIF support is the […]

回复
换个Favicon | 虾子酱说道：

2011-10-18 14:11

[…] 每次去大猫那儿都看见那只邪恶的猫咪在眨眼睛玩萌，最后忍不住自己也干了这样的龌龊事，做了一个APNG的动画favicon： ←请用firefox观看，如果在地址栏看不到动画图标的，就清空浏览器的缓存后重新启动浏览器再看。大猫说的APN的制作工具APNG Edit的作者几百年不更新，这插件已经没法儿继续在firefox上工作了，找了个替代品：Animat，很好用. TAG: apn 0 喜欢 2 Comments […]

回复
姜小抽说道：

2011-10-25 13:11

🙄 为什么我把favicon.ico丢到根目录里8好用啊（是在火狐下）根目录就是最外层的目录对不？跟public_html这些文件夹平级的？（我是菜鸟，先感谢帮助了）

回复
- bigcat说道：
  
  2011-10-25 18:09
  
  @姜小抽, 丢到public_html里面去
  因为对于网站来说,这个才是根目录
  外面这个叫用户的home目录
  
  回复
  - 姜小抽说道：
    
    2011-10-27 09:03
    
    @bigcat, 嗯，灰常感谢~~已经弄好了！
    
    回复
PNG现状整理 | 酷爱前端 | 沙拉酷儿说道：

2012-05-23 09:57

[…] PNG的动画也叫APNG,只是firefox支持,详见 http://bigc.at/apng.orz ,如Firefox看这里的favicon,是会动滴 […]

回复
home and garden说道：

2012-10-12 05:11

谢谢..

回复
oxxx说道：

2013-01-08 11:44

这个Opera下也可以动的呀，做的不错，不过APNG Edit 现在不能在FF17下面安装呀

回复
- bigCat说道：
  
  2013-01-08 14:17
  
  @oxxx opera因为份额的原因..一直没有被考虑… 这文章09年的,也不知道后面出来啥工具可以搞定了,期待分享
  
  回复

大猫的无限游戏

如何制作 APNG 动画 PNG 的 Favicon

《 “如何制作 APNG 动画 PNG 的 Favicon” 》有 78 条评论

回复姜小抽取消回复

如何制作 APNG 动画 PNG 的 Favicon

《 “如何制作 APNG 动画 PNG 的 Favicon” 》 有 78 条评论

回复 姜小抽 取消回复

《 “如何制作 APNG 动画 PNG 的 Favicon” 》有 78 条评论

回复姜小抽取消回复