Favicon là gì và vì sao nó quan trọng với thương hiệu số?

Favicon (viết tắt của "Favorites Icon") được Microsoft giới thiệu lần đầu tiên vào năm 1999 cùng với trình duyệt Internet Explorer 5. Ban đầu, favicon chỉ đơn thuần là một file ảnh tĩnh 16x16 pixel nằm tại thư mục gốc của máy chủ để hiển thị cạnh trang web khi người dùng thêm nó vào danh sách bookmark ("Favorites").

Ngày nay, vai trò của favicon đã vượt xa khỏi tab trình duyệt và bookmark. Nó xuất hiện trong lịch sử duyệt web, thanh địa chỉ gợi ý, kết quả tìm kiếm trên thiết bị di động (Google mobile search results), màn hình chính iOS/Android, và màn hình chờ PWA.

Lịch sử định dạng .ico và Kỷ nguyên Vector SVG

Định dạng .ico truyền thống là một phát minh thông minh của Microsoft. Khác với PNG hay JPEG, .ico không phải là một hình ảnh đơn lẻ, mà là một tệp tin container đa độ phân giải. Một file favicon.ico chuẩn có khả năng chứa đồng thời các phiên bản kích thước 16x16, 32x32 và 48x48 pixel với các bảng màu khác nhau bên trong một tệp duy nhất.

Tuy nhiên, trong kỷ nguyên thiết kế hiện đại, chúng ta có SVG (Scalable Vector Graphics). Khai báo một favicon SVG cho phép biểu tượng tự động giãn nở sắc nét trên mọi mật độ màn hình mà không cần sinh hàng chục file PNG khác nhau. Hơn thế nữa, SVG cho phép lập trình viên nhúng trực tiếp truy vấn CSS media query để tự động đảo màu hoặc điều chỉnh nét biểu tượng dựa trên chế độ sáng/tối của hệ điều hành người dùng.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: #070b14; }
    @media (prefers-color-scheme: dark) {
      path { fill: #00d4ff; }
    }
  </style>
  <path d="M50 15 L85 80 L15 80 Z" />
</svg>

Bẫy Bo Góc Android và Lỗi Viền Đen iOS Safari

Thiết kế biểu tượng cho thiết bị di động ẩn chứa hai cái bẫy lớn mà hầu hết các designer và developer thường mắc phải: lỗi viền đen trên iOS Safari và bẫy bo góc launcher trên Android.

Triết lý 5 File Favicon của AkiTao

Rất nhiều công cụ tạo favicon trực tuyến lỗi thời thường tạo ra một gói ZIP chứa tới hơn 20 file ảnh với đủ loại kích thước khác nhau (16x16, 24x24, 57x57, 72x72, 114x114...). Đây là vết tích kỹ thuật của thời kỳ Internet Explorer và các phiên bản iOS/Android cũ. Việc nạp quá nhiều file rác này làm phức tạp hóa mã nguồn và cấu trúc quản lý thư mục.

Triết lý của AkiTao là tối thiểu hóa số lượng tệp tin nhưng đạt được độ tương thích 100% trên các trình duyệt hiện đại lẫn di động. Bạn chỉ cần đúng 5 file duy nhất:

• ◆favicon.ico: File container chứa kích thước 16x16 và 32x32, đặt ở thư mục root để đáp ứng các trình duyệt cũ và chặn lỗi request 404 ngầm.
• ◆apple-touch-icon.png: Kích thước 180x180 pixel, nền đục, safe zone đầy đủ để hiển thị hoàn hảo trên iOS.
• ◆icon-192.png: Kích thước 192x192 pixel, dùng làm icon launcher cho Android và PWA.
• ◆icon-512-maskable.png: Kích thước 512x512 pixel, dùng cho màn hình chờ (splash screen) PWA và khai báo thuộc tính adaptive icon.
• ◆manifest.json: File mô tả siêu dữ liệu để hệ điều hành nhận dạng ứng dụng và nạp các icon trên di động.