ຂ້າມໄປຫາເນື້ອຫາຫຼັກ
LibraTool logoLibraTool

ຕົວສ້າງ Favicon ຟຣີ

ແປງຮູບໃດໆ ເປັນ favicon package ຄົບ: favicon.ico ຫຼາຍຂະໜາດ, Apple touch icon, Android/PWA icon, web manifest ແລະ HTML snippet ທີ່ paste ໄດ້ — ທັງໝົດ zip, ໃນບຣາວເຊີ.

ວາງໄຟລ໌ບ່ອນນີ້, ຫຼື ກົດເພື່ອເລືອກ

PNG, JPG, WebP, SVG, HEIC, HEIF · ປະມວນຜົນຢູ່ໃນອຸປະກອນຂອງທ່ານ

ຫຼືກົດ Ctrl+V ເພື່ອວາງຈາກຄລິບບອດ

ຊອກຫາໄຟລ໌

ໄຟລ໌ຂອງທ່ານບໍ່ເຄີຍອອກຈາກອຸປະກອນຂອງທ່ານ. ການປະມວນຜົນທັງໝົດເກີດຂຶ້ນຢູ່ໃນຕົວທ່ອງເວັບຂອງທ່ານ.

💡 ເພື່ອໄດ້ຜົນທີ່ຫຼວດເຫຼົ້າທີ່ສຸດ, ອັບໂຫຼດຮູບພາບສີ່ຫຼ່ຽມຢ່າງໜ້ອຍ 512×512. PNG ໂປ່ງໃສ ຫຼື SVG ຕໍ່າສຸດ.

ການນຳໃຊ້ທົ່ວໄປ

  • ສ້າງ Favicon ເວັບໄຊ້ສ້າງຊຸດ favicon ສົມບູນທີ່ກະທໍ່າວ ແລະ ອຸປະກອນທັງຫມົດຄາດຫວັງ.
  • ສ້າງໄອຄອນ PWA ແລະ Manifestໄດ້ຮັບໄອຄອນ 192px ແລະ 512px ແລະ web manifest ທີ່ PWA ຕ້ອງການ.
  • ສ້າງໄອຄອນ Apple Touchສ້າງໄອຄອນ 180×180 ທີ່ iOS ໃຊ້ໃນເວລາທີ່ເວັບໄຊ້ທີ່ບັນທຶກໄວ້ໃສ່ໜ້າຈໍໜ້າບ້ານ.
  • ປ່ຽນໂລໂກ້ເປັນ Faviconແປງໂລໂກ້ແບບຟອກເປັນ favicon ທີ່ບໍ່ແຕກແຍກ, ຮູ້ຈັກ.
  • ສ້າງ Favicons ສໍາລັບ Framework ໃດກໍ່ໄດ້ໄດ້ຮັບເອກະສານ favicon drop-in ສໍາລັບ React, Next.js, WordPress ແລະ ອື່ນໆ.

ມັນເຮັດວຽກແນວໃດ

ເຄື່ອງມືນີ້ປ່ຽນ PNG, JPEG, WebP, ຫຼື SVG ໃດໆໃຫ້ເປັນຊຸດ favicon ຄົບຊຸດ — .ico ຫຼາຍຂະໜາດ, ໄອຄອນ Apple touch, ໄອຄອນ Android/PWA, web manifest, ແລະ ໂຄ້ດ HTML ພ້ອມວາງ — ພາຍໃນບຣາວເຊີຂອງທ່ານທັງໝົດໂດຍໃຊ້ Canvas API ແລະ JSZip. ບໍ່ມີການອັບໂຫຼດຫຍັງ; ການສະແດງຜົນ ແລະ ການປະກອບໄຟລ໌ທັງໝົດເກີດຂຶ້ນຢູ່ໃນເຄື່ອງ.

  1. 1
    Canvas ປັບຂະໜາດຮູບຂອງທ່ານ
    ບຣາວເຊີແຕ້ມຮູບຕົ້ນສະບັບຂອງທ່ານລົງໃນອົງປະກອບ HTML Canvas ນອກໜ້າຈໍໃນທຸກຂະໜາດທີ່ຕ້ອງການ (16, 32, 48, 180, 192, ແລະ 512 px). SVG ທີ່ບໍ່ມີຄຸນສົມບັດ width/height ຈະຖືກປັບມາດຕະຖານກ່ອນຜ່ານ DOMParser ແລະ XMLSerializer ເພື່ອໃຫ້ Firefox ແລະ Chrome ໃຫ້ຜົນລັບ pixel ດຽວກັນແທນທີ່ຈະເປັນ canvas ຫວ່າງ.
  2. 2
    ຕົວເຂົ້າລະຫັດ ICO ທີ່ຂຽນເອງແພັກໄຟລ໌ .ico
    ລາຍການ ICO ຂະໜາດນ້ອຍ (16, 32, 48 px) ຖືກເຂົ້າລະຫັດເປັນ raw 32-bit BGRA DIB bitmaps — BITMAPINFOHEADER ບວກກັບແຖວ bottom-up XOR ແລະ ໜ້າກາກ 1bpp AND — ເນື່ອງຈາກອົງປະກອບ shell ຂອງ Windows ຮຽກຮ້ອງຮູບແບບ DIB ທີ່ບໍ່ບີບອັດໃນຂະໜາດເຫຼົ່ານັ້ນ. ເຄື່ອງມືຂຽນສ່ວນຫົວ directory ຂອງ ICO ແລະ ຕໍ່ລາຍການເຂົ້າກັນທັງໝົດດ້ວຍ DataView ແລະ Uint8Array, ໂດຍບໍ່ມີໄລບຣາຣີ ICO ພາຍນອກກ່ຽວຂ້ອງ.
  3. 3
    ຜົນລັບ PNG ຖືກສ້າງຂຶ້ນຜ່ານ canvas.toBlob
    ແຕ່ລະຮູບແບບ PNG (favicon-16x16, favicon-32x32, apple-touch-icon-180x180, android-chrome-192x192, android-chrome-512x512) ຖືກຈັບພາບໂດຍການເອີ້ນ canvas.toBlob ດ້ວຍ 'image/png', ມອບໜ້າທີ່ການເຂົ້າລະຫັດແບບບໍ່ເສຍຄຸນນະພາບໃຫ້ກັບເອັນຈິນຮູບພາບທີ່ມີໃນຕົວບຣາວເຊີ. ຊ່ອງຫວ່າງ, ສີພື້ນຫຼັງ, ແລະ ການຕັດຮູບຮ່າງ (ສີ່ຫຼ່ຽມ, ມົນ, ຫຼື ວົງມົນ) ທີ່ເປັນທາງເລືອກຈະຖືກນຳໃຊ້ໃນ canvas context ກ່ອນຈັບພາບ.
  4. 4
    JSZip ຮວມທຸກຢ່າງເປັນການດາວໂຫຼດດຽວ
    JSZip ປະກອບໄຟລ໌ທີ່ສ້າງທັງໝົດ — favicon.ico, PNG ຫ້າໄຟລ໌, site.webmanifest ພ້ອມຊື່ແອັບຂອງທ່ານ, ແລະ favicon-snippet.html ພ້ອມແທັກ <link> ທີ່ຖືກຕ້ອງ — ເຂົ້າໃນ blob .zip ດຽວທີ່ດາວໂຫຼດອັດຕະໂນມັດລົງໃນອຸປະກອນຂອງທ່ານ.

ຮູບຂອງທ່ານຖືກໂຫຼດເຂົ້າໂດຍກົງໃນ Canvas API ຂອງບຣາວເຊີ ແລະ ບໍ່ອອກຈາກອຸປະກອນຂອງທ່ານເລີຍ — ບໍ່ມີຂໍ້ມູນໄຟລ໌ຖືກສົ່ງໄປຫາເຊີບເວີໃດໆເລີຍ.

ເຄື່ອງມືທີ່ກ່ຽວຂ້ອງ

🖼️

ຕົວແປງ PNG ເປັນ ICO Favicon

ແປງ PNG, JPG, WebP ຫຼື SVG ເປັນ .ico favicon ຫຼາຍຂະໜາດ. ເລືອກຂະໜາດ (16, 32, 48, 64, 128, 256) ແລ້ວດາວໂຫຼດ .ico ດຽວ.

ລອງໃຊ້ໄຟລ໌ຢູ່ໃນທ້ອງຖິ່ນ
🎞️

ຕົວສ້າງ Animated GIF

ລວມຮູບຫຼາຍ ອັນ ເຂົ້ານຳກັນ ເປັນ GIF ເຄື່ອນໄຫວ. ປັບ delay ເຟຣມ, ຄວາມກວ້າງ output, loop ແລະ ຄຸນນະພາບ. ເຂົ້າລະຫັດທັງໝົດໃນບຣາວເຊີ.

ລອງໃຊ້ໄຟລ໌ຢູ່ໃນທ້ອງຖິ່ນ
ກຳລັງນິຍົມ
✍️

ຕົວສ້າງລາຍເຊັນ

ແຕ້ມລາຍເຊັນດ້ວຍເມົາ, ນິ້ວ, ຫຼືປາກກາ, ຫຼືພິມຊື່ຂອງທ່ານດ້ວຍຟອນລາຍມື, ແລ້ວສົ່ງອອກເປັນ PNG ຫຼື SVG ໂປ່ງໃສ.

ລອງໃຊ້

ຄໍາຖາມທີ່ຖາມເລື້ອຍໆ