Cách chuẩn bị favicon cho năm 2025

 (evilmartians.com)
50 điểm bởi xguru 2025-02-13 | 4 bình luận | Chia sẻ qua WhatsApp
  • Khi cách tạo favicon trở nên phức tạp hơn, nhiều trường hợp phải dùng hơn 20 tệp PNG chỉ để hiển thị logo website trên tab trình duyệt hoặc màn hình cảm ứng
  • Để thay thế điều đó, bài viết đề xuất một cách có thể bao phủ phần lớn môi trường với số lượng tệp biểu tượng tương đối ít và cấu hình tối thiểu

Phiên bản rất đơn giản

  • Không cần thiết lập phức tạp, chỉ cần năm biểu tượng cốt lõi và một tệp JSON là đủ

  • Đây là ví dụ các liên kết cơ bản cần đặt trong HTML

    <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"><!-- 180×180 -->

  • Nếu hỗ trợ PWA (Progressive Web App) thì thêm phần sau

    <link rel="manifest" href="/manifest.webmanifest">

  • Đây là cấu trúc ví dụ của tệp manifest.webmanifest

    {  
  "icons": [  
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },  
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },  
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }  
  ]  
}

  • Biểu tượng maskable có thể bị cắt bớt ở viền, vì vậy nên chừa vùng tròn 409×409 làm vùng an toàn

  • Chỉ với cấu hình này, favicon đã có thể hoạt động tốt trên phần lớn trình duyệt và thiết bị phổ biến

Phiên bản giải thích chi tiết

  • favicon bắt nguồn từ “favorite icon”, là biểu tượng nhỏ hiển thị trên tab trình duyệt và những nơi tương tự
  • Safari gần đây cũng đã hỗ trợ favicon một cách đầy đủ
  • Thay vì tạo bộ biểu tượng cho nhiều độ phân giải khác nhau, có thể xử lý hiệu quả bằng SVG, một vài biểu tượng PNG và một manifest đơn giản

Cấu hình favicon tối ưu

  • Với một tệp SVG, vài tệp PNG tối thiểu và một tệp web manifest, có thể hiển thị biểu tượng nhất quán trên nhiều trình duyệt và thiết bị khác nhau
  • SVG là định dạng vector nên có thể phóng to, thu nhỏ linh hoạt khi cần, đồng thời tải nền nên cũng ít tạo gánh nặng hiệu năng
  • PNG chỉ cần chuẩn bị ở những kích thước thực sự cần thiết như biểu tượng cho Apple (apple-touch-icon) và biểu tượng cho PWA
  • Các định dạng cũ như biểu tượng tile của Windows, Safari Pinned Icon, rel=“shortcut” hiện nay hầu như không còn cần thiết trên các trình duyệt mới
  • Một số trình duyệt hoặc công cụ cũ có thể lấy biểu tượng trực tiếp từ đường dẫn /favicon.ico, vì vậy favicon.ico ở thư mục gốc vẫn rất quan trọng

Cách tạo Ultimate Favicon Set

  • Các bước dưới đây là quy trình tự tạo và tối ưu bộ biểu tượng
  • Bước 1: Chuẩn bị SVG
    • Cần chuẩn bị tệp icon.svg với tỷ lệ hình vuông
    • Có thể triển khai chuyển màu cho chế độ sáng/tối bằng CSS media query bên trong <svg>
    • Như ví dụ, có thể dùng @media (prefers-color-scheme: dark) để chỉ định màu cho chế độ tối
  • Bước 2: Tạo tệp ICO
    • Chuyển icon.svg sang ảnh raster ở kích thước 16×16 hoặc 32×32 để tạo favicon.ico
    • Có thể dùng các công cụ như GIMP hoặc Inkscape+ImageMagick
    • Cần chú ý để logo không bị bết hoặc vỡ quá nhiều ở độ phân giải nhỏ
  • Bước 3: Tạo ảnh PNG
    • Chuẩn bị các biểu tượng PNG ở kích thước 512×512, 192×192, 180×180, 512×512 (maskable)
    • apple-touch-icon cho iOS nên làm ở kích thước 180×180, và nên thêm màu nền hoặc chừa khoảng đệm phù hợp
    • Với biểu tượng maskable, cần chừa vùng 409×409 làm vùng an toàn
  • Bước 4: Tối ưu PNG và SVG
    • SVG có thể được nén bằng SVGO, còn PNG có thể tăng mức nén bằng Squoosh
    • Người dùng có thể đang ở môi trường bị giới hạn dữ liệu, nên việc giảm dung lượng tệp là có lợi
  • Bước 5: Gắn biểu tượng vào HTML
    • Về cơ bản, liên kết favicon.ico, icon.svg, apple-touch-icon.png trong thẻ <head> 
      <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">
    • Nếu dùng Webpack, có thể quản lý cache bằng cách thêm hash trong lúc build
    • Cũng có thể dùng favicon khác nhau để phân biệt môi trường staging (phát triển) và production
  • Bước 6: Tạo Web Manifest
    • Thêm thông tin biểu tượng cho PWA trong tệp manifest.webmanifest, rồi liên kết bằng <link rel="manifest" href="/manifest.webmanifest">
    • Ví dụ dưới đây chỉ định các biểu tượng 192×192, 512×512 (maskable), 512×512 
      {  
  "name": "My website",  
  "icons": [  
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },  
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },  
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }  
  ]  
}
    • Trong môi trường Webpack, có thể tự động hóa bằng plugin như webpack-pwa-manifest
  • Qua quy trình như trên, chỉ với số lượng tệp ít vẫn có thể hiển thị favicon phù hợp trên hầu hết trình duyệt và thiết bị
  • Nếu tạo công cụ tự động hóa để vận hành thì sẽ còn thuận tiện hơn

Bài viết liên quan

4 bình luận

 
carnoxen 2025-02-15

SVG Favicon vẫn chưa được hỗ trợ trên Firefox...
 
carnoxen 2025-02-15

À, là Safari.
 
yeppyshiba 2025-02-13

Tôi đã từng làm một web game trong một dự án ở công ty cũ.
Rảnh rỗi nên tôi làm một animation favicon như một easter egg,
và khi triển khai animation bằng spritesheet thì trông khá ra gì phết.
 
xguru 2025-02-13

Tổng hợp về Favicon cho năm 2021
Tôi đã từng đăng một lần vào 4 năm trước, và giờ đã được cập nhật cho phù hợp với hiện tại.