ไม่มีการอัปโหลด, 100% ในเครื่อง, ไม่มีบัญชี

สร้าง Favicon

อัปโหลดโลโก้หรือไอคอนของคุณและดาวน์โหลด Favicon ทุกขนาดมาตรฐานเป็น PNG รวมถึง Apple Touch Icon และไอคอน PWA ไม่มีข้อมูลออกจากอุปกรณ์

สร้าง Favicon ทำงานอย่างไร

Favicon Generator นำภาพใดก็ตามที่คุณให้มาและปรับขนาดเป็นขนาด favicon มาตรฐานโดยใช้ Canvas drawImage API: 16x16, 32x32, 48x48, 180x180 (Apple touch icon), 192x192 (Android Chrome) และ 512x512 (PWA manifest) ทั้งหกขนาดถูกสร้างในเบราว์เซอร์และดาวน์โหลดเป็นไฟล์ PNG แต่ละไฟล์ ภาพต้นฉบับของคุณไม่เคยออกจากอุปกรณ์

ชุด favicon ที่สมบูรณ์ครอบคลุมไอคอนแท็บเบราว์เซอร์ บุ๊กมาร์ก ทางลัดหน้าจอหลักและหน้าจอ splash ของ PWA การใช้ภาพต้นฉบับความละเอียดสูง (อย่างน้อย 512x512 พิกเซล) จะให้รายละเอียดมากที่สุดสำหรับอัลกอริทึมการลดขนาด แท็ก HTML link ที่คุณต้องการอ้างอิงแต่ละไฟล์ที่สร้างจะแสดงใน snippet ที่คุณสามารถคัดลอกโดยตรงลงในองค์ประกอบ head ของหน้า

เขียนโดย Bastien Sulyan

วิธีใช้ สร้าง Favicon ทีละขั้นตอน

  1. วางภาพต้นฉบับลงบนพื้นที่อัปโหลด ใช้ภาพสี่เหลี่ยมขนาด 512 px หรือใหญ่กว่าเพื่อผลลัพธ์ที่ดีที่สุด
  2. ดูตัวอย่างหกขนาดที่สร้างในแผงผลลัพธ์
  3. ดาวน์โหลดไฟล์ PNG ทั้งหกไฟล์ทีละไฟล์จากแผงผลลัพธ์
  4. คัดลอก HTML snippet ที่แสดงแท็ก link สำหรับทุกขนาด
  5. วางไฟล์ PNG ที่ root ของไซต์และวางแท็ก link ลงใน page head

กรณีการใช้งานที่พบบ่อย

  • นักพัฒนาตั้งค่าเว็บไซต์ใหม่และต้องการ favicon ทุกขนาดที่สร้างจากโลโก้แบรนด์โดยไม่ต้องสมัครสมาชิกเครื่องมือออกแบบ
  • ผู้เขียน PWA สร้างไอคอน 192x192 และ 512x512 ที่จำเป็นใน web app manifest สำหรับการติดตั้งหน้าจอหลัก
  • บล็อกเกอร์รีเฟรชตัวตนของไซต์และแทนที่ favicon เริ่มต้นด้วยไอคอน custom ที่สร้างจากโลโก้ของตน
  • Freelancer ผลิตชุด favicon เต็มรูปแบบสำหรับโปรเจกต์ลูกค้าอย่างรวดเร็วโดยไม่ต้องรอติดตั้งซอฟต์แวร์ออฟไลน์

คำถามที่พบบ่อย

รูปแบบภาพใดบ้างที่สามารถใช้เป็นต้นฉบับ?

รูปแบบใดก็ตามที่เบราว์เซอร์สามารถถอดรหัสได้ทำงานเป็นอินพุต: JPEG, PNG, WebP, GIF และ SVG สำหรับต้นฉบับ SVG เบราว์เซอร์แปลง vector เป็น Canvas ก่อนปรับขนาด ดังนั้น PNG เอาต์พุตจึงเป็นภาพ raster โดยไม่คำนึงถึง

ทำไม favicon ของฉันถึงเบลอในแท็บเบราว์เซอร์?

ขนาด 16x16 และ 32x32 เล็กมาก หากภาพต้นฉบับมีรายละเอียดละเอียดหรือเส้นบาง รายละเอียดเหล่านั้นจะไม่รอดจากการลดขนาด การออกแบบที่เรียบง่าย หนัก พร้อมรูปร่างที่ชัดเจนทำงานได้ดีกว่ามากในขนาดเล็กกว่าภาพประกอบที่ซับซ้อน

เครื่องมือสร้างไฟล์ ICO หรือไม่?

ใช่ นอกจากไฟล์ PNG ทั้งหกไฟล์แล้ว เครื่องมือยังประกอบไฟล์ favicon.ico ที่รวมภาพขนาด 16x16, 32x32 และ 48x48 ไว้ในไฟล์เดียว ซึ่งเป็นสิ่งที่เบราว์เซอร์ Windows รุ่นเก่าและ crawler บางตัวยังคงมองหาที่ root ของไซต์ เบราว์เซอร์สมัยใหม่ใช้แท็ก link ของ PNG ได้อยู่แล้ว ดังนั้นการเผยแพร่ทั้งสองรูปแบบไม่มีต้นทุนเพิ่มและปล่อยให้แต่ละไคลเอนต์เลือกเอง

ภาพต้นฉบับถูกประมวลผลบนเซิร์ฟเวอร์หรือไม่?

ไม่ การเรียก Canvas drawImage ที่สร้างแต่ละขนาดทำงานในแท็บเบราว์เซอร์ของคุณ ภาพต้นฉบับถูกอ่านจากดิสก์ในเครื่องและ PNG เอาต์พุตทั้งหกถูกสร้างในหน่วยความจำและเสนอเป็นการดาวน์โหลด ไม่มีข้อมูลไฟล์ผ่านเซิร์ฟเวอร์

ควรใช้ขนาดใดสำหรับ Apple touch icon?

iOS และ iPadOS ใช้ PNG 180x180 พิกเซลที่อ้างอิงโดยแท็ก link ของ apple-touch-icon ขนาดนี้ใช้เมื่อผู้ใช้เพิ่มไซต์ของคุณไปยังหน้าจอหลักบนอุปกรณ์ Apple เครื่องมือสร้างไฟล์นี้พร้อมกับขนาดอื่น

ฉันสามารถใช้ภาพสี่เหลี่ยมผืนผ้าเป็นต้นฉบับได้หรือไม่?

ได้ แต่เอาต์พุตจะถูก letter-box หรือ pillar-box เพื่อให้พอดีกับ canvas สี่เหลี่ยม เพื่อผลลัพธ์ที่ดีที่สุด เริ่มต้นด้วยภาพสี่เหลี่ยมหรือตัดภาพต้นฉบับให้เป็นสี่เหลี่ยมก่อนใช้เครื่องมือ

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

เก็บทุกอย่างไว้ในเครื่อง, สำรวจเครื่องมือเสริม

เครื่องมือรูปภาพทั้งหมด