ตัวสร้าง 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 ไปใช้โดยอัตโนมัติ