.ico ยังเป็นรูปแบบที่ระบบคาดว่าจะพบที่รากเว็บไซต์ แต่เครื่องมือแปลงออนไลน์ส่วนใหญ่ให้คุณอัปโหลดภาพไปยังเซิร์ฟเวอร์ มาดูวิธีสร้าง favicon.ico หลายขนาดที่ถูกต้องจาก PNG โดยไม่อัปโหลดสิ่งใด
.ico ไม่ใช่แค่ภาพที่เปลี่ยนชื่อ
เปลี่ยนชื่อ logo.png เป็น favicon.ico อย่างเดียวไม่พอ ICO เป็นคอนเทนเนอร์ที่มีส่วนหัวเฉพาะ ระบุจำนวนภาพ ขนาด และตำแหน่งเริ่มต้นของแต่ละภาพในไฟล์ PNG ที่เปลี่ยนชื่อไม่มีส่วนหัวนี้ เบราว์เซอร์ที่ตรวจเข้มจึงปฏิเสธการแสดงผล
ICO ที่ถูกต้องฝังไอคอนเดียวกันหลายความละเอียด เบราว์เซอร์อ่านส่วนหัว เลือกภาพที่ใกล้ขนาดที่ต้องการที่สุด และไม่ต้องขยายภาพ
แปลง PNG เป็น ICO ในสามขั้นตอน
ขั้นแรกเตรียมภาพต้นฉบับ PNG สี่เหลี่ยมจัตุรัสอย่างน้อย 512×512 พิกเซลให้ผลดีที่สุด เพราะทุกขนาดเกิดจากการย่อ หากพื้นหลังโปร่งใส ให้ตัดสินใจก่อนว่าจะเก็บไว้หรือไม่ ความโปร่งใสเหมาะกับแท็บ แต่ iOS และ Android จะแทนด้วยสีดำ
ขั้นที่สองสร้างภาพแต่ละความละเอียด ไฟล์ควรมีอย่างน้อย 16×16, 32×32 และ 48×48 ต้องปรับขนาดด้วยตัวกรองคุณภาพดี ไม่เช่นนั้นขนาดเล็กจะอ่านไม่ออก
ขั้นที่สามรวมไฟล์ ภาพทั้งสามจะถูกบรรจุในคอนเทนเนอร์ ICO เดียว โดยส่วนหัวอธิบายแต่ละรายการ วางผลลัพธ์ที่รากเว็บไซต์ในชื่อ favicon.ico เบราว์เซอร์จะหาเจอแม้ไม่มีแท็ก HTML
ทำไมการแปลงในเครื่องจึงสำคัญ
เครื่องมือแปลง PNG เป็น ICO ส่วนใหญ่อัปโหลดไฟล์ไปยังเซิร์ฟเวอร์ ประมวลผลแล้วส่งกลับ โลโก้ของคุณซึ่งอาจยังไม่เปิดตัวจึงไปอยู่บนเครื่องที่คุณควบคุมไม่ได้ ภายใต้นโยบายเก็บรักษาที่คุณยังไม่ได้อ่าน
แต่เบราว์เซอร์ปัจจุบันทำเองได้ทั้งหมด: ถอดรหัส PNG ปรับขนาดบน canvas เข้ารหัสแต่ละขนาดใหม่ แล้วประกอบเป็น ICO นี่คือสิ่งที่ LFFavicon ทำ ไม่มีคำขอใดส่งภาพของคุณ และปิดแท็บแล้วทุกอย่างจะถูกล้าง
ประโยชน์ไม่ได้มีแค่หลักการ: แปลงได้ทันที ใช้ออฟไลน์ได้เมื่อโหลดหน้าแล้ว ไม่มีคิวและไม่จำกัดจำนวนต่อวัน
.ico เพียงอย่างเดียวไม่พอแล้ว
แปลง PNG เป็น ICO ครอบคลุมแท็บและโปรแกรมเก่า แต่ยังขาดสามบริบท: เบราว์เซอร์ใหม่ที่เลือก SVG คมชัดทุกขนาด หน้าจอหลัก iOS ที่ต้องใช้ PNG ทึบ 180×180 และ Android ที่อ่านเว็บแมนิเฟสต์
เมื่อประมวลผลภาพแล้ว ควรสร้างครบชุดในครั้งเดียว เครื่องมือสร้างจะใช้ต้นฉบับเดียวสร้าง .ico, SVG, ไอคอน Apple Touch และไอคอนแมนิเฟสต์ พร้อมตัวอย่างแต่ละบริบทก่อนดาวน์โหลด
แหล่งข้อมูลต้นทาง
คำถามที่พบบ่อย
ต้องใช้ PNG ขนาดเท่าใดเพื่อสร้าง ICO?
ใช้ภาพสี่เหลี่ยมจัตุรัสอย่างน้อย 512×512 พิกเซล หากเล็กกว่า 128×128 ภาพขนาดใหญ่ในชุดต้องถูกขยายและดูเบลอ SVG ยิ่งดีกว่าเพราะไม่มีข้อจำกัดด้านความละเอียด
.ico เก็บความโปร่งใสไว้หรือไม่?
เก็บไว้ รูปแบบ ICO รองรับช่องอัลฟาเต็มรูปแบบ PNG โปร่งใสจึงยังโปร่งใสในแท็บ แต่ระวังไอคอน iOS เพราะระบบเติมพื้นที่โปร่งใสด้วยสีดำ ควรใส่พื้นหลัง
ควรวางไฟล์ favicon.ico ที่ไหน?
ที่รากโดเมน เข้าถึงได้ผ่าน https://yoursite.com/favicon.ico เบราว์เซอร์และโปรแกรมรวบรวมข้อมูลขอที่อยู่นี้ตามธรรมเนียม แม้ไม่มีแท็ก link ประกาศไว้