ตัวสร้าง Favicon

สร้างชุด favicon ครบชุดจากรูปเพียงรูปเดียว — favicon.ico, apple-touch-icon, ไอคอน Android/PWA และสไนปเป็ต HTML — ทั้งหมดในเบราว์เซอร์ของคุณ ไม่มีอะไรถูกอัปโหลด

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

ไอคอนทุกตัวที่เว็บสมัยใหม่ต้องมี ครบในครั้งเดียว

favicon ไม่ใช่ไฟล์เดียวอีกต่อไป เบราว์เซอร์อ่าน favicon.ico ขนาดเล็กสำหรับแท็บและแถบที่อยู่ iOS ต้องการ apple-touch-icon ขนาด 180×180 สำหรับหน้าจอโฮม ส่วน Android และเว็บแอปที่ติดตั้งได้จะดึง PNG ขนาด 192 และ 512px จาก web manifest ตัวสร้างนี้สร้างทั้งหมดนั้นจากรูปต้นฉบับเดียวและให้สไนปเป็ต HTML ที่พร้อมวาง คุณจึงไม่ต้องส่งออกหกขนาดด้วยมือ

จัดเฟรมได้ดังใจ และเก็บเป็นส่วนตัว

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

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

ภาพของฉันถูกอัปโหลดเพื่อสร้าง favicon หรือไม่?
ไม่ ทั้ง favicon.ico ไอคอน PNG และไฟล์ manifest ถูกสร้างขึ้นภายในเบราว์เซอร์ของคุณด้วย Canvas API ภาพของคุณไม่เคยออกจากอุปกรณ์
ฉันจะได้ขนาดและไฟล์อะไรบ้าง?
favicon.ico หลายความละเอียด (16, 32 และ 48px), ไอคอน PNG ขนาด 16, 32, 48, 180 (apple-touch-icon), 192 และ 512px, ไฟล์ site.webmanifest และสตริป HTML สำหรับวางลงใน <head> ของคุณ
ฉันแปลง PNG หรือ SVG เป็น ICO ได้หรือไม่?
ได้ ลากไฟล์ PNG, JPG, SVG หรือ WebP เข้ามาแล้วดาวน์โหลด favicon.ico ของจริง โลโก้ SVG จะถูกแปลงเป็นภาพแรสเตอร์ภายในเครื่องที่ความละเอียดสูงก่อน
ภาพแบบไหนได้ผลดีที่สุด?
ภาพสี่เหลี่ยมจัตุรัสที่มีโลโก้เรียบง่ายและคอนทราสต์สูง ภาพที่ไม่เป็นสี่เหลี่ยมจัตุรัสจะถูกครอบตัดจากกึ่งกลางให้พอดี ใช้ตัวควบคุมระยะขอบในและรูปทรงเพื่อจัดกรอบตามที่คุณต้องการ
ฉันติดตั้ง favicon อย่างไร?
แตกไฟล์แพ็กเกจลงในโฟลเดอร์รากของเว็บไซต์ แล้ววางสตริป HTML ที่ให้มาไว้ใน <head> ของหน้าเว็บ เบราว์เซอร์ส่วนใหญ่จะรับ favicon.ico ไปใช้โดยอัตโนมัติ