favicons.zip gồm những gì
Tải lên một ảnh, công cụ sẽ tạo ngay trong trình duyệt mọi file mà một website hiện đại cần:
| File | Kích thước | Dùng cho |
|---|---|---|
favicon.ico |
16, 32 và 48 px trong một file | Tab trình duyệt, dấu trang, Windows và mọi công cụ tìm /favicon.ico |
favicon-16x16.png |
16×16 | Tab trên màn hình thường |
favicon-32x32.png |
32×32 | Tab trên màn hình mật độ cao, lối tắt |
favicon-48x48.png |
48×48 | Kết quả tìm kiếm Google, lối tắt trên desktop |
apple-touch-icon.png |
180×180 | "Thêm vào Màn hình chính" trên iPhone và iPad |
android-chrome-192x192.png |
192×192 | Màn hình chính Android |
android-chrome-512x512.png |
512×512 | Website cài như ứng dụng (PWA) và màn hình khởi động |
site.webmanifest |
— | Cho Android/Chrome biết vị trí hai biểu tượng lớn |
README-favicon.html |
— | Các thẻ HTML để dán |
Ảnh gốc thế nào là tốt nhất
- Vuông, đơn giản, rõ nét. Ở 16 px bạn chỉ có tổng cộng 256 điểm ảnh. Logo đầy đủ kèm slogan sẽ thành một vệt mờ; một chữ cái hay biểu tượng vẫn dễ nhận ra. Nhiều thương hiệu dùng phiên bản logo rút gọn riêng cho favicon.
- Tối thiểu 512×512. Biểu tượng lớn nhất là 512 px, nên ảnh gốc nhỏ hơn sẽ bị phóng to và trông nhòe. Logo SVG là lý tưởng — được dựng ở độ phân giải cao trước khi thu nhỏ.
- PNG nền trong suốt hoặc SVG. Nền trong suốt được giữ trong
.icovà các PNG nhỏ, nên biểu tượng đẹp trên cả giao diện sáng lẫn tối của trình duyệt. - Ảnh không vuông? Ảnh được đặt vừa vào hình vuông mà không bị cắt, hai bên là khoảng trong suốt. Nếu muốn lấp kín hình vuông, hãy cắt ảnh trước hoặc làm bản tròn bằng Cắt ảnh hình tròn.
Nền của biểu tượng Apple touch
iOS không cho biểu tượng màn hình chính có nền trong suốt — vùng trong suốt sẽ thành màu đen. Vì vậy file apple-touch-icon.png (180×180) luôn có nền đặc. Mặc định là màu trắng; dùng ô chọn màu cạnh vùng tải lên để đặt màu thương hiệu (công cụ lấy màu có thể lấy màu từ logo của bạn). Các kích thước khác vẫn trong suốt.
Đặt file ở đâu
- Giải nén và tải tất cả file lên thư mục gốc của website, sao cho
https://tenmien.vn/favicon.icomở ra được biểu tượng. - Dán các thẻ trong
README-favicon.htmlvào phần<head>của mọi trang (hoặc template header của theme):
<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" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
- Nếu website nằm trong thư mục con, hãy sửa lại đường dẫn.
Trên WordPress, Giao diện → Tùy biến → Nhận diện trang → Biểu tượng trang làm việc này với một ảnh 512×512 — dùng android-chrome-512x512.png. Shopify, Wix, Squarespace cũng có ô "favicon" tương tự.
File site.webmanifest đi kèm chỉ liệt kê các biểu tượng. Nếu muốn khách truy cập cài website như ứng dụng, hãy thêm name, short_name, theme_color, background_color và "display": "standalone".
"Đã đổi favicon mà vẫn thấy cái cũ"
Favicon bị lưu cache dai dẳng hơn hầu hết mọi thứ trên website.
- Mở trực tiếp
https://tenmien.vn/favicon.icovà tải lại cưỡng bức (Ctrl + F5, hoặc Cmd + Shift + R trên Mac). - Thêm phiên bản vào liên kết, ví dụ
href="/favicon.ico?v=2", để trình duyệt coi đó là file mới. - Xóa cache của CDN hoặc plugin cache nếu bạn dùng.
- Dấu trang và lối tắt trên màn hình chính giữ biểu tượng cũ cho đến khi được tạo lại.
- Google chỉ cập nhật biểu tượng trong kết quả tìm kiếm sau khi thu thập lại trang chủ của bạn, việc này có thể mất vài ngày đến vài tuần. Google yêu cầu biểu tượng vuông có cạnh là bội số của 48 px — file PNG 48×48 và
.icođáp ứng điều đó.
Công cụ liên quan
- Xóa nền ảnh trước khi biến nó thành biểu tượng: Xóa phông nền.
- Logo chỉ có dạng WebP? Chuyển sang PNG nếu phần mềm của bạn không mở được.
- Cần ảnh 512×512 đơn giản cho cửa hàng hoặc hồ sơ? Đổi kích thước 512×512.