ฟาวิคอน (Favicon)

ฟาวิคอนต้องทำขนาดกี่พิกเซล

ฟาวิคอนไม่ได้จบที่ขนาดเดียว โดยทั่วไปจะเตรียมไว้หลายขนาดให้เหมาะกับแต่ละที่ที่แสดง เพราะแท็บเบราว์เซอร์ ผลการค้นหาของ Google และหน้าจอหลักของมือถือใช้ขนาดต่างกัน

Google Search Central แนะนำให้ทำฟาวิคอนเป็นสี่เหลี่ยมจัตุรัส (1:1) และเตรียมให้ใหญ่กว่า 48×48 พิกเซล เพื่อให้แสดงผลได้ดีในหลายหน้าจอ ถ้าใช้ไฟล์ตั้งค่าเว็บแอป (Manifest) web.dev แนะนำให้ใส่ไอคอนอย่างน้อย 192×192 และ 512×512

ตารางด้านล่างเป็นรายการเตรียมที่นิยมใช้ ไฟล์ที่ต้องใช้จริงต่างกันไปบ้างตามวิธีทำเว็บไซต์ จึงกำหนดร่วมกับบริษัทรับทำเว็บไซต์ได้

ฟาวิคอนเมื่อกำหนดแล้วควรใช้ไปนาน ๆ ลูกค้าจำร้านจากรูปไอคอนในแท็บและบุ๊กมาร์ก ถ้าเปลี่ยนบ่อยกลับหายากขึ้น

ไฟล์ฟาวิคอนควรเป็น ICO, PNG หรือ SVG

ช่วงนี้นิยมใช้ PNG เป็นหลัก แล้วเพิ่ม ICO และ SVG เมื่อจำเป็น Google แจ้งว่ารองรับหลายฟอร์แมต เช่น ICO · PNG · GIF · JPEG

ICO เป็นฟอร์แมตเก่า ใส่หลายขนาดไว้ในไฟล์เดียวได้ และเกือบทุกเบราว์เซอร์อ่านได้ SVG ขยายเท่าไรก็ไม่แตก แต่ยังไม่ได้ใช้ได้ทุกที่ จึงควรมี PNG ควบคู่เพื่อความปลอดภัย

iPhone ไม่ได้ใช้ฟาวิคอนทั่วไปบนหน้าจอหลัก แต่ใช้ไอคอนแยกชื่อ “apple-touch-icon” ไอคอนนี้ต้องทำเป็นพื้นหลังทึบแทนพื้นโปร่งใส จึงจะดูเรียบร้อยบนหน้าจอหลัก

ฟาวิคอน SVG ทำให้เปลี่ยนสีตามการตั้งค่าหน้าจอโหมดมืดได้ด้วย แต่แต่ละเบราว์เซอร์รองรับต่างกัน ถ้าไม่จำเป็นจริง ดีไซน์แบบเดียวที่มองเห็นได้ทั้งหน้าจอสว่าง · มืดจะง่ายกว่า

ทำฟาวิคอนและติดบนเว็บไซต์อย่างไร

ขอแค่มีไฟล์โลโก้ ก็ทำได้ในไม่กี่ขั้นตอน ไม่ว่าจะทำเองหรือฝากบริษัท ถ้ารู้ลำดับไว้ก็ตรวจผลงานได้ง่าย

เครื่องมือทำเว็บไซต์หรือเฟรมเวิร์กสมัยนี้บางตัว แค่ใส่ไฟล์ไอคอนในโฟลเดอร์ที่กำหนดก็สร้างโค้ดเชื่อมให้อัตโนมัติ ต้องใส่โค้ดเองหรือไม่ ถามบริษัทรับทำเว็บไซต์ได้

ต้องเก็บไฟล์ต้นฉบับขนาดใหญ่ไว้เสมอ เพราะวันหลังถ้าต้องการขนาดใหม่แล้วนำไฟล์เล็กมาขยาย ภาพจะเบลอ

ถ้าใช้ดีไซน์เดียวกับฟาวิคอนไปถึงรูปตัวอย่างเมื่อแชร์ลิงก์และรูปโปรไฟล์โซเชียลมีเดีย ลูกค้าเห็นที่ไหนก็จำได้ง่ายว่าเป็นร้านเดียวกัน

1. 01เลือกส่วนของโลโก้ที่ย่อเล็กแล้วยังจำได้ (ตัวอักษรแรก สัญลักษณ์)
2. 02วางส่วนนั้นให้ใหญ่บนพื้นที่สี่เหลี่ยมจัตุรัส เหลือระยะว่างที่ขอบไว้นิดเดียว
3. 03ทำต้นฉบับขนาดใหญ่อย่าง 512×512 ก่อน แล้วจึงแยกขนาดเล็กที่ต้องใช้ออกมา
4. 04ตรวจว่าเมื่อย่อเป็น 16×16 · 32×32 ยังเห็นรูปทรง ถ้าเละให้ปรับเส้นให้หนาขึ้น
5. 05ใส่โค้ดเชื่อม “icon” · “apple-touch-icon” ไว้ในส่วนหัวของหน้าแรกของเว็บไซต์
6. 06ตรวจทั้งในแท็บเบราว์เซอร์ การเพิ่มไปหน้าจอหลักของมือถือ และแท็บโหมดสว่าง · มืด

ทำไมฟาวิคอนไม่แสดงในผลการค้นหาของ Google

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

ฟาวิคอนนับได้แค่หนึ่งอันต่อที่อยู่เว็บไซต์ (Host) หนึ่งที่อยู่ หน้าแรกของเส้นทางย่อย (เช่น ที่อยู่/shop) ไม่ถูกนับแยก การไม่เปลี่ยนที่อยู่ของไฟล์ฟาวิคอนบ่อย ๆ ก็สำคัญ

แม้ทำตามเงื่อนไขครบ ก็ไม่ได้เปลี่ยนทันที Google แจ้งว่าการกลับมาอ่านใหม่อาจใช้เวลาหลายวันถึงหลายสัปดาห์ และถ้าใช้เครื่องมือตรวจสอบ URL ใน Search Console ขอให้จัดทำดัชนีหน้าแรก อาจเร็วขึ้นเล็กน้อย พึงรู้ไว้ด้วยว่าทำตามเงื่อนไขแล้วก็ไม่ได้รับประกันว่าจะแสดง

ถ้าผลการค้นหาแสดงไอคอนพื้นฐานแทนไอคอนของเรา ส่วนใหญ่เป็นเพราะ Google ยังหาฟาวิคอนไม่เจอ หรือมองว่าไม่ตรงตามเงื่อนไข ลองตรวจเงื่อนไขข้างต้นใหม่ทีละข้อ

ฟาวิคอนของแต่ละธุรกิจควรออกแบบอย่างไร

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

ใช้สีหลักของโลโก้แค่สีเดียวจะชัดที่สุดเมื่อย่อเล็ก การไล่สีหรือเส้นบาง ๆ แทบมองไม่เห็นที่ขนาด 16 พิกเซล

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

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

ความผิดพลาดที่พบบ่อยเรื่องฟาวิคอนมีอะไรบ้าง

ความผิดพลาดที่พบบ่อยที่สุดคือนำโลโก้แนวนอนยาว ๆ มาใส่ในสี่เหลี่ยมจัตุรัสตรง ๆ จนดูเล็กมาก อีกกรณีที่พบบ่อยคือใส่โลโก้สีดำบนพื้นโปร่งใส จนมองไม่เห็นบนแท็บโหมดมืด

บางครั้งไอคอนพื้นฐานของเครื่องมือทำเว็บไซต์ก็ยังค้างอยู่ แค่ดูแท็บสักครั้งก่อนเปิดเว็บไซต์ก็รู้แล้ว จึงต้องตรวจให้แน่

ถ้าเปลี่ยนไฟล์ฟาวิคอนแล้วแต่คอมพิวเตอร์ของคุณยังเห็นแบบเดิม ส่วนใหญ่เป็นเพราะเบราว์เซอร์จำไอคอนเก่าไว้ ลองเปิดด้วยเบราว์เซอร์อื่นหรือหน้าต่างไม่ระบุตัวตน ก็ตรวจได้ว่าเปลี่ยนแล้วหรือยัง

เรื่องฟาวิคอน ควรตรวจอะไรกับบริษัทรับทำเว็บไซต์บ้าง

ถ้าตรวจ 4 เรื่องด้านล่างกับบริษัทไว้ก่อนเปิดเว็บไซต์ ไอคอนจะคมชัดทั้งในแท็บ · การค้นหา · หน้าจอหลักของมือถือ

• ทำไอคอนสำหรับแท็บเบราว์เซอร์ · การค้นหาของ Google · หน้าจอหลักของมือถือให้ครบหรือไม่
• ใส่พื้นหลังหรือเส้นขอบให้มองเห็นบนหน้าจอโหมดมืดด้วยหรือไม่
• ไม่ได้ปิดกั้นโรบอตค้นหาของ Google ไม่ให้อ่านไฟล์ฟาวิคอนใช่ไหม
• ขอรับไฟล์ต้นฉบับ (ขนาดใหญ่) ไว้ได้หรือไม่