Favicon (.ico) กับ PNG

รูปแบบ .ico ถูกสร้างขึ้นโดยเฉพาะเพื่อเก็บไอคอนหลายขนาดไว้ในคอนเทนเนอร์ไบนารี่เดียว favicon.ico ที่สร้างมาอย่างดีมีเฟรมขนาด 16×16, 32×32, 48×48 และ 64×64 พิกเซล เมื่อเบราว์เซอร์ต้องการ favicon สำหรับแท็บ เบราว์เซอร์จะเปิดไฟล์ .ico อ่านไดเร็กทอรี ICO และเลือกเฟรมที่ตรงกับขนาดการแสดงผลที่ต้องการมากที่สุด ความสามารถหลายขนาดนี้เป็นข้อได้เปรียบที่ชัดเจนของ .ico เหนือ PNG

PNG เป็นรูปแบบภาพเดียว ไฟล์ PNG มีรูปภาพหนึ่งภาพที่มีความละเอียดเดียวเท่านั้น หากต้องการครอบคลุมหลายขนาดด้วย PNG เพียงอย่างเดียว คุณต้องมีไฟล์หลายไฟล์และแท็ก `<link>` หลายแท็กที่มีแอตทริบิวต์ `sizes=` ที่ชัดเจน นี่เป็นรายละเอียดมากกว่า แต่ให้การควบคุมที่แม่นยำว่าภาพใดจะแสดงในแต่ละความละเอียด PNG ยังรองรับการบีบอัดแบบไม่สูญเสียข้อมูลได้ดีกว่าเฟรม ICO ที่เข้ารหัส BMP ที่ความละเอียดที่กำหนด

ความเข้ากันได้ของเบราว์เซอร์คือจุดที่ .ico ชนะอย่างเด็ดขาด ทุกเบราว์เซอร์ — รวมถึง IE รุ่นเก่า, Edge เก่า, เวอร์ชัน Safari โบราณ และเบราว์เซอร์เฉพาะที่ไม่ชัดเจน — ดึงข้อมูล /favicon.ico จากรูทโดเมนโดยไม่ต้องใช้แท็ก `<link>` ใดๆ แม้ว่าคุณจะละเว้นแท็กลิงก์ทั้งหมด เบราว์เซอร์จะพยายาม GET /favicon.ico เป็นแบบแผน PNG ต้องใช้แท็ก `<link rel='icon' type='image/png'>` ที่ชัดเจนและมีประเภท MIME ที่ถูกต้อง ไม่เช่นนั้นจะถูกละเว้น

การสนับสนุนความโปร่งใสจะเท่ากันระหว่าง .ico และ PNG ทั้งสองรูปแบบรองรับช่องอัลฟ่า 8 บิต (ความโปร่งใสแบบเต็มต่อพิกเซล) อย่างไรก็ตาม .ico จะรักษาความโปร่งใสเฉพาะเมื่อเฟรมภายในใช้การบีบอัด PNG ไม่ใช่ BMP ตัวเข้ารหัส ICO แบบเก่าบางครั้งจะใช้ค่าเริ่มต้นเป็น BMP ซึ่งมีความโปร่งใสที่จำกัด (1 บิต) ใช้ตัวสร้างสมัยใหม่ที่สร้างเฟรม .ico ที่บีบอัด PNG เสมอ

การเปรียบเทียบขนาดไฟล์ขึ้นอยู่กับบริบท 32×32 PNG ไฟล์เดียวมีขนาดเล็กกว่าไฟล์ .ico หลายขนาดที่รวมเฟรม 16, 32, 48 และ 64 พิกเซลเข้าด้วยกัน อย่างไรก็ตาม .ico จะแทนที่ไฟล์ PNG ที่แยกกันสี่ไฟล์ พร้อมด้วยแท็กลิงก์สี่แท็ก สำหรับเพย์โหลดทั้งหมด .ico หลายขนาดที่ได้รับการบีบอัดอย่างดีจะมีขนาดเล็กกว่าชุด PNG ที่เทียบเท่ากันรวมกันเกือบทุกครั้ง

PNG ชนะใจประสิทธิภาพการบีบอัดในทุกขนาด อัลกอริธึมการบีบอัด PNG (DEFLATE/zlib) มีประสิทธิภาพเป็นพิเศษสำหรับโลโก้สีเรียบๆ และอาร์ตเวิร์กสไตล์ไอคอนที่มีขอบคมชัดและจานสีที่จำกัด โลโก้ขนาด 32×32 PNG ที่มีการบีบอัดที่เหมาะสมที่สุดอาจมีขนาดต่ำกว่า 200 ไบต์ เฟรม BMP ที่เทียบเท่าภายใน .ico จะมีขนาด 4 KB เสมอโดยไม่คำนึงถึงเนื้อหารูปภาพ

สำหรับการมีสิทธิ์ไอคอน Fav ของ Google Search รองรับทั้ง .ico และ PNG โปรแกรมรวบรวมข้อมูลของ Google จะดึงไอคอน Fav ที่ลิงก์ใน HTML ของคุณก่อน หรือถอยกลับไปที่ /favicon.ico ข้อกำหนดขั้นต่ำคือ 48 × 48 พิกเซลและ URL ที่เข้าถึงได้แบบสาธารณะ PNG ที่มีขนาดเหมาะสมซึ่งเชื่อมโยงกับ `<link rel='icon' type='image/png' sizes='48x48' href='/favicon-48x48.png'>` จะช่วยตอบสนองสิ่งนี้ เช่นเดียวกับการรวม .ico ที่มีขนาดเท่ากัน

ลักษณะการทำงานของโหมดมืดจะแตกต่างกันไปตามรูปแบบต่างๆ ไฟล์ PNG ไม่สามารถปรับให้เข้ากับโทนสีของผู้ใช้ได้ คุณจะต้องใช้ JavaScript เพื่อสลับแท็กลิงก์ href แบบไดนามิก ซึ่งเปราะบาง รูปแบบ .ico ไม่มีความสามารถในโหมดมืดเลย สำหรับการปรับไอคอน Fav ในโหมดมืด มีเพียง SVG เท่านั้นที่รองรับโดยกำเนิดผ่านบล็อกสไตล์ `@media (prefers-color-scheme: dark)` ที่ฝังไว้ PNG และ .ico ควรจับคู่กับโอเวอร์เลย์ SVG

การตั้งค่าที่ทันสมัยที่สุดจะรวมทั้งสองรูปแบบเข้าด้วยกัน ใช้ `<link rel='icon' href='/favicon.ico'>` เป็นทางเลือกสากล `<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>` เพื่อความชัดของจอประสาทตา และใช้ `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` สำหรับการรองรับโหมดมืดที่ปรับขนาดได้ เบราว์เซอร์ที่เข้าใจไอคอน Favicon ของ SVG ให้เลือก SVG; คนอื่นตกถึง PNG; เบราว์เซอร์รุ่นเก่าใช้ .ico

การรวมระบบปฏิบัติการ Windows เป็นโดเมน .ico เท่านั้น ทางลัดบนเดสก์ท็อป ไอคอน File Explorer และหมุดแถบงาน Windows ทั้งหมดอ่านรูปแบบ .ico หากผู้ใช้คนใดของคุณปักหมุดไซต์ของคุณไว้ที่ทาสก์บาร์ Windows หรือสร้างทางลัดบนเดสก์ท็อปไปยัง URL ของคุณ ระบบจะใช้เฉพาะ /favicon.ico เป็นไอคอนทางลัด ไฟล์ PNG จะถูกละเว้นโดยสิ้นเชิงในบริบทนี้

สำหรับ 180×180 apple-touch-icon, PNG เป็นรูปแบบเดียวที่ถูกต้อง iOS ไม่อ่าน .ico สำหรับไอคอนบนหน้าจอหลัก — โดยเฉพาะอย่างยิ่ง ต้องใช้ PNG ที่ลิงก์ผ่าน `<link rel='apple-touch-icon'>` นี่เป็นกรณีหนึ่งที่ PNG ไม่ได้เป็นเพียงแค่ที่ต้องการแต่ยังจำเป็นอีกด้วย

ไม่ควรมองข้ามการกำหนดค่าเซิร์ฟเวอร์ เว็บเซิร์ฟเวอร์หลายแห่งให้บริการ .ico ด้วยประเภทเนื้อหาที่ไม่ถูกต้อง (`text/plain` แทนที่จะเป็น `image/x-icon`) หากไม่ได้กำหนดค่าไว้อย่างชัดเจน ไฟล์ PNG รองรับประเภท MIME ที่กว้างกว่าทั่วทั้งแพลตฟอร์มโฮสติ้ง หากคุณเห็นว่า favicon.ico ไม่โหลด ให้ตรวจสอบว่าเซิร์ฟเวอร์ของคุณส่งคืน `Content-Type: image/x-icon` หรือ `image/vnd.microsoft.icon` สำหรับคำขอ ICO

favicon generator ส่งออกทั้งสองรูปแบบพร้อมกัน คุณไม่จำเป็นต้องเลือก — แพ็คเกจดาวน์โหลดประกอบด้วย favicon.ico, ไฟล์ PNG แบบสแตนด์อโลนขนาด 32×32 และ 180×180 และ SVG สำหรับสแต็กสมัยใหม่เต็มรูปแบบ การใช้แพ็คเกจนี้หมายความว่าคำถาม ICO กับ PNG จะได้รับคำตอบโดยอัตโนมัติ: ใช้ทั้งสองอย่าง แต่ละข้อในบริบทที่มันยอดเยี่ยม

สำหรับการเปรียบเทียบรูปแบบที่สมบูรณ์ซึ่งครอบคลุมถึง SVG ด้วย โปรดดูที่ best favicon format guide คู่มือนั้นจะอธิบายรูปแบบที่ควรจัดลำดับความสำคัญสำหรับแต่ละกรณีการใช้งาน — เว็บไซต์มาตรฐาน, PWA, ร้านค้าอีคอมเมิร์ซ และเครื่องมือสำหรับนักพัฒนา — และให้เมทริกซ์การตัดสินใจสำหรับการเลือกสแต็ก favicon ของคุณ