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") xuất hiện lần đầu năm 1999 cùng trình duyệt Internet Explorer 5 của Microsoft. Ban đầu nó chỉ là một ảnh nhỏ 16x16 pixel đặt ở thư mục gốc của máy chủ, hiển thị cạnh tên trang khi người dùng thêm trang vào danh sách bookmark ("Favorites").

Ngày nay favicon xuất hiện ở nhiều nơi hơn tab và bookmark: lịch sử duyệt web, gợi ý trên thanh địa chỉ, kết quả tìm kiếm trên điện thoại, màn hình chính iOS và Android, màn hình chờ của PWA.

Định dạng .ico và kỷ nguyên SVG

.ico là định dạng gốc của Microsoft. Khác với PNG hay JPEG, một file .ico là container chứa nhiều ảnh có kích thước khác nhau. Một favicon.ico chuẩn thường gói sẵn các bản 16x16, 32x32 và 48x48 pixel.

Trình duyệt hiện đại còn nhận favicon SVG (Scalable Vector Graphics). SVG giữ nét ở mọi mật độ điểm ảnh mà không cần sinh hàng chục file PNG. Bạn cũng có thể nhúng CSS media query vào chính file SVG để đổi màu biểu tượng theo chế độ sáng hoặc tối của hệ điều hành, như ví dụ dưới đây.

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

Viền đen trên iOS Safari và vùng an toàn trên Android

Icon cho thiết bị di động có hai cái bẫy mà nhiều designer và developer gặp phải: viền đen trên iOS Safari và việc Android cắt icon theo hình dạng của launcher.

Bộ 5 file favicon của AkiTao

Nhiều công cụ tạo favicon cũ xuất một gói ZIP hơn 20 ảnh với đủ kích thước (16x16, 24x24, 57x57, 72x72, 114x114...). Đó là di sản của Internet Explorer và các bản iOS, Android cũ. Khai báo tất cả trong HTML chỉ làm mã nguồn rối và thư mục khó quản lý.

AkiTao chọn số file tối thiểu mà vẫn phủ được trình duyệt hiện đại và thiết bị di động. Bạn chỉ cần 5 file:

• ◆favicon.ico: container chứa bản 16x16 và 32x32, đặt ở thư mục gốc cho trình duyệt cũ và chặn request 404.
• ◆apple-touch-icon.png: 180x180 pixel, nền đục, logo nằm trong vùng an toàn, dùng cho iOS.
• ◆icon-192.png: 192x192 pixel, icon launcher cho Android và PWA.
• ◆icon-512-maskable.png: 512x512 pixel, khai báo purpose: "maskable" cho Android adaptive icon và màn hình chờ PWA.
• ◆manifest.json: mô tả tên app, màu chủ đạo và danh sách icon để hệ điều hành nhận diện ứng dụng.