Kyauta Mai Ƙirƙirar Favicon

Yadda Yake Aiki

Wannan kayan aikin yana canja kowane PNG, JPEG, WebP, ko SVG zuwa cikakken kunshin favicon — .ico mai girma da yawa, alamar Apple touch, alamomin Android/PWA, wani manifest na yanar-gizo, da guntun HTML a shirye don manna — duk a cikin burauzarka ta amfani da Canvas API da JSZip. Ba a loda komai; duk zanawa da haɗa fayil suna faruwa a wurin nan.

1. 1
   Canvas yana sake auna hotonka

   Burauza yana zana hotonka na asali zuwa abubuwan HTML Canvas a wajen allo a kowace girman da ake bukata (16, 32, 48, 180, 192, da 512 px). Ana daidaita SVGs babu bayyanannun sifofin fadi/tsayi tukuna ta hanyar DOMParser da XMLSerializer don Firefox da Chrome su samar da iri ɗayan fitarwar pixel maimakon canvas fanko.
2. 2
   Mai ɓoyewa na ICO da aka rubuta da hannu yana lulluɓe fayil na .ico

   Ana ɓoye ƙananan shigarwar ICO (16, 32, 48 px) a matsayin bitmaps na DIB na BGRA 32-bit danye — BITMAPINFOHEADER tare da layuka na XOR bottom-up da wani mask na AND 1bpp — saboda abubuwan shell na Windows suna bukatar tsarin DIB marar matsawa a waɗannan girman. Kayan aikin yana rubuta kanun labarai na directory na ICO kuma yana haɗa shigarwar gaba ɗaya da DataView da Uint8Array, babu ɗakin karatu na ICO na waje da abin ya shafa.
3. 3
   Ana samar da fitarwar PNG ta hanyar canvas.toBlob

   Ana kama kowace bambancin PNG (favicon-16x16, favicon-32x32, apple-touch-icon-180x180, android-chrome-192x192, android-chrome-512x512) ta hanyar kiran canvas.toBlob da 'image/png', yana ba da ɓoyewa marar-asara ga injin hoto na burauza da aka gina. Ana amfani da padding na zaɓi, launin bango, da yankewar siffa (murabba'i, mai zagaye, ko da'ira) ga yanayin canvas kafin kamawa.
4. 4
   JSZip yana haɗa komai zuwa saukewa guda ɗaya

   JSZip yana haɗa dukkan fayilolin da aka ƙirƙira — favicon.ico, PNG biyar, wani site.webmanifest tare da sunan app ɗinka, da wani favicon-snippet.html tare da alamomin <link> daidai — zuwa blob na .zip guda ɗaya wanda yake saukewa kai tsaye zuwa na'urarka.

Kayan Aiki Masu Alaƙa