วิธีแปลง PNG เป็น ICO
- เลือกไฟล์ PNG ทรงสี่เหลี่ยมจัตุรัส – ควรมีขนาด 256 × 256 พิกเซลขึ้นไป – หรือลากมาวางบนหน้านี้
- ทำเครื่องหมายขนาดไอคอนที่ต้องการ โดยค่าเริ่มต้นจะเลือก 16, 32, 48 และ 256 ไว้
- ดาวน์โหลดไฟล์ ICO รูปที่ไม่ใช่สี่เหลี่ยมจัตุรัสจะถูกจัดให้อยู่กึ่งกลางบนพื้นหลังโปร่งใส
ต้องใช้ไอคอนขนาดไหนบ้าง
| ขนาด | ใช้สำหรับ |
|---|---|
| 16 × 16 | แท็บเบราว์เซอร์ บุ๊กมาร์ก และมุมมองรายการขนาดเล็ก |
| 32 × 32 | แท็บบนหน้าจอความละเอียดสูง แถบงานของ Windows |
| 48 × 48 | ตัวสำรวจไฟล์ของ Windows และเดสก์ท็อปที่สเกลปกติ |
| 64 × 64 และ 128 × 128 | มุมมองไอคอนขนาดใหญ่และจอแสดงผล DPI สูง |
| 256 × 256 | ไอคอนขนาดใหญ่พิเศษในตัวสำรวจไฟล์ของ Windows |
สำหรับ favicon ของเว็บไซต์ ขนาด 16, 32 และ 48 ก็เพียงพอ สำหรับไอคอนโปรแกรมหรือทางลัดบน Windows ให้ใส่ขนาด 256 ด้วย แต่ละขนาดจะถูกเก็บเป็น PNG ภายในไฟล์ ICO – ซึ่งเบราว์เซอร์ทุกตัวและ Windows Vista ขึ้นไปรองรับ – จึงคงความโปร่งใสไว้ได้
วิธีใส่ favicon ในเว็บไซต์
อัปโหลด favicon.ico ไปที่รูท (root) ของเว็บไซต์ เช่น https://example.com/favicon.ico – เบราว์เซอร์จะค้นหาไฟล์ที่ตำแหน่งนั้นโดยอัตโนมัติ คุณยังอ้างอิงไฟล์ได้ใน <head> ของหน้าเว็บ:
<link rel="icon" href="/favicon.ico" sizes="any">- สำหรับหน้าจอโฮมของ iPhone และ iPad ใช้ PNG ขนาด 180 × 180:
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> - สำหรับ Android และเว็บแอปที่ติดตั้งได้ ใช้ PNG ขนาด 192 × 192 และ 512 × 512 ที่ระบุไว้ใน web app manifest ของคุณ
คำถามที่พบบ่อย
ไฟล์ ICO คืออะไร?
ไฟล์ ICO เก็บไอคอนเดียวกันไว้หลายขนาด เพื่อให้ Windows และเบราว์เซอร์เลือกขนาดที่คมชัดที่สุดสำหรับแต่ละตำแหน่งได้ – แท็บ แถบงาน หรือไอคอนขนาดใหญ่บนเดสก์ท็อป
ICO ยังคงความโปร่งใสไหม?
ใช่ แต่ละขนาดถูกเก็บเป็นภาพ PNG ที่รองรับความโปร่งใสเต็มรูปแบบ
แปลง JPG หรือ SVG เป็น ICO ได้ไหม?
ได้ – ลากรูปภาพใดก็ได้มาวาง สำหรับไอคอน SVG ขนาดเล็ก ให้ใช้ตัวแปลงรูปภาพและตั้ง ความกว้างสำหรับไฟล์ SVG ให้ใหญ่ขึ้น เพื่อให้ขนาด 256 พิกเซลยังคมชัด
ไฟล์ของฉันถูกอัปโหลดหรือไม่?
ไม่ ไอคอนถูกสร้างในเบราว์เซอร์ของคุณและไม่ออกจากอุปกรณ์ของคุณเลย