Website cần những tệp favicon nào, và kích thước của từng tệp

Một website cần một bộ tệp icon nhỏ, và phần lớn quyết định liên quan đến kích thước. Hãy đặt favicon.ico chứa ảnh 16, 32 và 48 pixel ở thư mục gốc của site, dùng cho tab trình duyệt và Windows. Thêm icon Apple touch 180 pixel cho màn hình chính trên iPhone và iPad, cùng các icon PNG 192 và 512 pixel được khai báo trong web app manifest. Công cụ tạo favicon tạo tất cả từ một logo và viết sẵn các dòng HTML để bạn dán vào trang.

Các tệp và kích thước

Tệp ZIP mà công cụ tải về có đủ bảy tệp. Tệp favicon.ico được tạo từ ba ảnh PNG kích thước 16, 32 và 48 pixel, lưu gộp trong một tệp. Mỗi icon là cùng một logo nhưng được thu nhỏ. Công cụ làm việc từ phiên bản 512 pixel của ảnh bạn và tạo từng kích thước từ đó.

Các dòng HTML

Công cụ viết bốn dòng cho phần đầu (head) của trang:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Dòng đầu trỏ tới favicon.ico và khai báo kích thước 48 x 48. Dòng thứ hai là ảnh PNG 32 pixel. Dòng thứ ba khai báo icon Apple touch, còn dòng thứ tư trỏ tới manifest, nơi liệt kê các icon 192 và 512 pixel. Ảnh PNG 16 pixel có trong ZIP nhưng không có trong các dòng này. Trình duyệt cũng tự tìm /favicon.ico, nên tệp vẫn được nhận diện ngay cả khi thiếu dòng đầu. Hãy giữ nguyên đường dẫn như trên, trừ khi tệp của bạn nằm ở nơi khác.

Vì sao kích thước nhỏ cần hình dạng đơn giản

Ở kích thước 16 x 16 pixel, một icon có tổng cộng 256 pixel. Icon 48 pixel có 2.304 pixel, còn nguồn 512 pixel có 262.144 pixel. Phần lớn chi tiết của logo sẽ biến mất khi thu xuống 16 pixel, nên một đường nét mảnh hay một từ nhỏ sẽ bị nhòe. Hãy dùng một dấu hiệu đơn giản, hoặc một đến hai chữ cái với độ tương phản mạnh.

Tùy chọn chữ cái nhận một đến hai ký tự và vẽ chúng lớn ở giữa icon, tự thu nhỏ nếu quá rộng. Các kiểu hình là Vuông, Bo góc và Tròn. Phần xem trước hiển thị kết quả ở 16, 32, 48, 180 và 512 pixel cạnh nhau, cùng với tab sáng và tối, để bạn đánh giá các kích thước nhỏ trước khi tải về. Phần xem trước cập nhật khi bạn đổi kiểu hình, lề hay nền, nên bạn có thể thử từng cài đặt trước.

Lề, nền và icon Apple

Lề có ba tùy chọn: Không lề, Nhỏ và Lớn. Nhỏ để trống 10 phần trăm icon ở mỗi bên, còn Lớn để trống 20 phần trăm. Ở chế độ ảnh, Không lề sẽ cắt ảnh theo hình vuông ở giữa, nên hai đầu của logo rộng sẽ mất. Các tùy chọn có lề sẽ đặt toàn bộ ảnh vào trong khung vuông.

Nền có các lựa chọn Trong suốt, Trắng và Tùy chỉnh, mặc định là Trong suốt. Icon Apple touch luôn đặc. Ở chế độ ảnh, phần trong suốt sẽ lấy màu nền bạn chọn, hoặc màu trắng nếu nền là Trong suốt. Ở chế độ chữ cái, phần đó lấy màu nền của chữ. Phần trong suốt trong icon Apple touch có thể hiện thành màu đen trên iPhone và iPad, nên công cụ sẽ tô đầy chúng. Các kích thước khác vẫn giữ độ trong suốt bạn đã chọn. Vì sao PNG trong suốt bị đen nền giải thích nguyên nhân.

Favicon có dạng vuông, nên logo rộng cần một khung vuông trước. Công cụ tạo ảnh vuông đặt toàn bộ bức ảnh vào khung 1:1, với viền mờ, trắng, đen hoặc tùy chỉnh, nên không có phần nào bị cắt. Đổi kích thước ảnh đặt số pixel chính xác. Khi bật Giữ tỉ lệ và điền cả hai cạnh, ảnh sẽ vừa khít trong khung mà không bị méo. Tỉ lệ khung hình ảnh là gì trình bày các tỉ lệ phổ biến.

Thay đổi cần thời gian để hiển thị

Trình duyệt lưu favicon trong bộ nhớ đệm (cache). Một tệp đã thay đổi nhưng giữ nguyên địa chỉ có thể vẫn hiện icon cũ trong một thời gian, nên tải lại trang thông thường thường là chưa đủ. Hãy mở trực tiếp địa chỉ của icon để kiểm tra tệp mới đã có trên máy chủ, rồi tải lại trang và bỏ qua bộ nhớ đệm. Nếu icon cũ vẫn hiện, hãy đặt tên khác cho tệp mới và cập nhật liên kết để trỏ tới tệp đó.

Cách làm với fixmint

1. Chọn Ảnh rồi thả logo vào ô, hoặc chọn Chữ cái rồi nhập một đến hai ký tự.
2. Đặt Lề thành Không lề, Nhỏ hoặc Lớn, và Nền thành Trong suốt, Trắng hoặc Màu tùy chỉnh.
3. Kiểm tra các icon 16, 32 và 48 px trên tab sáng và tối, cùng phần xem trước 180 và 512 px.
4. Nhấn Tải ZIP để lấy đủ bảy tệp, hoặc Tải favicon.ico để lấy riêng tệp đó.
5. Nhấn Sao chép HTML rồi dán các dòng trong HTML cho phần đầu trang vào phần đầu của từng trang.

Các trường hợp đặc biệt

• Ảnh của bạn vẫn ở trên thiết bị. Công cụ tạo icon ngay trong trình duyệt, không có gì được tải lên.
• Chữ cái hai ký tự. Hệ thống chấp nhận hai ký tự và vẽ nhỏ hơn để cả hai vừa khung, nên ở 16 pixel khó đọc hơn so với một chữ cái.
• Tên tệp. Hãy giữ đúng tên mà HTML đang dùng, vì các liên kết trỏ tới chúng.
• Tệp không đọc được. Nếu ảnh không thể chuyển thành icon, công cụ hiển thị thông báo "Không thể tạo icon từ đầu vào này. Hãy thử ảnh khác." và xóa kết quả. Hãy thử tệp khác, hoặc lưu lại ảnh ở định dạng phổ biến.