UX của favicon: điều làm nên một favicon tuyệt vời

Một favicon tuyệt vời là một biểu tượng đơn giản, có độ tương phản cao, thường là logomark của bạn hoặc một hai chữ cái, vẫn đọc rõ ở kích thước 16x16 pixel trên cả tab trình duyệt sáng lẫn tối, phù hợp với thương hiệu và hiếm khi thay đổi. Mọi nội dung còn lại trong hướng dẫn này (căn theo pixel, màu sắc, khoảng đệm, độ trong suốt, dung lượng tệp) đều phục vụ những mục tiêu đó: giúp website của bạn dễ nhận ra ngay lập tức giữa hàng chục tab đang mở.

Favicon rất nhỏ nhưng xuất hiện ở nhiều nơi: tab trình duyệt, thanh dấu trang, danh sách lịch sử, menu tìm kiếm tab, kết quả tìm kiếm Google trên di động và máy tính, cũng như màn hình chính của điện thoại. Với người dùng mở nhiều tab, tiêu đề thường bị cắt đến mức không còn gì và biểu tượng là dấu hiệu duy nhất còn lại. Vì vậy nó là một phần tử điều hướng thực sự chứ không phải đồ trang trí.

1. Khả năng đọc ở 16x16

Kích thước favicon cổ điển là 16x16 pixel CSS. Trên màn hình tiêu chuẩn, đó đúng là 256 pixel; trên màn hình retina 2x, trình duyệt thường chọn ảnh 32x32 cho cùng không gian đó. Bất cứ thiết kế nào của bạn cũng phải chịu được việc thu nhỏ này.

Giữ cho đơn giản

• Một hình hoặc một đến hai chữ cái. Một chữ cái đậm, một hình tròn kèm biểu tượng hoặc một biểu tượng hình học đơn giản đều hiệu quả. Ba chữ cái hoặc một từ sẽ biến thành nhiễu.
• Một điểm nhấn duy nhất. Nếu bạn không thể mô tả biểu tượng trong năm từ, nó quá phức tạp.
• Không dùng gradient, bóng đổ hay họa tiết mịn. Chúng sẽ thành những vệt nhòe ở kích thước nhỏ.

Căn theo lưới pixel

Ở 16x16, một đường nằm lệch nửa pixel so với lưới sẽ bị khử răng cưa trải trên hai hàng pixel và trông xám, mờ. Hãy đặt các cạnh đúng trên ranh giới pixel nguyên và dùng độ rộng chẵn khi hình đối xứng. Nếu bạn xuất từ công cụ vector, hãy bật tính năng bắt dính pixel, hoặc kiểm tra kết quả sau khi thu nhỏ và sửa thủ công.

Tránh các nét mảnh

Nét vẽ mỏng hơn 2 pixel ở 16x16 (khoảng 12 phần trăm chiều rộng biểu tượng) thường biến mất hoặc nhấp nháy giữa các kích thước. Hãy làm dày nét, bỏ chi tiết bên trong và gộp các khe hở nhỏ. Một ký hiệu đậm, hơi nặng thường dễ đọc hơn một bản thu nhỏ trung thành của logo nhiều chi tiết.

Tinh chỉnh thủ công

Tệp ICO và PNG không có hinting kiểu phông chữ, nên chỉnh sửa pixel thủ công chính là cách tương đương: bạn điều chỉnh từng pixel để các đường cong, đường chéo và phần rỗng (lỗ trong các chữ như "a" hay "e") luôn sắc nét. Thu nhỏ tự động là bản nháp đầu tiên tốt, nhưng vài pixel đặt bằng tay thường tạo nên khác biệt giữa một đốm mờ và một chữ cái dễ nhận ra. Trình chỉnh sửa pixel của MakeFav được tạo ra cho việc này: mở canvas 16x16, sửa các pixel có vấn đề rồi xuất tệp.

2. Độ tương phản trên tab sáng và tối

Trình duyệt ngày nay thường chạy ở chế độ tối, và nhiều người dùng có thanh tab khác với giao diện của trang. Một biểu tượng xanh navy đậm với nền trong suốt có thể hoàn hảo trên tab trắng nhưng gần như vô hình trên tab xám đậm. Hãy luôn kiểm tra cả hai.

Giải pháp thực tế

• Thêm hình nền. Một hình vuông bo góc hoặc hình tròn đặc với màu thương hiệu đảm bảo biểu tượng tự có độ tương phản, bất kể tab ra sao.
• Dùng viền mỏng hoặc quầng sáng. Một đường viền sáng hơn 1px quanh ký hiệu tối (hoặc ngược lại) giữ hình bóng nhìn rõ trên cả hai giao diện, nhưng ở 16x16 nó phải giữ được độ sắc nét, vì vậy hãy kiểm tra.
• Chọn màu thương hiệu tông trung. Các màu như xanh dương đậm, cam, xanh lá hoặc đỏ tím thường hiển thị tốt trên cả nền trắng lẫn nền gần đen. Vàng rất nhạt hoặc xanh navy rất đậm là những màu rủi ro.
• Dùng favicon SVG thích ứng. SVG có thể chứa media query prefers-color-scheme để biểu tượng đổi theo giao diện hệ thống.

<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>

Lưu ý rằng media query phản ánh giao diện của hệ điều hành hoặc trình duyệt, thường là thứ mà thanh tab đi theo, nhưng không phải lúc nào cũng vậy. Mức hỗ trợ favicon SVG cũng khác nhau: Chrome và Firefox xử lý được, trong khi Safari trước nay thường chậm hơn, vì vậy hãy luôn giữ bản dự phòng PNG hoặc ICO. Thiết kế có nền đặc là lựa chọn bền vững nhất vì hoàn toàn không cần logic theo giao diện.

3. Khả năng nhận diện và tính nhất quán thương hiệu

Hãy dùng logomark (biểu tượng hoặc monogram), không dùng toàn bộ logo kèm chữ. Chữ bên trong biểu tượng 16x16 không đọc được, và một logo ngang rộng bị ép vào hình vuông chỉ còn lại một dải nhỏ ở giữa.

• Nếu thương hiệu của bạn có biểu tượng, hãy đơn giản hóa nó cho kích thước nhỏ thay vì chỉ thu nhỏ lại. Một "phiên bản favicon" ít chi tiết hơn là thông lệ tiêu chuẩn.
• Nếu thương hiệu của bạn chỉ là chữ, hãy lấy chữ cái đầu hoặc một cặp chữ cái đặc trưng và đặt bằng phông thương hiệu với độ đậm cao.
• Giữ màu sắc nhất quán với logo, biểu tượng ứng dụng và ảnh đại diện mạng xã hội, để người dùng nhận ra cùng một thương hiệu ở mọi nơi.

Tính khác biệt quan trọng không kém độ trung thực. Hãy nhìn một hàng tab: nếu ba website khác cũng dùng hình tròn xanh, website của bạn sẽ không nổi bật. Một hình dạng hoặc màu sắc khác biệt hữu ích hơn một bản thu nhỏ hoàn toàn trung thực.

4. Màu sắc: bảng màu hạn chế và bão hòa

Với quá ít pixel, mỗi màu thêm vào đều gây rối. Hãy nhắm tới một hoặc hai màu, cùng lắm thêm trắng hoặc đen. Màu bão hòa truyền tải tốt hơn ở kích thước nhỏ so với màu pastel, vốn dễ hòa lẫn vào nền tab.

Hãy vay mượn đôi chút từ tư duy về khả năng truy cập. WCAG yêu cầu độ tương phản tối thiểu 3:1 đối với các đối tượng đồ họa có ý nghĩa (tiêu chí thành công 1.4.11, Non-text Contrast). Favicon không chính thức thuộc phạm vi này, vì nó là phần giao diện trình duyệt chứ không phải nội dung trang, nhưng tỷ lệ 3:1 giữa ký hiệu và nền của nó, cũng như giữa biểu tượng và tab, là một mục tiêu hợp lý. Ngoài ra, đừng truyền đạt thông tin chỉ bằng sắc độ: các biến thể đỏ và xanh lá của cùng một biểu tượng không thể phân biệt với nhiều người mù màu, vì vậy hãy thay đổi hình dạng hoặc thêm một ký hiệu.

5. Hình dạng, khoảng đệm và vùng an toàn

Lấp đầy hình vuông

Tab trình duyệt hiển thị favicon ở kích thước nhỏ cố định, nên lề thừa chỉ làm biểu tượng của bạn nhỏ hơn. Với biểu tượng tab tiêu chuẩn, hãy dùng gần hết canvas, chỉ chừa một hai pixel khoảng thở, để biểu tượng lớn nhất có thể.

Bo góc hay vuông?

Trình duyệt thường không cắt favicon của tab, nên hình bạn vẽ chính là hình người dùng thấy. Một hình vuông bo góc nhẹ trông gọn gàng và cho nền nhất quán; một ký hiệu tự do hoặc hình tròn trên nền trong suốt có thể trông nhẹ nhàng và đặc biệt hơn. Cả hai đều ổn. Hãy chọn một kiểu và giữ cho cả bộ biểu tượng nhất quán.

Apple touch icon

iOS tự thêm góc bo vào apple-touch-icon (kích thước thông dụng là 180x180). Hãy cung cấp một hình vuông tràn viền không bo góc sẵn, nếu không bạn có thể thấy những mảng đen hoặc trắng ở các góc.

Biểu tượng maskable cho Android và PWA

Biểu tượng maskable bị hệ điều hành cắt thành hình tròn, squircle hoặc các hình dạng khác. Hãy giữ toàn bộ nội dung quan trọng bên trong vùng an toàn: một hình tròn đặt giữa biểu tượng với bán kính bằng 40 phần trăm chiều rộng biểu tượng. Hãy kéo màu nền ra đến tận mép để mọi kiểu mặt nạ đều đẹp. Đừng dùng lại favicon tab sát mép làm biểu tượng maskable, vì mặt nạ sẽ cắt mất nó.

6. Độ trong suốt

Độ trong suốt không sao với favicon tab, và nó giúp biểu tượng chỉ gồm ký hiệu nằm gọn trên mọi màu tab. Nhưng nó là vấn đề với Apple touch icon: iOS lấp vùng trong suốt bằng một màu đặc (thường là đen), có thể làm hỏng thiết kế. Hãy luôn cho apple-touch-icon một nền đục với màu thương hiệu. Điều tương tự áp dụng cho biểu tượng maskable và hầu hết trường hợp dùng trên màn hình chính Android, nơi nền đục cho kết quả dễ dự đoán.

7. Tính ổn định: đừng thay đổi quá thường xuyên

Favicon tạo sự nhận diện nhờ lặp lại. Thay đổi liên tục buộc người dùng phải học lại tab nào là của bạn, và còn gây rắc rối kỹ thuật. Trình duyệt lưu đệm favicon rất mạnh, và Google tải cũng như lưu chúng tách biệt với các trang của bạn, nên một biểu tượng mới có thể mất vài ngày hoặc vài tuần để hiển thị trong kết quả tìm kiếm. Google cũng yêu cầu URL favicon ổn định, biểu tượng có kích thước là bội số của 48 pixel (48x48, 96x96, v.v.) và một tệp có thể thu thập dữ liệu (không bị robots.txt chặn). Hãy coi việc đổi favicon là quyết định ở tầm tái định vị thương hiệu, không phải trang trí theo mùa.

8. Trạng thái thông báo và favicon động

Một số ứng dụng web đổi favicon để báo tin nhắn chưa đọc, trạng thái ghi hình hoặc lỗi. Làm tốt thì hữu ích; làm quá thì gây khó chịu.

• Dùng huy hiệu nhỏ (một chấm hoặc số đếm ngắn) ở góc, không thiết kế lại hoàn toàn. Biểu tượng gốc vẫn phải dễ nhận ra.
• Dùng tiết chế. Chỉ dành huy hiệu cho các sự kiện cần người dùng hành động. Đừng tạo hiệu ứng động liên tục cho biểu tượng.
• Giới hạn con số. Ở 16x16 chỉ đọc được một hoặc hai chữ số; hãy hiển thị "9+" hoặc một chấm đơn giản thay vì "137".
• Đặt lại kịp thời khi người dùng đã xử lý xong mục đó, và khôi phục biểu tượng mặc định.
• Đừng chỉ dựa vào màu sắc. Một chấm đỏ cũng nên được hỗ trợ bằng tiêu đề trang, chẳng hạn "(3) Hộp thư đến", để thông tin có sẵn cho mọi người.

Favicon động thường được vẽ lên canvas và thay thế bằng cách cập nhật href của phần tử link biểu tượng. Hãy giới hạn tần suất cập nhật, vì việc liên tục đổi favicon có thể tốn CPU và gây xao nhãng cho người dùng.

9. Hiệu năng

Favicon nhỏ, nhưng vẫn là các yêu cầu có thể bị làm tệ.

• Giữ tệp nhỏ. Một favicon PNG thường từ vài trăm byte đến vài kilobyte. Một SVG đơn giản có thể dưới 1 KB.
• Tránh tệp ICO cồng kềnh. Một ICO nhiều kích thước với các ảnh 16, 32 và 48 pixel là đủ. Nhúng ảnh 256x256 làm dung lượng tăng nhiều lần mà không có lợi ích nhìn thấy được trên tab trình duyệt.
• Thiết lập header bộ nhớ đệm. Phục vụ biểu tượng với thời hạn Cache-Control dài, ví dụ public, max-age=31536000, immutable, và dùng tên tệp có phiên bản hoặc băm khi bạn thực sự thay đổi chúng.
• Khai báo biểu tượng rõ ràng. Trình duyệt mặc định yêu cầu /favicon.ico, vì vậy hãy cung cấp một tệp ngay cả khi bạn khai báo các biểu tượng khác, để tránh nhiễu 404 trong log.
• Nén. Chạy PNG qua trình tối ưu không mất dữ liệu và 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'>

Nếu bạn muốn tạo tất cả các tệp này từ một ảnh nguồn, trình tạo favicon MakeFav sẽ tạo bộ tiêu chuẩn, và trang dành cho nhà phát triển trình bày các tùy chọn tích hợp.

10. Khả năng truy cập

Favicon không có văn bản thay thế và trình đọc màn hình không đọc nó, nên các công cụ truy cập truyền thống như thuộc tính alt không áp dụng. Những điều thực sự quan trọng:

• Tiêu đề trang truyền tải ý nghĩa. Hãy viết các phần tử <title> độc nhất và mô tả rõ. Đừng bao giờ dựa vào biểu tượng để thể hiện trạng thái; hãy phản ánh mọi huy hiệu trong tiêu đề.
• Khả năng nhìn thấy cho người thị lực kém. Độ tương phản cao, hình đậm và biểu tượng lớn giúp những người quét tab bằng mắt.
• Không phụ thuộc màu sắc. Hãy đảm bảo hình dạng hoặc chữ cái phân biệt các trạng thái, không chỉ sắc độ.
• Giảm xao nhãng. Tránh favicon nhấp nháy hoặc có hiệu ứng động, có thể gây vấn đề cho người nhạy cảm với chuyển động.

Checklist UX favicon

Checklist kiểm thử

Đừng tin vào bản xem trước lớn trong công cụ thiết kế. Hãy kiểm thử biểu tượng thật trong điều kiện thật:

1. Nhiều trình duyệt. Kiểm tra Chrome, Firefox, Safari và Edge, vì mỗi trình duyệt chọn biểu tượng và kích thước hơi khác nhau.
2. Chế độ sáng và tối. Chuyển giao diện hệ điều hành và trình duyệt rồi xem thanh tab mỗi lần.
3. Màn hình retina và tiêu chuẩn. Kiểm tra trên màn hình 1x và màn hình 2x hoặc 3x, đồng thời phóng to trong trình duyệt.
4. Thanh dấu trang. Đánh dấu trang và xem biểu tượng có còn dễ đọc bên cạnh các website khác không.
5. Nhiều tab. Mở 20 tab và xem bạn có tìm ra tab của mình ngay trong nháy mắt không.
6. Xem trước SERP của Google. Kiểm tra một kết quả tìm kiếm trên di động sau khi biểu tượng được thu thập lại. Hãy nhớ rằng có thể mất thời gian để cập nhật.
7. Màn hình chính. Thêm website vào màn hình chính iOS và Android và xác nhận biểu tượng không bị cắt, không có góc đen và không quá nhỏ trong mặt nạ.
8. Kiểm tra kỹ thuật. Chạy tên miền của bạn qua công cụ kiểm tra favicon MakeFav để xác nhận các tệp tồn tại, trả về trạng thái 200, có kích thước đúng và được khai báo chính xác trong HTML.

Quy trình làm việc thực tế

1. Bắt đầu từ logomark của bạn và đơn giản hóa nó thành một hình hoặc một chữ cái.
2. Tạo canvas vuông với nền đặc hoặc có hình dạng phù hợp với cả hai giao diện.
3. Xuất các kích thước 32x32 và 16x16 rồi tinh chỉnh phiên bản nhỏ bằng tay trong trình chỉnh sửa pixel.
4. Tạo bộ đầy đủ (ICO, PNG, apple-touch-icon, biểu tượng manifest) bằng trình tạo.
5. Thêm các thẻ link, thiết lập header bộ nhớ đệm, triển khai và xác minh bằng công cụ kiểm tra.

Favicon là một trong những tài nguyên nhỏ nhất trên website của bạn nhưng lại được nhìn thấy thường xuyên nhất. Vài quyết định cẩn thận về độ tương phản, sự đơn giản và tính nhất quán sẽ giúp nó hoạt động tốt trên mọi tab, giao diện và thiết bị.

Câu hỏi thường gặp

Favicon nên có kích thước bao nhiêu?

Hãy thiết kế 16x16 và 32x32 cho tab trình duyệt (trình duyệt dùng 32x32 trên màn hình mật độ cao), cung cấp apple-touch-icon 180x180 cho iOS, và các PNG 192x192 và 512x512 cho Android và PWA. Với kết quả tìm kiếm Google, hãy dùng biểu tượng vuông có kích thước là bội số của 48 pixel, chẳng hạn 48x48 hoặc 96x96. Một nguồn SVG có thể co giãn cho tất cả các kích thước đó.

Tôi có nên dùng toàn bộ logo làm favicon không?

Thường là không. Logo đầy đủ có chữ quá chi tiết và quá rộng so với biểu tượng vuông 16x16. Hãy dùng logomark hoặc monogram gồm một hai chữ cái, và đơn giản hóa để nó vẫn dễ nhận ra khi rất nhỏ.

Làm thế nào để favicon hoạt động tốt trong chế độ tối?

Cách an toàn nhất là cho biểu tượng một hình nền đặc riêng hoặc một đường viền tương phản, để nó không phụ thuộc vào màu tab. Hoặc bạn có thể dùng favicon SVG với media query prefers-color-scheme để hoán đổi màu, đồng thời giữ bản dự phòng PNG hoặc ICO cho các trình duyệt không hỗ trợ biểu tượng SVG. Hãy luôn kiểm tra ở cả giao diện sáng và tối.

Vì sao favicon mới của tôi không hiển thị?

Trình duyệt lưu đệm favicon rất lâu, và Google lưu bản sao riêng, được làm mới theo lịch riêng, thường mất vài ngày hoặc vài tuần. Hãy làm mới cứng trang, xóa bộ nhớ đệm trình duyệt, dùng tên tệp có phiên bản mới, và đảm bảo các thẻ link cùng /favicon.ico ở thư mục gốc trỏ đúng tệp. Bạn có thể xác minh thiết lập bằng công cụ kiểm tra MakeFav.

Có nên hiển thị huy hiệu thông báo trên favicon không?

Có, nếu dùng tiết chế. Một chấm nhỏ hoặc số đếm một hai chữ số giúp người dùng nhận ra điều cần xử lý, nhưng hiệu ứng động liên tục hoặc số lớn làm giảm khả năng đọc và sự chú ý. Hãy luôn phản ánh trạng thái trong tiêu đề trang, khôi phục biểu tượng mặc định khi mục đó đã được xử lý, và đừng chỉ dựa vào màu sắc.