สร้าง Favicon ฟรี

วิธีการทำงาน

เครื่องมือนี้แปลง 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 ได้พิกเซลเหมือนกันแทนที่จะเป็น canvas ว่าง
2. 2
   ตัวเข้ารหัส ICO ที่เขียนขึ้นเองสร้างไฟล์ .ico

   รายการ ICO ขนาดเล็ก (16, 32, 48 px) เข้ารหัสเป็นบิตแมป DIB แบบ BGRA 32 บิตดิบ — BITMAPINFOHEADER พร้อมแถว XOR จากล่างขึ้นบนและมาสก์ AND 1bpp — เพราะคอมโพเนนต์ shell ของ Windows ต้องการรูปแบบ DIB ที่ไม่บีบอัดในขนาดเหล่านั้น เครื่องมือเขียนส่วนหัวไดเรกทอรี 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' ให้เอนจินภาพในตัวของเบราว์เซอร์เข้ารหัสแบบไม่สูญเสีย ระยะขอบ สีพื้นหลัง และการตัดรูปทรง (สี่เหลี่ยม มุมมน หรือวงกลม) ที่เลือกได้จะถูกใช้กับ context ของ canvas ก่อนจับภาพ
4. 4
   JSZip รวมทุกอย่างเป็นการดาวน์โหลดเดียว

   JSZip ประกอบไฟล์ที่สร้างทั้งหมด — favicon.ico, PNG ห้าไฟล์, site.webmanifest พร้อมชื่อแอปของคุณ และ favicon-snippet.html พร้อมแท็ก <link> ที่ถูกต้อง — เป็น blob .zip เดียวที่ดาวน์โหลดลงอุปกรณ์โดยอัตโนมัติ

เครื่องมือที่เกี่ยวข้อง