UX ของ Favicon: อะไรทำให้ Favicon ยอดเยี่ยม

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

Favicon มีขนาดเล็กมาก แต่ปรากฏในหลายที่ ได้แก่ แท็บเบราว์เซอร์ แถบบุ๊กมาร์ก รายการประวัติ เมนูค้นหาแท็บ ผลการค้นหาของ Google บนมือถือและเดสก์ท็อป และหน้าจอโฮมของโทรศัพท์ สำหรับผู้ใช้ที่เปิดแท็บไว้จำนวนมาก ชื่อหน้ามักถูกตัดจนไม่เหลือ และไอคอนจึงเป็นเบาะแสเดียวที่เหลืออยู่ ซึ่งทำให้มันเป็นองค์ประกอบการนำทางจริง ๆ ไม่ใช่แค่การตกแต่ง

1. ความชัดเจนที่ขนาด 16x16

ขนาด favicon แบบดั้งเดิมคือ 16x16 CSS พิกเซล บนจอแสดงผลมาตรฐานนั่นคือ 256 พิกเซลพอดี ส่วนบนจอ retina 2x เบราว์เซอร์มักเลือกภาพ 32x32 สำหรับพื้นที่เดียวกัน สิ่งที่คุณออกแบบต้องทนต่อการย่อขนาดนี้ได้

ทำให้เรียบง่าย

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

จัดให้ตรงกับกริดพิกเซล

ที่ 16x16 เส้นที่วางเยื้องจากกริดครึ่งพิกเซลจะถูกทำ anti-alias คร่อมสองแถวพิกเซล และดูเทาและนุ่ม ควรวางขอบให้ตรงกับขอบพิกเซลเต็ม และใช้ความกว้างเป็นเลขคู่เมื่อรูปร่างสมมาตร หากคุณส่งออกจากเครื่องมือเวกเตอร์ ให้เปิดการ snap กับพิกเซล หรือตรวจผลลัพธ์ที่ย่อแล้วและแก้ด้วยมือ

หลีกเลี่ยงเส้นบาง

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

ปรับด้วยมือ

ไฟล์ ICO และ PNG ไม่มีการทำ hinting แบบฟอนต์ ดังนั้นการแก้พิกเซลด้วยมือจึงเทียบเท่ากัน คุณปรับพิกเซลทีละจุดเพื่อให้เส้นโค้ง เส้นทแยง และ counter (ช่องว่างในตัวอักษรอย่าง "a" หรือ "e") คมชัด การย่อขนาดอัตโนมัติเป็นร่างแรกที่ดี แต่พิกเซลที่วางด้วยมือเพียงไม่กี่จุดมักสร้างความแตกต่างระหว่างก้อนเลือนกับตัวอักษรที่จดจำได้ เครื่องมือแก้ไขพิกเซลของ MakeFav สร้างมาเพื่องานนี้ เปิดแคนวาส 16x16 แก้พิกเซลที่มีปัญหา แล้วส่งออก

2. คอนทราสต์บนแท็บสีสว่างและสีมืด

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

วิธีแก้ที่ใช้ได้จริง

• เพิ่มรูปร่างพื้นหลัง สี่เหลี่ยมมุมโค้งหรือวงกลมทึบในสีแบรนด์รับประกันว่าสัญลักษณ์มีคอนทราสต์ของตัวเอง ไม่ว่าแท็บจะเป็นแบบใด
• ใช้เส้นขอบบางหรือฮาโล ขอบสว่างกว่า 1px รอบสัญลักษณ์สีเข้ม (หรือกลับกัน) ช่วยให้เห็นเงาร่างได้ในทั้งสองธีม แต่ที่ 16x16 ต้องคมชัด จึงควรทดสอบ
• เลือกสีแบรนด์โทนกลาง สีอย่างน้ำเงินสด ส้ม เขียว หรือม่วงแดง มักใช้ได้ทั้งบนพื้นขาวและพื้นเกือบดำ สีเหลืองอ่อนมากหรือกรมท่าเข้มมากเป็นสีที่เสี่ยง
• ใช้ SVG favicon แบบปรับตัวได้ SVG สามารถใส่ media query prefers-color-scheme เพื่อให้ไอคอนเปลี่ยนตามธีมของระบบ

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

โปรดทราบว่า media query สะท้อนธีมของระบบปฏิบัติการหรือเบราว์เซอร์ ซึ่งมักเป็นสิ่งที่แถบแท็บทำตาม แต่ไม่เสมอไป การรองรับ SVG favicon ก็ต่างกันไป Chrome และ Firefox รองรับ ส่วน Safari ตามหลังมาโดยตลอด ดังนั้นควรเก็บ PNG หรือ ICO สำรองไว้เสมอ การออกแบบแบบมีพื้นหลังทึบเป็นตัวเลือกที่แข็งแรงที่สุด เพราะไม่ต้องใช้ตรรกะเรื่องธีมเลย

3. การจดจำได้และความสอดคล้องของแบรนด์

ใช้โลโก้มาร์ก (สัญลักษณ์หรือโมโนแกรม) ไม่ใช่โลโก้เต็มที่มีโลโก้ตัวอักษรประกอบ ข้อความในไอคอน 16x16 อ่านไม่ออก และโลโก้แนวนอนกว้างที่ถูกบีบลงในสี่เหลี่ยมจัตุรัสจะเหลือเพียงแถบเล็ก ๆ ตรงกลาง

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

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

4. สี: จานสีที่จำกัดและอิ่มตัว

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

ลองยืมแนวคิดด้านการเข้าถึงมาใช้บ้าง WCAG กำหนดคอนทราสต์อย่างน้อย 3:1 สำหรับวัตถุกราฟิกที่สื่อความหมาย (เกณฑ์ความสำเร็จ 1.4.11 Non-text Contrast) Favicon ไม่ได้อยู่ในข้อกำหนดนี้อย่างเป็นทางการ เพราะเป็นส่วนของเบราว์เซอร์ ไม่ใช่เนื้อหาของหน้า แต่คอนทราสต์ 3:1 ระหว่างสัญลักษณ์กับพื้นหลัง และระหว่างไอคอนกับแท็บ เป็นเป้าหมายที่สมเหตุสมผล และควรหลีกเลี่ยงการสื่อสารอะไรด้วยสีเพียงอย่างเดียว ไอคอนเวอร์ชันสีแดงกับสีเขียวของไอคอนเดียวกันแยกไม่ออกสำหรับผู้ที่ตาบอดสีหลายคน จึงควรเปลี่ยนรูปร่างหรือเพิ่มสัญลักษณ์

5. รูปร่าง ระยะขอบ และโซนปลอดภัย

เติมให้เต็มสี่เหลี่ยม

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

มุมโค้งหรือเหลี่ยม?

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

Apple touch icon

iOS เพิ่มมุมโค้งของตัวเองให้ apple-touch-icon (ขนาดปกติคือ 180x180) ควรส่งสี่เหลี่ยมเต็มพื้นที่โดยไม่ทำมุมโค้งไว้ล่วงหน้า มิฉะนั้นอาจเกิดเศษสีเข้มหรือสีขาวที่มองเห็นได้ตรงมุม

Maskable icon สำหรับ Android และ PWA

Maskable icon ถูกระบบปฏิบัติการครอปเป็นวงกลม squircle หรือรูปร่างอื่น ควรเก็บเนื้อหาสำคัญทั้งหมดไว้ในโซนปลอดภัย: วงกลมที่อยู่กึ่งกลางไอคอนโดยมีรัศมี 40 เปอร์เซ็นต์ของความกว้างไอคอน ขยายสีพื้นหลังไปจนถึงขอบทั้งหมดเพื่อให้มาสก์แบบใดก็ดูถูกต้อง อย่านำ favicon แท็บที่ชิดขอบมาใช้เป็น maskable icon เพราะมาสก์จะตัดมันออก

6. ความโปร่งใส

ความโปร่งใสใช้ได้กับ favicon ของแท็บ และเป็นสิ่งที่ทำให้ไอคอนที่มีแต่สัญลักษณ์วางบนสีแท็บใดก็ได้อย่างสะอาดตา แต่เป็นปัญหาสำหรับ Apple touch icon เพราะ iOS เติมพื้นที่โปร่งใสด้วยสีทึบ (โดยทั่วไปคือสีดำ) ซึ่งอาจทำลายงานออกแบบ ควรให้ apple-touch-icon มีพื้นหลังทึบในสีแบรนด์ของคุณเสมอ เช่นเดียวกับ maskable icon และกรณีการใช้งานบนหน้าจอโฮมของ Android ส่วนใหญ่ ที่พื้นหลังทึบให้ผลลัพธ์ที่คาดเดาได้

7. ความคงที่: อย่าเปลี่ยนบ่อยเกินไป

Favicon สร้างการจดจำผ่านการเห็นซ้ำ ๆ การเปลี่ยนบ่อยบังคับให้ผู้ใช้ต้องเรียนรู้ใหม่ว่าแท็บไหนเป็นของคุณ และยังทำให้เกิดปัญหาทางเทคนิคด้วย เบราว์เซอร์แคช favicon อย่างเข้มงวด และ Google ดึงและจัดเก็บ favicon แยกจากหน้าเว็บของคุณ ไอคอนใหม่จึงอาจใช้เวลาหลายวันหรือหลายสัปดาห์กว่าจะปรากฏในผลการค้นหา Google ยังกำหนดให้ URL ของ favicon คงที่ ไอคอนมีขนาดเป็นพหุคูณของ 48 พิกเซล (48x48, 96x96 และต่อไป) และเป็นไฟล์ที่ครอลได้ (ไม่ถูกบล็อกด้วย robots.txt) ควรมองการเปลี่ยน favicon เป็นการตัดสินใจระดับรีแบรนด์ ไม่ใช่การตกแต่งตามฤดูกาล

8. สถานะการแจ้งเตือนและ favicon แบบไดนามิก

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

• ใช้แบดจ์ขนาดเล็ก (จุดหรือตัวเลขสั้น ๆ) ที่มุม ไม่ใช่ออกแบบใหม่ทั้งหมด ไอคอนพื้นฐานควรยังจดจำได้
• ใช้อย่างประหยัด สงวนแบดจ์ไว้สำหรับเหตุการณ์ที่ต้องการให้ผู้ใช้ดำเนินการ อย่าทำให้ไอคอนเคลื่อนไหวต่อเนื่อง
• จำกัดตัวเลข ที่ 16x16 อ่านออกเพียงหนึ่งหรือสองหลัก ให้แสดง "9+" หรือจุดธรรมดาแทน "137"
• รีเซ็ตทันที เมื่อผู้ใช้จัดการรายการนั้นแล้ว และคืนไอคอนเริ่มต้น
• อย่าพึ่งพาสีเพียงอย่างเดียว จุดสีแดงควรมีชื่อหน้าเว็บสนับสนุนด้วย เช่น "(3) Inbox" เพื่อให้ข้อมูลเข้าถึงได้สำหรับทุกคน

โดยทั่วไป favicon แบบไดนามิกจะถูกวาดลงบนแคนวาสแล้วสลับเข้าไปโดยอัปเดต href ของ element link ของไอคอน ควรจำกัดความถี่ของการอัปเดต เพราะการเปลี่ยน favicon ตลอดเวลาอาจใช้ CPU และรบกวนผู้ใช้

9. ประสิทธิภาพ

Favicon มีขนาดเล็ก แต่ก็ยังเป็นคำขอที่อาจทำได้ไม่ดี

• รักษาไฟล์ให้เล็ก PNG favicon โดยทั่วไปมีขนาดไม่กี่ร้อยไบต์ถึงไม่กี่กิโลไบต์ SVG แบบง่ายอาจเล็กกว่า 1 KB
• หลีกเลี่ยงไฟล์ ICO ที่บวม ICO หลายขนาดที่มีภาพ 16, 32 และ 48 พิกเซลก็เพียงพอ การฝังภาพ 256x256 ทำให้ขนาดไฟล์เพิ่มหลายเท่าโดยไม่มีประโยชน์ที่มองเห็นได้ในแท็บเบราว์เซอร์
• ตั้งค่า caching header ให้บริการไอคอนด้วยอายุ Cache-Control ที่ยาว เช่น public, max-age=31536000, immutable และใช้ชื่อไฟล์ที่มีเวอร์ชันหรือแฮชเมื่อคุณเปลี่ยนไอคอน
• ประกาศไอคอนอย่างชัดเจน เบราว์เซอร์ร้องขอ /favicon.ico เป็นค่าเริ่มต้น ดังนั้นควรมีไฟล์นี้แม้คุณจะประกาศไอคอนอื่นไว้แล้ว เพื่อหลีกเลี่ยง 404 ที่รกในบันทึกของคุณ
• บีบอัด ผ่าน PNG ไปยังตัวเพิ่มประสิทธิภาพแบบไม่สูญเสียข้อมูล และ minify SVG

<link rel='icon' href='/favicon.ico' sizes='32x32'>
<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='manifest' href='/manifest.webmanifest'>

หากคุณต้องการสร้างไฟล์เหล่านี้ทั้งหมดจากภาพต้นฉบับเดียว เครื่องมือสร้าง favicon ของ MakeFav สร้างชุดมาตรฐานให้ และหน้านักพัฒนาอธิบายตัวเลือกการผสานรวม

10. การเข้าถึง

Favicon ไม่มีข้อความ alt และโปรแกรมอ่านหน้าจอไม่ประกาศ ดังนั้นเครื่องมือการเข้าถึงแบบดั้งเดิมอย่างแอตทริบิวต์ alt จึงใช้ไม่ได้ สิ่งที่สำคัญจริง ๆ คือ

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

เช็กลิสต์ UX ของ Favicon

เช็กลิสต์การทดสอบ

อย่าเชื่อภาพตัวอย่างขนาดใหญ่ในเครื่องมือออกแบบของคุณ ทดสอบไอคอนจริงในสภาพการใช้งานจริง

1. เบราว์เซอร์หลายตัว ตรวจสอบ Chrome, Firefox, Safari และ Edge เพราะแต่ละตัวเลือกไอคอนและขนาดต่างกันเล็กน้อย
2. โหมดสว่างและโหมดมืด สลับธีมของระบบปฏิบัติการและเบราว์เซอร์ แล้วดูแถบแท็บทุกครั้ง
3. จอ retina และจอมาตรฐาน ตรวจสอบบนจอ 1x และจอ 2x หรือ 3x และซูมในเบราว์เซอร์
4. แถบบุ๊กมาร์ก บุ๊กมาร์กหน้าเว็บแล้วดูว่าไอคอนยังอ่านออกเมื่ออยู่ข้างเว็บไซต์อื่นหรือไม่
5. แท็บจำนวนมาก เปิด 20 แท็บแล้วดูว่าคุณหาแท็บของคุณเจอได้ในพริบตาหรือไม่
6. ตัวอย่าง Google SERP ตรวจสอบผลการค้นหาบนมือถือหลังจากไอคอนถูกครอลใหม่ โปรดจำไว้ว่าอาจใช้เวลาในการอัปเดต
7. หน้าจอโฮม เพิ่มเว็บไซต์ลงหน้าจอโฮมของ iOS และ Android และยืนยันว่าไอคอนไม่ถูกตัด ไม่มีมุมสีดำ และไม่เล็กเกินไปภายในมาสก์
8. การตรวจสอบทางเทคนิค ตรวจสอบโดเมนของคุณด้วยเครื่องมือตรวจสอบ favicon ของ MakeFav เพื่อยืนยันว่าไฟล์มีอยู่ ตอบสถานะ 200 มีขนาดที่ถูกต้อง และประกาศใน HTML อย่างถูกต้อง

ขั้นตอนการทำงานที่ใช้ได้จริง

1. เริ่มจากโลโก้มาร์กของคุณและทำให้เรียบง่ายเหลือรูปร่างหรือตัวอักษรเดียว
2. สร้างแคนวาสสี่เหลี่ยมจัตุรัสที่มีพื้นหลังทึบหรือเป็นรูปร่างซึ่งใช้ได้ทั้งสองธีม
3. ส่งออกขนาด 32x32 และ 16x16 และปรับแต่งเวอร์ชันเล็กด้วยมือในเครื่องมือแก้ไขพิกเซล
4. สร้างชุดเต็ม (ICO, PNG, apple-touch-icon, ไอคอน manifest) ด้วยเครื่องมือสร้าง
5. เพิ่มแท็ก link ตั้งค่า cache header ปรับใช้งาน และตรวจสอบด้วยเครื่องมือตรวจสอบ

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

คำถามที่พบบ่อย

Favicon ควรมีขนาดเท่าไร

ออกแบบที่ 16x16 และ 32x32 สำหรับแท็บเบราว์เซอร์ (เบราว์เซอร์ใช้ 32x32 บนจอความละเอียดสูง) จัดเตรียม apple-touch-icon ขนาด 180x180 สำหรับ iOS และ PNG ขนาด 192x192 และ 512x512 สำหรับ Android และ PWA สำหรับผลการค้นหาของ Google ให้ใช้ไอคอนสี่เหลี่ยมจัตุรัสที่มีขนาดเป็นพหุคูณของ 48 พิกเซล เช่น 48x48 หรือ 96x96 ต้นฉบับ SVG ปรับสเกลได้ทุกขนาดเหล่านี้

ควรใช้โลโก้เต็มเป็น favicon ไหม

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

ทำอย่างไรให้ favicon ใช้งานได้ในโหมดมืด

วิธีที่ปลอดภัยที่สุดคือให้ไอคอนมีรูปร่างพื้นหลังทึบของตัวเองหรือเส้นขอบที่ตัดกัน เพื่อไม่ให้ขึ้นกับสีแท็บ อีกทางหนึ่งคือใช้ SVG favicon ที่มี media query prefers-color-scheme เพื่อสลับสี และเก็บ PNG หรือ ICO สำรองไว้สำหรับเบราว์เซอร์ที่ไม่รองรับไอคอน SVG ทดสอบทั้งธีมสว่างและมืดเสมอ

ทำไม favicon ใหม่ของฉันไม่แสดง

เบราว์เซอร์แคช favicon เป็นเวลานาน และ Google เก็บสำเนาของตัวเองซึ่งรีเฟรชตามกำหนดเวลาของตัวเอง มักใช้เวลาหลายวันหรือหลายสัปดาห์ ให้รีเฟรชหน้าแบบ hard-refresh ล้างแคชเบราว์เซอร์ ใช้ชื่อไฟล์เวอร์ชันใหม่ และตรวจสอบให้แน่ใจว่าแท็ก link และ /favicon.ico ที่ root ชี้ไปยังไฟล์ที่ถูกต้อง คุณสามารถตรวจสอบการตั้งค่าได้ด้วยเครื่องมือตรวจสอบของ MakeFav

การแสดงแบดจ์แจ้งเตือนบน favicon เป็นความคิดที่ดีไหม

ได้ หากใช้อย่างประหยัด จุดเล็ก ๆ หรือตัวเลขหนึ่งถึงสองหลักช่วยให้ผู้ใช้สังเกตเห็นสิ่งที่ต้องดำเนินการ แต่แอนิเมชันที่ต่อเนื่องหรือตัวเลขใหญ่จะลดความชัดเจนและทำให้เสียสมาธิ ควรสะท้อนสถานะในชื่อหน้าเสมอ คืนไอคอนเริ่มต้นเมื่อจัดการรายการแล้ว และอย่าพึ่งพาสีเพียงอย่างเดียว