Kích thước, định dạng và thẻ HTML của favicon
Favicon là một tệp nhỏ, nhưng trình duyệt, điện thoại và ứng dụng web đã cài đặt lại tìm các kích thước khác nhau. Hướng dẫn này giải thích website cần những tệp nào, cách khai báo chúng trong HTML và cách thiết kế một biểu tượng vẫn dễ nhận ra ở kích thước 16 pixel.
Favicon là gì
Favicon (viết tắt của “favourites icon”, tức biểu tượng mục yêu thích) là hình ảnh nhỏ giúp nhận diện một website trên thẻ trình duyệt, dấu trang và danh sách lịch sử. Điện thoại dùng phiên bản lớn hơn khi trang được thêm vào màn hình chính, ứng dụng web đã cài đặt dùng biểu tượng trong manifest của chúng, và một số công cụ tìm kiếm hiển thị favicon bên cạnh kết quả. Vì những nơi này dùng các kích thước khác nhau, một website thường cung cấp một bộ nhỏ gồm vài tệp.
Favicon ICO, PNG và SVG
| Định dạng | Nội dung | Điều cần biết |
|---|---|---|
ICO (favicon.ico) | Nhiều kích thước trong một tệp, thường là 16, 32 và 48 pixel | Định dạng lâu đời nhất. Nhiều trình duyệt yêu cầu /favicon.ico từ thư mục gốc của trang ngay cả khi trang không liên kết đến tệp này, nên đây là một phương án dự phòng hữu ích. |
| PNG | Mỗi tệp một kích thước, có độ trong suốt | Được khai báo kèm thuộc tính sizes để trình duyệt có thể chọn tệp phù hợp. Cũng được dùng cho Apple touch icon và các biểu tượng trong manifest. |
| SVG | Hình vẽ vector co giãn được đến mọi kích thước | Được hầu hết trình duyệt máy tính hiện nay hỗ trợ, nhưng không phải mọi trình duyệt, vì vậy hãy giữ cả tệp ICO hoặc PNG. Favicon SVG có thể thích ứng với giao diện tối bằng CSS. |
Tệp ICO là một vùng chứa nhỏ: phần đầu tệp liệt kê từng ảnh kèm kích thước và vị trí, và các ảnh có thể được lưu dưới dạng dữ liệu PNG. Công cụ Tạo favicon của LeedyBox tạo một tệp favicon.ico chứa các ảnh PNG 16, 32 và 48 pixel, cùng các tệp PNG cho những kích thước khác.
Các kích thước phổ biến và nơi sử dụng
| Kích thước (pixel) | Tệp điển hình | Mục đích điển hình |
|---|---|---|
| 16 × 16 | favicon-16x16.png, bên trong favicon.ico | Thẻ và dấu trang trên màn hình thông thường |
| 32 × 32 | favicon-32x32.png, bên trong favicon.ico | Thẻ trên màn hình mật độ cao, một số lối tắt |
| 48 × 48 | bên trong favicon.ico | Biểu tượng lối tắt và biểu tượng màn hình nền cỡ lớn hơn trên một số hệ thống |
| 180 × 180 | apple-touch-icon.png | Biểu tượng màn hình chính trên iPhone và iPad |
| 192 × 192 | android-chrome-192x192.png | Biểu tượng màn hình chính trên Android, được khai báo trong manifest |
| 512 × 512 | android-chrome-512x512.png | Hộp thoại cài đặt và màn hình chờ của ứng dụng web |
Hãy bắt đầu từ một ảnh nguồn hình vuông có kích thước tối thiểu 512 × 512 pixel, hoặc từ một tệp SVG. Ảnh nguồn nhỏ phải được phóng to cho các biểu tượng lớn hơn và sẽ trông mờ. Logo không vuông cần được thêm khoảng trống xung quanh hoặc phải được cắt.
Apple touch icon không nên trong suốt: một số thiết bị Apple hiển thị vùng trong suốt thành màu đen. Thay vào đó, hãy tô nền bằng một màu. iPhone và iPad tự bo tròn các góc, nên tệp có thể chỉ là một hình vuông bình thường. Xem độ trong suốt hoạt động thế nào trong PNG và JPG để biết thêm về kênh alpha.
Các thẻ HTML và web app manifest
Đặt các tệp vào thư mục gốc của website và thêm các thẻ sau vào bên trong <head> của mọi trang:
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">Nếu bạn có thêm favicon SVG, hãy thêm <link rel="icon" href="/favicon.svg" type="image/svg+xml">. Manifest (site.webmanifest) là một tệp JSON nhỏ chứa tên trang web, tên ngắn, các biểu tượng 192 và 512 pixel, màu chủ đề, màu nền và một chế độ hiển thị như standalone. Nếu các tệp nằm trong thư mục khác, hãy thay đổi mọi đường dẫn trong các thẻ và trong manifest.
Thiết kế cho kích thước rất nhỏ
- Giữ đơn giản. Ở 16 pixel, nét mảnh, chữ nhỏ và chi tiết nhỏ sẽ nhòe thành một vệt. Một biểu tượng đơn giản hóa, một hình khối duy nhất hoặc một hai chữ cái hiệu quả hơn một logo đầy đủ kèm khẩu hiệu.
- Dùng độ tương phản mạnh. Sự khác biệt rõ về độ sáng giữa biểu tượng và nền quan trọng hơn việc dùng chính xác màu thương hiệu.
- Dùng ít khoảng đệm. Khoảng trống làm phần biểu tượng nhìn thấy được nhỏ đi. Một lề nhỏ có thể có ích cho biểu tượng lớn, nhưng favicon nhỏ dễ nhận ra hơn khi lấp gần hết ô vuông.
- Kiểm tra ở kích thước thật. Hãy xem biểu tượng ở mức thu phóng 100% trên một thẻ trình duyệt, không chỉ trong bản xem trước đã phóng to.
Giao diện tối của trình duyệt
Nhiều người dùng thanh thẻ màu tối. Logo tối trên nền trong suốt có thể gần như biến mất ở đó, còn logo trắng có thể biến mất trên giao diện sáng. Các giải pháp phổ biến là thêm một hình nền đặc hoặc bo tròn phía sau logo, một đường viền sáng, hoặc một favicon SVG đổi màu bằng media query prefers-color-scheme (ở những nơi hỗ trợ favicon SVG). Công cụ tạo favicon của LeedyBox hiển thị cả thanh thẻ sáng và tối để bạn so sánh.
Cập nhật favicon và bộ nhớ đệm của trình duyệt
Trình duyệt giữ favicon trong bộ nhớ đệm, đôi khi trong thời gian dài, nên biểu tượng mới có thể không xuất hiện ngay sau khi bạn tải lên. Tải lại cứng (hard refresh) hoặc cửa sổ ẩn danh có thể hiển thị phiên bản mới. Để khách truy cập quay lại tải biểu tượng mới sớm hơn, hãy đổi tên tệp hoặc thêm số phiên bản vào URL trong các thẻ, ví dụ /favicon-32x32.png?v=2. Biểu tượng trong dấu trang và kết quả tìm kiếm có thể cần lâu hơn để cập nhật. Sau mỗi thay đổi, hãy kiểm tra kết quả trên các trình duyệt và thiết bị quan trọng với bạn.
Câu hỏi thường gặp
Có còn cần favicon.ico không?
Không bắt buộc, nhưng đây là một phương án dự phòng đơn giản: nhiều trình duyệt và công cụ khác tìm /favicon.ico trong thư mục gốc của trang web. Tệp này chỉ tốn vài kilobyte.
Có thể dùng ảnh JPG làm favicon không?
Trình duyệt thường hiển thị được, nhưng JPG không có độ trong suốt và cách nén của nó có thể làm nhòe các chi tiết nhỏ. Tệp PNG, ICO hoặc SVG là lựa chọn tốt hơn cho biểu tượng.
Vì sao favicon mới của tôi không hiển thị?
Thường là do biểu tượng cũ vẫn còn trong bộ nhớ đệm, hoặc đường dẫn trong các thẻ HTML không khớp với vị trí đã tải tệp lên. Hãy mở trực tiếp URL của từng tệp trong trình duyệt để kiểm tra xem tệp có tải được không.