Gjenerues Favicon Falas

Si funksionon

Ky mjet konverton çdo PNG, JPEG, WebP, ose SVG në një paketë të plotë favicon-i — .ico shumë-madhësish, ikonë Apple touch, ikona Android/PWA, një manifest web, dhe një fragment HTML gati për ngjitje — tërësisht brenda shfletuesit tënd duke përdorur API-në Canvas dhe JSZip. Asgjë nuk ngarkohet; i gjithë vizatimi dhe montimi i skedarëve ndodh lokalisht.

1. 1
   Canvas e ripërmasazon imazhin tënd

   Shfletuesi e vizaton imazhin tënd burim mbi elemente HTML Canvas jashtë-ekranit në çdo madhësi të kërkuar (16, 32, 48, 180, 192, dhe 512 px). SVG-të pa atribute eksplicite width/height normalizohen së pari përmes DOMParser dhe XMLSerializer kështu që Firefox dhe Chrome prodhojnë dalje piksel identike në vend të një canvas bosh.
2. 2
   Kodifikuesi ICO i shkruar me dorë paketon skedarin .ico

   Hyrjet e vogla ICO (16, 32, 48 px) kodifikohen si bitmape të papërpunuara DIB 32-bit BGRA — BITMAPINFOHEADER plus rreshta XOR nga fundi-lart dhe një maskë 1bpp AND — sepse komponentët e guaskës Windows kërkojnë format DIB të pakompresuar në ato madhësi. Mjeti shkruan kreun e drejtorisë ICO dhe i bashkon hyrjet tërësisht me DataView dhe Uint8Array, pa asnjë bibliotekë ICO të jashtme të përfshirë.
3. 3
   Daljet PNG prodhohen përmes canvas.toBlob

   Çdo variant PNG (favicon-16x16, favicon-32x32, apple-touch-icon-180x180, android-chrome-192x192, android-chrome-512x512) kapet duke thirrur canvas.toBlob me 'image/png', duke ia deleguar kodifikimin pa humbje motorit të integruar të imazheve të shfletuesit. Hapësira anësore, ngjyra e sfondit, dhe prerja e formës (katrore, e rrumbullakosur, ose rrethore) opsionale zbatohen te konteksti i canvas para kapjes.
4. 4
   JSZip i paketon të gjitha në një shkarkim

   JSZip monton të gjithë skedarët e gjeneruar — favicon.ico, pesë PNG-të, një site.webmanifest me emrin e aplikacionit tënd, dhe një favicon-snippet.html me etiketat e sakta <link> — në një blob të vetëm .zip që shkarkohet automatikisht te pajisja jote.

Mjete të ngjashme