Một website chỉ cần ba nhóm tệp biểu tượng, không cần gì cầu kỳ hơn. Thứ nhất là favicon.ico chứa các ảnh 16, 32 và 48 pixel, dùng cho thẻ trình duyệt, dấu trang và nhiều công cụ vẫn hỏi đúng tên tệp này. Thứ hai là apple-touch-icon.png cỡ 180 × 180 pixel cho màn hình chính của iPhone và iPad. Thứ ba là hai ảnh PNG 192 và 512 pixel khai báo trong tệp web manifest, dành cho Android và cho trang web được cài như một ứng dụng. Bài này giải thích từng tệp làm gì, đưa mã HTML nối chúng lại với nhau, và liệt kê những lỗi khiến biểu tượng bị mờ, bị đen hoặc không hiện.
Các tệp trong một bảng
| Tệp | Kích thước (pixel) | Ai dùng |
|---|---|---|
favicon.ico | 16, 32 và 48 trong cùng một tệp | Thẻ trình duyệt, dấu trang, lịch sử, Windows, trình đọc tin và bot tự động hỏi /favicon.ico |
favicon-16x16.png, favicon-32x32.png | 16 và 32 | Trình duyệt đọc các thẻ <link>; bản 32 sắc nét hơn trên màn hình mật độ cao |
favicon-48x48.png | 48 | Bản riêng của ảnh lớn nhất trong ICO, cho nơi nào chỉ nhận một tệp |
apple-touch-icon.png | 180 × 180 | Biểu tượng màn hình chính khi ai đó thêm trang của bạn trên iPhone hoặc iPad |
icon-192.png, icon-512.png | 192 và 512 | Khai báo trong site.webmanifest, cho Android và khi cài trang như ứng dụng |
Bạn không cần hai chục phiên bản. Các hướng dẫn cũ liệt kê cả chục cỡ cho Apple và nhiều ô Windows; một biểu tượng Apple 180 pixel cùng hai biểu tượng manifest là đủ cho thiết bị hiện nay, và trình duyệt cần cỡ khác sẽ co giãn từ cỡ gần nhất.
Vì sao vẫn nên có favicon.ico
Trình duyệt tự tìm /favicon.ico ngay cả khi HTML của bạn không nhắc đến nó. Trình đọc tin, bản xem trước liên kết và một số công cụ tìm kiếm cũng vậy. Một website không có tệp này sẽ để lại lỗi 404 trong nhật ký máy chủ và hiện ô biểu tượng trống, trong khi lẽ ra có thể có biểu tượng.
ICO là một tệp chứa nhiều ảnh. Nó mở đầu bằng phần đầu 6 byte, rồi mỗi ảnh có một mục danh mục 16 byte, nên tệp ba ảnh có 54 byte danh mục trước ảnh đầu tiên. Công cụ bên dưới đặt vào đó ba ảnh PNG cỡ 16, 32 và 48 pixel, mà mọi trình duyệt hiện nay đều đọc được. Trình duyệt sẽ chọn cỡ vừa nhất: 16 cho thẻ thông thường, 32 cho màn hình nét hơn hoặc thanh tác vụ, 48 ở nơi Windows hay một danh sách cần ảnh lớn hơn. Cả tệp chỉ vài kilobyte.
Công cụ tìm kiếm cũng hiện một biểu tượng nhỏ cạnh kết quả của bạn. Tại thời điểm viết bài, hướng dẫn favicon của Google yêu cầu ảnh vuông và khuyến nghị ảnh lớn hơn 48 × 48 pixel; hãy xem lại nội dung hiện hành trước khi dựa vào một con số cụ thể. Ảnh nguồn vuông từ 512 pixel trở lên đáp ứng được điều này.
Biểu tượng Apple touch
Khi ai đó thêm trang của bạn vào màn hình chính iPhone, iOS tìm apple-touch-icon. Hãy dùng ảnh PNG 180 × 180 pixel. Có hai chi tiết hay làm người ta vấp:
- Không có nền trong suốt. iOS tô đen vùng trong suốt, nên logo nền trong suốt biến thành logo nằm trên ô vuông đen. Công cụ tô biểu tượng này bằng màu nền bạn chọn, hoặc màu trắng nếu bạn không chọn.
- Không bo góc. iOS tự bo góc. Nếu bạn đã bo trong ảnh, sẽ bị bo hai lần và lộ khe hở. Công cụ luôn tạo biểu tượng này là hình vuông đầy đủ.
Biểu tượng 192, 512 và manifest
Web manifest là một tệp JSON nhỏ cho trình duyệt biết trang của bạn trông thế nào khi được cài. Trình duyệt có tính năng "cài trang này" hoặc "thêm vào màn hình chính" sẽ đọc biểu tượng từ đó, và cỡ chúng tìm là 192 và 512 pixel. Công cụ ghi ra manifest như sau:
{
"name": "Little Bakery Shop Online",
"short_name": "Little Baker",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ea580c",
"background_color": "#ea580c",
"display": "standalone"
}Công cụ cắt short_name còn 12 ký tự đầu, như "Little Baker" ở trên. Đó hiếm khi là tên viết tắt bạn muốn, nên hãy sửa tay nếu tên dài. Android cũng có thể cắt biểu tượng thành hình tròn hoặc hình vuông bo góc. Hãy giữ phần quan trọng của hình trong 80 phần trăm ở giữa để không bị cắt mất.
Mã HTML nối tất cả lại
Chép các dòng này vào <head> của mọi trang, hoặc vào bố cục chung của website. Công cụ ghi đúng như sau, dòng cuối mang màu chủ đề của bạn:
<link rel="icon" href="/favicon.ico" sizes="any">
<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" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ea580c">Dòng đầu trỏ tới tệp ICO, và sizes="any" là cách thường dùng để đánh dấu tệp chứa nhiều cỡ. Hai dòng tiếp theo đưa ra các ảnh PNG đúng cỡ; trình duyệt chọn giữa các dòng icon dựa trên cỡ mà chúng khai báo. Dòng Apple không có sizes vì chỉ có một cỡ. theme-color nhuộm màu thanh công cụ trình duyệt trên một số điện thoại. Một số trình duyệt hiện đại cũng nhận favicon SVG; công cụ này không tạo loại đó, và ICO vẫn là phương án dự phòng trong mọi trường hợp.
Mọi đường dẫn đều bắt đầu bằng dấu gạch chéo nên được tính từ gốc website. Hãy tải các tệp lên thư mục gốc để /favicon.ico mở được trong trình duyệt. Nếu bạn để chúng trong một thư mục khác, hãy sửa cả HTML lẫn manifest.
Tạo bộ biểu tượng bằng công cụ trong trình duyệt
- Mở công cụ tạo favicon và thả logo vào khung. Chấp nhận PNG, JPG, WebP, GIF và SVG. Ảnh vuông từ 512 pixel trở lên là tốt nhất, còn SVG được vẽ lại ở từng cỡ nên luôn sắc nét.
- Ở mục "Cách đặt ảnh", chọn "Cả bức ảnh" để giữ nguyên toàn bộ hình hoặc "Lấp đầy hình vuông" để cắt bớt cạnh dài. Nếu ảnh không vuông, công cụ sẽ báo. Muốn cắt chính xác trước, hãy dùng công cụ cắt ảnh với tỉ lệ 1:1.
- Chỉnh "Lề trong" để hình có chỗ thở, "Bo góc" cho hình mềm hơn, và bật "Tô màu nền" nếu logo cần màu đặc phía sau. Màu đó cũng trở thành màu chủ đề trong manifest.
- Gõ tên ứng dụng, xem phần xem trước, rồi bấm "Tải tất cả (ZIP)". Biểu tượng được vẽ ngay trong trình duyệt và không có gì bị tải lên.
- Giải nén vào thư mục gốc của website, dán HTML ở thẻ HTML, và đối chiếu manifest ở thẻ Manifest với điều bạn muốn.
Nếu logo của bạn chỉ có dạng vector mà bạn còn cần PNG cho việc khác, công cụ chuyển SVG xuất được mọi kích thước. Bài chuyển SVG sang PNG ở mọi kích thước đi sâu vào chi tiết.
Thiết kế cho 16 pixel
Ở cỡ 16 × 16 bạn chỉ có 256 điểm ảnh. Một logo đầy đủ kèm khẩu hiệu sẽ thành một đám nhiễu. Một hình khối đậm, một hai chữ cái hoặc một biểu tượng đã giản lược thì còn nhận ra được. Hãy thử ở kích thước thật, đừng phóng to. Nhớ rằng logo màu tối trên nền trong suốt sẽ biến mất trên giao diện trình duyệt tối; tô màu nền giải quyết được chuyện đó, một đường viền sáng cũng vậy.
Những lỗi khiến biểu tượng không hiện đúng
- Biểu tượng cũ vẫn hiện. Trình duyệt lưu favicon rất lâu, tách khỏi trang. Sau khi đổi tệp, hãy mở website trong cửa sổ ẩn danh hoặc xóa bộ nhớ đệm của nó để thấy bản mới. Đặt tên tệp mới, hoặc thêm phiên bản vào URL như
?v=2, thường cũng buộc trình duyệt tải lại. - Tệp không nằm ở đường dẫn bạn viết. Hãy mở thẳng
/favicon.icovà/apple-touch-icon.pngtrên thanh địa chỉ. Nếu thấy lỗi 404 hoặc một trang HTML, nghĩa là bạn đã tải lên nhầm thư mục. - Đổi đuôi chứ không chuyển định dạng. Ảnh PNG đổi tên thành
.icokhông phải là tệp ICO. Có phần mềm chấp nhận, có phần mềm không. Hãy tạo tệp thật. - Đường dẫn thiếu dấu gạch chéo đầu. Trên trang như
/blog/post,href="favicon.ico"sẽ tìm trong/blog/. Hãy bắt đầu bằng/. - Biểu tượng Apple trong suốt. Nó sẽ bị đen trên iOS. Hãy cho nó một màu nền.
- Chữ quá nhỏ để đọc. Nếu bạn không đọc nổi ở 16 pixel thì không ai đọc được.
- Quên đường dẫn trong manifest. Giá trị
srctrong manifest cũng dễ sai như các đường dẫn trong HTML.
Danh sách kiểm tra ngắn
Làm một ảnh nguồn vuông từ 512 pixel trở lên. Tạo favicon.ico chứa ảnh 16, 32, 48 pixel, biểu tượng Apple 180 pixel không trong suốt, và biểu tượng 192, 512 pixel kèm manifest. Tải lên thư mục gốc, dán các dòng <link> vào phần đầu của mọi trang, mở trực tiếp URL của từng tệp, và kiểm tra trong cửa sổ ẩn danh để bộ nhớ đệm không đánh lừa bạn.