แปลงรูปภาพเป็นไอคอนและ favicon
เลือกรูปภาพหนึ่งรูปแล้วเราจะสร้างชุดไอคอนที่สมบูรณ์จากรูปนั้น: ไฟล์ favicon.ico ที่บรรจุหกขนาดไว้ภายใน พร้อมไอคอน PNG สำหรับทุกขนาดที่เบราว์เซอร์และระบบปฏิบัติการต้องการ
วิธีใช้งาน
- 1
เลือกรูปภาพ — ควรเป็น PNG ทรงสี่เหลี่ยมจัตุรัสที่มีพื้นหลังโปร่งใส
- 2
เลือกโหมดการแสดงและขนาดที่ต้องการ
- 3
ดูตัวอย่างทุกขนาดก่อนดาวน์โหลด
- 4
ดาวน์โหลด favicon.ico เพียงอย่างเดียว หรือชุดเต็มพร้อมไอคอน PNG และ manifest
ทำไมรูปภาพเดียวไม่เพียงพอ
เบราว์เซอร์ต้องการ 16 และ 32 พิกเซลสำหรับแท็บ iOS ต้องการ 180 พิกเซลสำหรับหน้าจอโฮม และ Android ต้องการ 192 และ 512 พิกเซลสำหรับ manifest การส่งรูปภาพขนาดใหญ่เพียงรูปเดียวจะทำให้แต่ละอุปกรณ์ต้องย่อขนาดเอง ซึ่งจะดูเบลอในขนาดเล็ก เราจึงสร้างทุกขนาดแยกกันด้วยการปรับความเรียบเนียนคุณภาพสูง
ไฟล์ ICO คืออะไร
ไฟล์เดียวที่บรรจุรูปภาพหลายขนาด ซึ่งระบบจะเลือกขนาดที่เหมาะสมกับแต่ละตำแหน่งเอง เราใส่ขนาด 16, 32, 48, 64, 128 และ 256 พิกเซลไว้ในนั้น — ครอบคลุมสิ่งที่เบราว์เซอร์และ Windows ต้องการทั้งหมด
แสดงเต็มภาพหรือเต็มกรอบและครอบตัด?
ไอคอนเป็นรูปสี่เหลี่ยมจัตุรัสแต่รูปภาพของคุณมักไม่ใช่ แสดงเต็มภาพจะเก็บรูปภาพทั้งหมดไว้และเพิ่มขอบโปร่งใส เหมาะกับโลโก้ เต็มกรอบและครอบตัดจะเติมเต็มสี่เหลี่ยมจัตุรัสและตัดขอบออก เหมาะกับภาพถ่าย
คำถามที่พบบ่อย
- favicon.ico กับไอคอน PNG ต่างกันอย่างไร?
- ICO บรรจุหลายขนาดไว้ด้วยกันและทุกเบราว์เซอร์เข้าใจไฟล์นี้ รวมถึงเบราว์เซอร์รุ่นเก่า ไอคอน PNG แยกต่างหากคือสิ่งที่ iOS, Android และ web manifest ต้องการ ชุดเต็มจะให้คุณทั้งสองแบบ
- ไฟล์เหล่านี้ควรวางไว้ที่ไหน?
- ที่ root ของเว็บไซต์คุณ จากนั้นเพิ่มแท็ก link ที่แสดงด้านล่างเครื่องมือลงในส่วน head ของหน้าเว็บของคุณ
- รูปภาพต้นฉบับที่ดีควรเป็นอย่างไร?
- รูปภาพสี่เหลี่ยมจัตุรัสที่มีพื้นหลังโปร่งใส ขนาด 512 พิกเซลขึ้นไป โลโก้ที่เรียบง่ายจะดูดีกว่ามากที่ขนาด 16 พิกเซล เมื่อเทียบกับงานศิลปะที่มีรายละเอียดมาก
- ความโปร่งใสถูกคงไว้หรือไม่?
- ใช่ครับ/ค่ะ ทุกขนาดถูกสร้างเป็น PNG ทั้งภายในและภายนอกไฟล์ ICO และ PNG รองรับความโปร่งใสได้อย่างสมบูรณ์
- รองรับไฟล์ SVG หรือไม่?
- รองรับครับ/ค่ะ และเป็นต้นฉบับที่ดีที่สุดเท่าที่จะเป็นไปได้ — มันถูกวาดที่ขนาดที่แน่นอนของแต่ละไอคอน ผลลัพธ์จึงคมชัดอย่างสมบูรณ์แบบ
- ไอคอน iOS มีขนาดเท่าไร?
- 180 พิกเซล สำหรับแท็ก apple-touch-icon ถูกเลือกไว้เป็นค่าเริ่มต้นในรายการขนาด
- รูปภาพของฉันถูกอัปโหลดไปยังเซิร์ฟเวอร์หรือไม่?
- ไม่ครับ/ค่ะ การสร้างเกิดขึ้นทั้งหมดในเบราว์เซอร์ของคุณ และไฟล์ ICO เองก็ถูกประกอบขึ้นทีละไบต์บนหน้าเว็บนี้
- site.webmanifest คืออะไร?
- ไฟล์ที่บอก Android ว่าจะใช้ไอคอนใดเมื่อมีคนเพิ่มเว็บไซต์ของคุณลงในหน้าจอโฮม เราสร้างไฟล์นี้ให้พร้อมใช้งานในชุดเต็ม