前言給網(wǎng)站做 favicon常規(guī)路子是找在線生成器或者npm install sharp/png-to-ico一把梭。但我的場景比較刁部署在一臺零依賴的 Node 服務(wù)器上整個項目連package.json都沒有為一個 4KB 的圖標(biāo)引入圖像庫有點殺雞用牛刀。于是我研究了一下 PNG 和 ICO 的文件格式發(fā)現(xiàn)這倆格式簡單得出奇——純 Node 內(nèi)置模塊Buffer zlib就能手寫一個 PNG 編碼器配上一個用有向距離場SDF畫圓角矩形的小渲染器150 行代碼搞定。最終效果輸入三個參數(shù)尺寸、兩種漸變色輸出一個漸變底 白色圓角工具塊圖案的.ico瀏覽器、搜索引擎站點圖標(biāo)Google 搜索結(jié)果里的 favicon都能正常識別。我的五個站點用了同一套代碼、不同主色生成了一組家族臉圖標(biāo)。先看成品node gen_favicon.js out.ico 55,138,221 91,157,249生成 32×32 的 ICO藍(lán)橙漸變底四個白色圓角小塊 2×2 排列。改兩個 RGB 參數(shù)就能換配色。第一步理解 PNG 文件結(jié)構(gòu)PNG 一個 8 字節(jié)簽名 若干個塊chunk。我們只需要三塊塊作用IHDR寬、高、位深、顏色類型等頭信息13 字節(jié)定長IDAT像素數(shù)據(jù)zlib 壓縮后的 RGBAIEND結(jié)束標(biāo)記空塊每個 chunk 的結(jié)構(gòu)[4字節(jié)長度][4字節(jié)類型][數(shù)據(jù)][4字節(jié)CRC32校驗]難點只有一個CRC32。好消息是 zlib 內(nèi)置了constzlibrequire(zlib);constcrc32(buf)zlib.crc32?zlib.crc32(buf):softCrc32(buf);// Node 22 自帶 zlib.crc32低版本用查表法兜底第二步手寫 PNG 編碼器constzlibrequire(zlib);functionchunk(type,data){constlenBuffer.alloc(4);len.writeUInt32BE(data.length);consttypeBufBuffer.from(type,ascii);constcrcBuffer.alloc(4);crc.writeUInt32BE(zlib.crc32(Buffer.concat([typeBuf,data]))0);returnBuffer.concat([len,typeBuf,data,crc]);}functionencodePNG(w,h,rgba){// IHDR: 位深8 顏色類型6 RGBAconstihdrBuffer.alloc(13);ihdr.writeUInt32BE(w,0);ihdr.writeUInt32BE(h,4);ihdr[8]8;// bit depthihdr[9]6;// color type RGBA// IDAT: 每行前面加 1 字節(jié)過濾器 0None再整塊 zlib 壓縮conststridew*4;constrawBuffer.alloc((stride1)*h);for(lety0;yh;y){raw[y*(stride1)]0;// filter: Nonergba.copy(raw,y*(stride1)1,y*stride,(y1)*stride);}constidatzlib.deflateSync(raw,{level:9});returnBuffer.concat([Buffer.from([0x89,0x50,0x4e,0x47,0x0d,0x0a,0x1a,0x0a]),// 簽名chunk(IHDR,ihdr),chunk(IDAT,idat),chunk(IEND,Buffer.alloc(0)),]);}就這么幾十行一個合規(guī)的 PNG 編碼器完成了。踩坑提醒IDAT 的像素數(shù)據(jù)每行開頭必須有一個 filter 字節(jié)哪怕你不用任何過濾器也要寫 0漏了它 zlib 能壓過去、瀏覽器卻解碼出一條條斜紋——這是我調(diào)了半小時才發(fā)現(xiàn)的特色。第三步用 SDF 畫圓角矩形位圖繪制最樸素的思路是逐像素判斷我在不在形狀里。圓角矩形用有向距離場來做非常優(yōu)雅// 點 (px,py) 到圓角矩形中心距離場r 為圓角半徑// 返回值 0 表示在矩形內(nèi)部0 表示在外部數(shù)值≈到邊緣的距離functionsdfRoundRect(px,py,hw,hh,r){constqxMath.abs(px)-hwr;constqyMath.abs(py)-hhr;constaxMath.max(qx,0),ayMath.max(qy,0);returnMath.hypot(ax,ay)Math.min(Math.max(qx,qy),0)-r;}有了它邊緣抗鋸齒也順手解決了像素中心距離在[-1, 1]之間的按距離線性混合透明度邊緣就是平滑漸變而不是鋸齒樓梯。渲染主體先畫一個漸變底對角線線性插值兩色再疊四塊白色圓角小矩形functionrender(size,c1,c2){constbufBuffer.alloc(size*size*4);constpadsize*0.14;// 外邊距constgapsize*0.06;// 塊間距constcell(size-pad*2-gap)/2;consthalfcell/2;constrcell*0.28;// 圓角半徑constcenters[[-1,-1],[1,-1],[-1,1],[1,1],].map(([sx,sy])[size/2sx*(halfgap/2),size/2sy*(halfgap/2)]);for(lety0;ysize;y){for(letx0;xsize;x){consti(y*sizex)*4;// 漸變底對角線constt(xy)/(2*size-2);letRc1[0](c2[0]-c1[0])*t;letGc1[1](c2[1]-c1[1])*t;letBc1[2](c2[2]-c1[2])*t;letA255;// 疊加白色塊任一塊命中即白lethit1e9;for(const[cx,cy]ofcenters){hitMath.min(hit,sdfRoundRect(x-cx,y-cy,half,half,r));}if(hit1){constalphaMath.min(1,Math.max(0,(1-hit)/2));// 抗鋸齒R255*alphaR*(1-alpha);G255*alphaG*(1-alpha);B255*alphaB*(1-alpha);}buf[i]R|0;buf[i1]G|0;buf[i2]B|0;buf[i3]A;}}returnbuf;}第四步包一層 ICO 殼ICO 格式比想象中還簡單一個 6 字節(jié)頭 一條 16 字節(jié)目錄項 原始 PNG 數(shù)據(jù)。現(xiàn)代 ICO 支持內(nèi)嵌 PNG256×256 內(nèi)都合法不用再寫 BMP 行序轉(zhuǎn)換functionwrapICO(png){constheadBuffer.alloc(6);head.writeUInt16LE(0,0);// 保留位head.writeUInt16LE(1,2);// 類型1 圖標(biāo)head.writeUInt16LE(1,4);// 圖像數(shù)量constdirBuffer.alloc(16);dir[0]32;dir[1]32;// 寬高0 表示 256dir[2]0;dir[3]0;// 調(diào)色板dir.writeUInt16LE(1,4);// 色彩平面dir.writeUInt16LE(32,6);// 位深dir.writeUInt32LE(png.length,8);// 數(shù)據(jù)大小dir.writeUInt32LE(22,12);// 數(shù)據(jù)偏移 6 16returnBuffer.concat([head,dir,png]);}組裝入口constoutprocess.argv[2]||favicon.ico;constparse(s)s.split(,).map(Number);constc1parse(process.argv[3]||55,138,221);constc2parse(process.argv[4]||91,157,249);require(fs).writeFileSync(out,wrapICO(encodePNG(32,32,render(32,c1,c2))));console.log(OK -,out);實用建議多尺寸怎么辦嚴(yán)格的 favicon 規(guī)范建議提供 16/32/48 三檔。做法是把三個尺寸各自encodePNG后在 ICO 里放三條目錄項把wrapICO里的數(shù)量改成 3、循環(huán)寫目錄項即可代碼模式完全一樣。我的實踐里單 32×32 在 Chrome/Edge/Google 搜索結(jié)果里顯示都正常48 以上的場景PWA、桌面快捷方式才需要補。總結(jié)PNG 編碼沒有想象中神秘簽名 IHDR/IDAT/IEND 三個 chunk CRC32zlib 自帶IDAT 每行的 filter 字節(jié)是最隱蔽的坑SDF 是位圖繪制圓角形狀 抗鋸齒的優(yōu)雅解法ICO 現(xiàn)代格式直接內(nèi)嵌 PNG外殼只有 22 字節(jié)完整代碼約 130 行零依賴Node 18 直接跑。適合的場景CI/CD 里動態(tài)生成圖標(biāo)、給批量站點生成同款不同色的圖標(biāo)家族、或者單純想搞懂圖片文件格式。完整可運行源碼我整理在文末附件改配色只需要動兩個 RGB 參數(shù)。有問題歡迎評論區(qū)交流。