Favicon cần hoạt động đúng ở nhiều nơi cùng lúc: tab trình duyệt, dấu trang, màn hình chính iOS, và biểu tượng của một ứng dụng web được cài trên Android — mỗi nơi lại đòi hỏi kích thước và định dạng tệp riêng.
Vì sao một chữ cái tiếng Việt khó gọn gàng ở kích thước nhỏ
Dùng một chữ cái đầu làm biểu tượng thương hiệu là cách phổ biến, nhưng chữ Quốc ngữ có thêm dấu thanh điệu (sắc, huyền, hỏi, ngã, nặng) và dấu chữ cái (â, ê, ô, ơ, ư, ă) xếp chồng phía trên hoặc dưới chữ cái gốc. Ở kích thước 16×16 pixel, các dấu này rất dễ bị nhòe hoặc biến mất, nên chữ cái không dấu (A, B, T) thường giữ được độ rõ nét tốt hơn chữ có dấu đầy đủ.
Vai trò của thẻ <link> trong <head>
Mỗi định dạng biểu tượng được liên kết bằng thẻ <link rel="icon"> hoặc <link rel="apple-touch-icon"> riêng cùng thuộc tính sizes cho biết kích thước, để trình duyệt chọn phương án phù hợp nhất với ngữ cảnh hiển thị.
Web App Manifest cho PWA
Ứng dụng web tiến bộ cần một tệp site.webmanifest dạng JSON liệt kê các biểu tượng, tên trang và màu chủ đề — đó chính là nơi Android lấy biểu tượng khi cài đặt trang web như một ứng dụng độc lập.
Vì sao cần điều này
- Tạo một bộ biểu tượng đầy đủ ở các kích thước cần thiết từ một hình ảnh gốc duy nhất.
- Nhận mã HTML sẵn sàng của các thẻ <link> để dán vào <head>.
- Đảm bảo trang web hiển thị đúng khi được thêm vào màn hình chính của thiết bị di động.