แปลง PNG เป็น ICO (favicon)

favicon ต้องทำหน้าที่อะไร

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

ไฟล์ .ico มีหลายขนาดอยู่ภายใน เพราะการขยายหรือย่อรูปเดียวตอนแสดงผลจะดูเบลอ เมื่อมีเวอร์ชัน 16, 32, 48 และ 64 พิกเซล ระบบปฏิบัติการหรือเบราว์เซอร์จะแสดงรูปที่พิกเซลสมบูรณ์แบบได้ในทุกบริบท 16 px บนแท็บ 32 px ในรายการบุ๊กมาร์กบนหน้าจอ DPI สูง 48 px บนทางลัดในแถบงานของ Windows และอื่นๆ

เตรียมไฟล์ PNG ต้นฉบับ

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

การติดตั้ง favicon

บันทึกไฟล์ที่ดาวน์โหลดเป็น favicon.ico และวางไว้ในโฟลเดอร์หลักของเว็บไซต์ จากนั้นเพิ่มโค้ดนี้ใน <head> ของทุกหน้า

<link rel="icon" href="/favicon.ico" sizes="any">

แพลตฟอร์มส่วนใหญ่มีการตั้งค่าเฉพาะแทน WordPress เรียกว่า Site Icon อยู่ใต้ Appearance ส่วน Shopify และ Squarespace มีช่อง Favicon ในการตั้งค่าธีม และ Webflow มีอยู่ใน Project Settings อัปโหลดไฟล์ .ico ที่นั่น อ่านคู่มือฉบับเต็มได้ที่ วิธีสร้าง favicon

ไปให้ไกลกว่านั้น

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