ตัวสร้าง Apple Touch Icon
สร้าง apple-touch-icon ขนาด 180×180 ที่ iOS ใช้กับบุ๊กมาร์กบนหน้าจอโฮม — พร้อมชุด favicon เต็ม — ในเครื่องภายในเบราว์เซอร์ของคุณ ไม่มีอะไรถูกอัปโหลด
ความเป็นส่วนตัวมาก่อน: ทุกภาพถูกประมวลผลภายในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลด จัดเก็บ หรือส่งไปยังเซิร์ฟเวอร์ใดๆ
ไอคอนที่ iOS วางไว้บนหน้าจอโฮม
เมื่อมีคนเพิ่มเว็บของคุณลงหน้าจอโฮมของ iPhone หรือ iPad iOS จะมองหา apple-touch-icon ขนาด 180×180 ถ้าไม่มี มันจะถอยไปใช้ภาพหน้าจอที่เบลอแทน ตัวสร้างนี้เรนเดอร์ขนาดนั้นเป๊ะ ๆ จากรูปของคุณ — พร้อมพื้นหลังทึบ เพราะ apple-touch-icon ไม่ควรโปร่งใส — และรวมมันไว้ในไฟล์ดาวน์โหลดพร้อมกับ favicon.ico และไอคอน Android
ส่งออกครั้งเดียว ครบทุกแพลตฟอร์ม
แทนที่จะครอปทีละไฟล์ต่ออุปกรณ์ด้วยมือ ให้สร้างทั้งชุดพร้อมกัน: apple-touch-icon สำหรับ iOS, PNG ขนาด 192 และ 512px สำหรับ Android และ PWA และ favicon.ico สำหรับเบราว์เซอร์เดสก์ท็อป พร้อมสไนปเป็ต HTML ไว้อ้างอิงถึงมัน ทั้งหมดทำงานในเบราว์เซอร์ของคุณ อาร์ตแบรนด์ของคุณจึงไม่เคยออกจากอุปกรณ์ของคุณ
คำถามที่พบบ่อย
- ภาพของฉันถูกอัปโหลดเพื่อสร้าง 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 ไปใช้โดยอัตโนมัติ