Olùmúdásílẹ̀ Favicon Ọ̀fẹ́

Bí Ó Ṣe Ń Ṣiṣẹ́

Irinṣẹ́ yìí ń yí PNG, JPEG, WebP, tàbí SVG èyíkéyìí padà sí àkópọ̀ favicon pípé — .ico ìwọ̀n-púpọ̀, àmì Apple touch, àwọn àmì Android/PWA, manifest wẹ́ẹ̀bù kan, àti àpẹẹrẹ HTML tí ó ti ṣetán láti lẹ̀ — pátápátá nínú aṣàwákiri rẹ pẹ̀lú API Canvas àti JSZip. A kì í gbé ohunkóhun sókè; gbogbo àwòrán àti ìkó fáìlì papọ̀ ń ṣẹlẹ̀ ládùúgbò.

1. 1
   Canvas ń tún ìwọ̀n àwòrán rẹ ṣe

   Aṣàwákiri náà ń yà àwòrán orísun rẹ sórí àwọn ẹ̀yà HTML Canvas lóde-ìfihàn ní ìwọ̀n kọ̀ọ̀kan tí ó nílò (16, 32, 48, 180, 192, àti 512 px). Àwọn SVG tí kò ní àwọn àkànṣe ìbú/gíga gan-an ni a jọ̀wọ́ kọ́kọ́ nípasẹ̀ DOMParser àti XMLSerializer nítorí náà Firefox àti Chrome ń mú ìtọjade pixel kan náà jáde dípò canvas òfìfo.
2. 2
   Encoder ICO tí a fi ọwọ́ kọ ń kó fáìlì .ico náà papọ̀

   A ń ṣe àmúlò àwọn àkọ́sílẹ̀ ICO kékeré (16, 32, 48 px) gẹ́gẹ́ bí àwọn bitmap DIB BGRA 32-bit gan-an — BITMAPINFOHEADER pẹ̀lú àwọn ìlà XOR láti-ìsàlẹ̀-lọ àti àmì AND 1bpp — nítorí àwọn ẹ̀yà shell Windows nílò irú DIB tí kò ní ìkópọ̀ ní àwọn ìwọ̀n yẹn. Irinṣẹ́ náà ń kọ àkọlé àkọ́sílẹ̀ ICO náà tí ó sì ń so àwọn àkọ́sílẹ̀ náà pọ̀ pátápátá pẹ̀lú DataView àti Uint8Array, láìsí ìwé-ìṣirò ICO ìta kankan.
3. 3
   A ń mú àwọn ìtọjade PNG jáde nípasẹ̀ canvas.toBlob

   A ń mú ìrísí PNG kọ̀ọ̀kan (favicon-16x16, favicon-32x32, apple-touch-icon-180x180, android-chrome-192x192, android-chrome-512x512) jáde nípa pípe canvas.toBlob pẹ̀lú 'image/png', tí ó ń fi ìṣàmúlò tí kò pàdánù sí ẹ́ńjìnnì àwòrán aṣàwákiri tí a kọ́ sínú rẹ̀. A ń fi àyè yíyàn, àwọ̀ ẹ̀yìn, àti gígé ìrísí (onígun mẹ́rin, yíyi, tàbí àyíká) sílo sí àkànṣe canvas náà kí ó tó mú un.
4. 4
   JSZip ń kó ohun gbogbo sí gbígbà kan

   JSZip ń kó gbogbo àwọn fáìlì tí a ṣẹ̀dá papọ̀ — favicon.ico, PNG márùn-ún, site.webmanifest pẹ̀lú orúkọ app rẹ, àti favicon-snippet.html pẹ̀lú àwọn tag <link> tí ó tọ́ — sí blob .zip kan tí ó ń gbà láifọwọ́kàn sí ẹ̀rọ rẹ.

Àwọn Irinṣẹ Tó Jọra