เมื่อค้นหา “ขนาดฟาวิคอน” ยังพบรายการไฟล์สิบห้ารายการที่สืบทอดมาตั้งแต่ปี 2014 แต่ปัจจุบันเพียงหกขนาดก็ครอบคลุมแท็บเบราว์เซอร์ ผลการค้นหา iOS, Android และ PWA แล้ว มาดูว่ามีขนาดใดและใช้ทำอะไร
ขนาดที่จำเป็นจริง ๆ
แต่ละแถวตรงกับการใช้งานที่มีเอกสารรองรับในชุดไฟล์ที่แนะนำ ตารางนี้เน้นชุดเล็กที่ใช้ร่วมกันได้แทนการรวมรูปแบบเก่าจำนวนมาก
| ไฟล์ | ขนาด | การใช้งาน |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | แท็บ บุ๊กมาร์ก เบราว์เซอร์เก่า และโปรแกรมรวบรวมข้อมูล |
| favicon.svg | เวกเตอร์ สี่เหลี่ยมจัตุรัส | เบราว์เซอร์ใหม่ คมชัดทุกขนาด และรองรับโหมดมืด |
| favicon-96x96.png | 96×96 | ผลการค้นหา Google บนมือถือ |
| apple-touch-icon.png | 180×180 | หน้าจอหลัก iOS และ iPadOS ไม่มีความโปร่งใส |
| web-app-manifest-192x192.png | 192×192 | หน้าจอหลัก Android ระบุในเว็บแมนิเฟสต์ |
| web-app-manifest-512x512.png | 512×512 | หน้าจอเริ่มต้น PWA เวอร์ชัน “maskable” |
ทำไมขนาด 16, 32 และ 48 จึงอยู่ใน .ico เดียวกัน
ICO เป็นรูปแบบคอนเทนเนอร์ ไฟล์เดียวเก็บภาพได้หลายขนาด แล้วเบราว์เซอร์เลือกภาพที่เหมาะกับการแสดงผล ซึ่งตรงกับความต้องการเพราะแต่ละบริบทใช้ขนาดต่างกัน
16×16 ใช้กับแท็บบนจอทั่วไป 32×32 รองรับจอความหนาแน่นสูงและส่วนติดต่ออื่นของเบราว์เซอร์ ส่วน 48×48 เติมชุดให้ครบและตรงตามกฎขนาดทวีคูณของ 48 ที่ Google ระบุสำหรับฟาวิคอนในผลการค้นหา
ข้อผิดพลาดที่พบบ่อยที่สุดคือส่ง .ico ที่มีเพียง 16×16 บนจอ Retina ไอคอนจะถูกขยายและดูเบลอตลอดเวลา
180×180 สำหรับ iOS ส่วน 192 และ 512 สำหรับ Android
iOS ไม่อ่านเว็บแมนิเฟสต์เพื่อหาไอคอนหน้าจอหลัก แต่หาแท็ก apple-touch-icon ใช้ขนาดเดียว 180×180 ก็ครอบคลุม iPhone และ iPad รุ่นใหม่ ระบบจะย่อภาพเองสำหรับอุปกรณ์รุ่นเก่า
Android อ่านจากเว็บแมนิเฟสต์แทน ใช้สองรายการก็พอ: 192×192 สำหรับหน้าจอหลัก และ 512×512 สำหรับหน้าจอเริ่มต้นเมื่อติดตั้งเว็บไซต์เป็นแอป ควรประกาศเวอร์ชัน 512 ด้วย purpose “maskable” หมายถึงออกแบบให้ยังดูดีเมื่อตัดเป็นวงกลมหรือสี่เหลี่ยมมุมโค้ง
สำหรับไอคอน maskable ให้วางส่วนสำคัญในพื้นที่ 80% ตรงกลาง ส่วนที่อยู่นอกบริเวณนี้อาจถูกตัดตามผู้ผลิตโทรศัพท์
ควรเริ่มจากภาพต้นฉบับแบบใด
เริ่มจาก SVG ดีที่สุด เพราะปรับเป็นทุกขนาดข้างต้นได้โดยไม่สูญเสียความคมชัด หากไม่มี ให้ใช้ PNG สี่เหลี่ยมจัตุรัสอย่างน้อย 512×512 พิกเซล เพื่อให้แม้แต่ไอคอนหน้าจอเริ่มต้น Android ก็สร้างด้วยการย่อแทนการขยาย
โลโก้แนวนอนพร้อมข้อความใช้ไม่ได้ที่ 16×16 เพราะคำจะกลายเป็นกลุ่มพิกเซลอ่านไม่ออก แยกใช้สัญลักษณ์ หรือเริ่มจากหนึ่งถึงสองตัวอักษรบนพื้นหลังที่ตัดกัน
สุดท้ายตรวจความต่างสีทั้งพื้นหลังสว่างและมืด โลโก้สีดำจะหายไปบนแท็บธีมมืด เวอร์ชันธีมมืดในฟาวิคอน SVG มีไว้แก้ปัญหานี้โดยเฉพาะ
ขนาดที่ไม่จำเป็นแล้ว
เครื่องมือสร้างรุ่นเก่ายังส่งไฟล์สำหรับระบบเดิม เช่น ไทล์ Windows ที่ใช้ mstile-150x150.png และ browserconfig.xml เพิ่มไฟล์เหล่านี้เฉพาะเมื่อแผนการรองรับของคุณระบุระบบดังกล่าวอย่างชัดเจน
ชุด apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 และ 152x152 มาจากยุคที่ iOS ยังปรับขนาดเองไม่ได้ ภาพ 180×180 เพียงภาพเดียวแทนได้ทั้งหมด
การลบประกาศที่ไม่ได้ใช้งานช่วยให้คลังโค้ดและ HTML เรียบง่ายขึ้น ตรวจเบราว์เซอร์และแพลตฟอร์มเป้าหมายก่อนนำการรองรับเดิมออก
แหล่งข้อมูลต้นทาง
คำถามที่พบบ่อย
ยังต้องมี favicon.ico หรือไม่?
ต้องมี แต่เก็บไว้ที่รากเว็บไซต์ก็พอ เบราว์เซอร์ใหม่เลือกใช้ SVG แต่โปรแกรมรวบรวมข้อมูล ตัวรวมเนื้อหา และโปรแกรมอีเมลจำนวนมากยังขอ /favicon.ico โดยไม่อ่าน HTML ไฟล์มีขนาดเพียงไม่กี่กิโลไบต์ จึงควรเก็บไว้
Google ใช้ฟาวิคอนขนาดใดในผลการค้นหา?
Google ขอไอคอนที่ด้านยาวเป็นทวีคูณของ 48 พิกเซล และมักแสดงที่ 48×48 ใช้ PNG 96×96 หรือ SVG ก็เพียงพอ โดยต้องให้โปรแกรมรวบรวมข้อมูลเข้าถึงได้และไม่ถูก robots.txt บล็อก
ฟาวิคอนเป็นสี่เหลี่ยมผืนผ้าได้ไหม?
ในทางเทคนิคได้ แต่ไม่เหมาะกับการแสดงผล ทุกบริบทเตรียมพื้นที่สี่เหลี่ยมจัตุรัสไว้ ภาพผืนผ้าจึงถูกยืดหรือจัดกลางพร้อมพื้นที่ว่างด้านข้าง เริ่มจากสี่เหลี่ยมจัตุรัสเสมอและเพิ่มระยะขอบรอบสัญลักษณ์หากจำเป็น