Giải thích các định dạng favicon: ICO, PNG, SVG và những gì trình duyệt cần

Vì sao favicon vẫn phức tạp một cách kỳ lạ

Favicon trông như một hình ảnh nhỏ, nhưng nó nằm ở giao điểm của giao diện trình duyệt, dấu trang, tab, lối tắt được ghim, kết quả tìm kiếm, màn hình chính trên di động và các bản cài đặt progressive web app. Mỗi ngữ cảnh lại có những kỳ vọng hơi khác nhau.

Đó là lý do lời khuyên về favicon thường có vẻ lộn xộn. Một số đội chỉ cung cấp một favicon.ico duy nhất vì trước đây như vậy là đủ. Những đội khác tạo ra cả tá tệp mà không biết tệp nào thực sự đang được dùng. Điểm cân bằng hợp lý nhỏ gọn hơn: hiểu ICO, PNG và SVG mỗi loại làm tốt điều gì, rồi cung cấp một bộ gọn nhẹ bao phủ các trình duyệt hiện tại và những ngữ cảnh thiết bị phổ biến.

Favicon không phải là nơi để phô diễn pipeline hình ảnh. Đây là nơi nên nhàm chán, rõ ràng và tương thích.

ICO: định dạng cũ không chịu biến mất

ICO là bộ chứa biểu tượng Windows cổ điển. Nó có thể chứa nhiều ảnh bitmap ở các kích thước khác nhau, thường là 16×16, 32×32 và 48×48 pixel. Điều đó quan trọng vì favicon có thể được hiển thị rất nhỏ trong tab trình duyệt, lớn hơn trong danh sách dấu trang, và lại khác nữa trên các lối tắt Windows.

Chi tiết quan trọng là ICO là một bộ chứa, không chỉ đơn giản là một hình ảnh. Một favicon.ico tốt thường chứa nhiều kích thước raster để trình duyệt hoặc hệ điều hành có thể chọn kích thước gần nhất thay vì phóng to/thu nhỏ một bitmap nhỏ duy nhất.

ICO vẫn hữu ích vì ba lý do:

• Trình duyệt có thể tự động yêu cầu /favicon.ico, ngay cả khi bạn không liên kết nó trong HTML.
• Một số trình duyệt và tích hợp cũ vẫn kỳ vọng có nó.
• Đây là phương án dự phòng an toàn khi các khai báo biểu tượng mới hơn bị bỏ qua.

Điều đó không có nghĩa ICO nên là biểu tượng duy nhất của bạn. Nó bất tiện khi chỉnh sửa, không đặc biệt thân thiện với quy trình hiện đại, và không phù hợp làm nguồn chuẩn cho dấu hiệu thương hiệu. Hãy xem nó là phương án dự phòng tương thích.

Trong thực tế, hãy đặt một /favicon.ico thật ở thư mục gốc của site. Đừng trả về 404 ở đó trừ khi bạn thích log ồn ào và các lần thử lại không cần thiết từ trình duyệt.

PNG: lựa chọn bền bỉ và đáng tin cậy

PNG vẫn là định dạng raster dễ dự đoán nhất cho favicon và touch icon. Nó hỗ trợ trong suốt, được hỗ trợ rộng rãi, và hoạt động nhất quán trên các trình duyệt cũng như nền tảng.

Với favicon, PNG hữu ích khi bạn muốn các biểu tượng có kích thước pixel rõ ràng như 32×32 hoặc 48×48. Với biểu tượng màn hình chính trên di động, PNG gần như là bắt buộc trong một số môi trường. Ví dụ, Apple touch icon trong sử dụng production thông thường dựa trên PNG.

Một vài quy tắc thực tế sẽ hữu ích:

• Xuất từ nguồn vector, không phải từ một bitmap vốn đã nhỏ.
• Làm cho biểu tượng dễ đọc ở 16×16 trước khi quan tâm đến kích thước lớn hơn.
• Thêm đủ khoảng đệm để dấu hiệu không có cảm giác bị cắt trong các ngữ cảnh bo góc hoặc dùng mask.
• Tránh chữ quá nhỏ, nét mảnh và minh họa nhiều chi tiết.

Nén PNG thường không đáng để ám ảnh đối với favicon vì các tệp này rất nhỏ. Dù vậy, đừng cung cấp một touch icon 500 KB chỉ vì nó được xuất thẳng từ công cụ thiết kế. Nếu bạn đã đang rà soát các lựa chọn hình ảnh rộng hơn, cùng cách suy nghĩ có kỷ luật từ các quyết định về định dạng hình ảnh trên web hiện đại cũng áp dụng ở đây: chọn định dạng cho đúng việc, không phải vì nó đang thịnh hành.

SVG: lựa chọn hiện đại, linh hoạt

SVG favicon hấp dẫn vì chúng độc lập với độ phân giải. Một tệp nhỏ duy nhất có thể hiển thị sắc nét ở nhiều kích thước, và có thể được chỉnh sửa trực tiếp trong code hoặc xuất từ phần mềm thiết kế.

Các phiên bản hiện đại của Chromium, Firefox và Safari hỗ trợ SVG favicon. Điều đó khiến SVG trở thành định dạng favicon chính tốt cho nhiều site, đặc biệt khi biểu tượng là logo đơn giản, glyph hoặc dấu hiệu hình học.

Nhưng SVG favicon cũng có những điểm cần lưu ý.

Thứ nhất, SVG nên tự chứa đầy đủ. Đừng phụ thuộc vào font bên ngoài, hình ảnh từ xa hoặc script. Trình duyệt áp dụng các hạn chế với SVG được dùng như hình ảnh, và ngay cả khi thứ gì đó hoạt động trong một trình duyệt, nó có thể thất bại trong trình duyệt khác.

Thứ hai, hãy giữ nó đơn giản về mặt thị giác. SVG không giải quyết một cách thần kỳ bài toán 16 pixel. Một minh họa vector chi tiết vẫn sẽ mờ khi bị ép vào một tab.

Thứ ba, hãy cẩn thận với kiểu dáng động. Một số đội dùng prefers-color-scheme bên trong SVG favicon để biểu tượng thích ứng với giao diện trình duyệt sáng và tối. Cách này có thể hoạt động, nhưng hành vi trình duyệt và caching có thể không đồng đều. Nếu nhận diện thương hiệu quan trọng, một biểu tượng duy nhất, bền chắc thường tốt hơn một biểu tượng thích ứng thông minh.

SVG là nguồn tốt và cũng là định dạng phân phối hiện đại tốt. Nó không phải là lý do để bỏ qua các tệp dự phòng.

Trình duyệt thực sự tìm kiếm gì

Trình duyệt phát hiện favicon theo hai cách chính: liên kết HTML rõ ràng và yêu cầu ngầm định tới thư mục gốc.

Hành vi ngầm định là cách cũ: nếu trình duyệt muốn một biểu tượng và chưa tìm thấy biểu tượng nào, nó có thể yêu cầu /favicon.ico. Đây là lý do tệp ICO ở thư mục gốc vẫn hữu ích ngay cả trên các site hiện đại.

Hành vi rõ ràng dùng các phần tử <link> trong phần head của tài liệu. Một thiết lập hiện đại, gọn nhẹ trông như sau:

<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="/site.webmanifest">

Sau đó manifest có thể trỏ đến các biểu tượng PNG lớn hơn dùng cho các web app có thể cài đặt:

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

Đây không phải là thiết lập hợp lệ duy nhất, nhưng là một nền tảng tốt. Nó cung cấp SVG cho các trình duyệt hiện đại, có phương án dự phòng ICO theo quy ước, bao phủ việc lưu ra màn hình chính trên iOS, và hỗ trợ các ngữ cảnh cài đặt ứng dụng.

Bộ favicon mà hầu hết site nên cung cấp

Với một site marketing thông thường, site tài liệu, ứng dụng SaaS hoặc ấn phẩm, bộ này là đủ:

• /favicon.ico chứa 16×16 và 32×32, tùy chọn thêm 48×48.
• /icon.svg làm favicon hiện đại có thể co giãn.
• /apple-touch-icon.png ở 180×180.
• /icon-192.png và /icon-512.png nếu bạn có web app manifest.

Bạn có thể thêm nhiều kích thước hơn nếu một nền tảng có yêu cầu cụ thể, nhưng đừng tạo mười tệp chỉ vì thói quen. Mỗi tệp bổ sung là thêm một thứ để cache, để quên, đặt sai tên hoặc bỏ stale sau khi tái định vị thương hiệu.

Nếu site của bạn không thể cài đặt và không có manifest, bạn có thể không cần các biểu tượng 192 và 512 pixel. Nếu site của bạn hoạt động như một ứng dụng, có lẽ bạn sẽ cần.

Các lỗi thường gặp

Các lỗi favicon phổ biến nhất không nằm ở tính nghệ thuật. Chúng là vấn đề phân phối.

Một vấn đề là caching quá mạnh. Trình duyệt giữ favicon rất dai. Trong lúc kiểm thử, biểu tượng đã thay đổi có thể không xuất hiện cho đến khi bạn hard refresh, xóa dữ liệu site, dùng tên tệp mới, hoặc kiểm thử trong một hồ sơ mới. Với các lần rebrand ở production, đổi /icon.svg?v=2 có thể hữu ích trong HTML, nhưng /favicon.ico ở thư mục gốc khó hơn vì trình duyệt yêu cầu trực tiếp. Thay thế tệp và chờ cache hết hạn thường là một phần của công việc.

Một vấn đề phổ biến khác là sai MIME type. SVG nên được phục vụ dưới dạng image/svg+xml, PNG là image/png, và ICO thường là image/x-icon hoặc image/vnd.microsoft.icon. Nhiều trình duyệt khá dễ tính, nhưng không phải mọi ngữ cảnh đều vậy. Nếu điều gì đó chỉ thất bại trong một trình duyệt, hãy kiểm tra phản hồi mạng trước khi vẽ lại biểu tượng. Những thói quen tương tự khi debug redirect và HTTP header trong production cũng áp dụng ở đây: nhìn vào phản hồi thực tế, không phải điều CMS tuyên bố rằng nó đang phục vụ.

Vấn đề thứ ba là mật độ thiết kế. Logo hoạt động rất đẹp trên header của website thường thất bại khi làm favicon. Biểu tượng tab là một bài kiểm tra khắc nghiệt. Hãy bỏ chữ, đơn giản hóa hình khối, tăng độ tương phản, và kiểm thử ở kích thước thật. Nếu biểu tượng là nội dung có ý nghĩa bên trong trang, thì các mối quan tâm về accessibility như alt text là quan trọng; với chính favicon, nó là phần trang trí của giao diện trình duyệt, không phải nội dung trang. Để hiểu sự khác biệt, hãy xem hướng dẫn thực dụng về alt text cho hình ảnh của chúng tôi.

<!-- tool-cta:start -->

💡 Hãy thử điều này: Tạo các biến thể ICO, PNG và SVG mà các trình duyệt hiện đại mong đợi trong một lần với Ultimate Favicon Generator.

<!-- tool-cta:end -->

Checklist triển khai đơn giản

Dùng checklist này trước khi phát hành:

1. Bắt đầu từ một bản gốc vector sạch.
2. Kiểm thử dấu hiệu ở 16×16 và 32×32.
3. Xuất một SVG favicon tự chứa đầy đủ.
4. Tạo một ICO dự phòng nhiều kích thước.
5. Xuất Apple touch icon 180×180.
6. Thêm PNG 192×192 và 512×512 nếu dùng manifest.
7. Đặt /favicon.ico ở thư mục gốc của site.
8. Xác minh status code, MIME type và caching header.
9. Kiểm thử ít nhất trên một trình duyệt Chromium, Firefox và Safari nếu đối tượng của bạn có người dùng thiết bị Apple.

Favicon nhỏ, nhưng cũng rất dễ thấy. Một favicon bị hỏng khiến site có cảm giác chưa hoàn thiện. Một favicon được làm tốt sẽ hòa vào giao diện, và đó chính xác là mục đích của nó.