Cách tạo favicon
Để tạo favicon, hãy thêm logo của bạn ở trên - hoặc nhập một chữ cái hay emoji - chỉnh giao diện rồi tải xuống file ZIP. Phần xem trước hiển thị icon ở từng kích thước thật và trong tab trình duyệt, ở chế độ sáng và tối.
- Chọn nguồn. Logo PNG hoặc SVG cho kết quả tốt nhất; các ảnh khác sẽ được đặt vừa trong một khung vuông. Chưa có logo? Hãy dùng một chữ cái hoặc emoji trên nền màu.
- Chỉnh giao diện. Màu nền hoặc trong suốt, hình dạng (vuông bo góc, vuông hoặc tròn) và khoảng đệm xung quanh hình ảnh.
- Tải xuống. Tải xuống tất cả icon cho bạn gói đầy đủ; Chỉ favicon.ico chỉ cho bạn đúng một file.
Gói favicon gồm những gì
| File | Kích thước | Dùng cho |
|---|---|---|
favicon.ico | 16, 32 và 48 px | Mọi trình duyệt, Windows, kết quả tìm kiếm |
favicon-16x16.png, favicon-32x32.png | 16 và 32 px | Tab trình duyệt và dấu trang |
apple-touch-icon.png | 180 px | Màn hình chính iPhone và iPad |
android-chrome-192x192.png, -512x512.png | 192 và 512 px | Màn hình chính Android, ứng dụng web đã cài đặt |
site.webmanifest | - | Đặt tên icon và màu sắc cho Android và ứng dụng web |
favicon-html.txt | - | Các thẻ để dán vào trang của bạn |
Icon Apple luôn có nền đặc và góc vuông: iPhone tự bo góc và hiển thị vùng trong suốt thành màu đen.
Thêm favicon vào website của bạn
- Giải nén gói tải xuống và tải các file lên thư mục gốc của website, cạnh trang chủ,
để
yoursite.com/favicon.icomở ra icon. - Dán các thẻ HTML (hiển thị ở trên và trong
favicon-html.txt) vào phần<head>của các trang. - Tải lại và xóa bộ nhớ đệm. Trình duyệt giữ favicon cũ rất lâu, nên cửa sổ ẩn danh là cách kiểm tra nhanh nhất.
Với WordPress, bạn có thể đặt icon 512 px làm Biểu tượng trang (Site Icon) trong Customizer, và WordPress sẽ tự tạo các kích thước còn lại.
Mẹo để favicon rõ nét
- Đơn giản hóa. Ở 16 pixel, một logo chi tiết sẽ bị nhòe. Hãy dùng biểu tượng trong logo, hoặc chữ cái đầu, thay vì logo đầy đủ kèm chữ.
- Dùng độ tương phản. Tab sáng hoặc tối tùy theo giao diện trình duyệt - hãy kiểm tra cả hai bản xem trước.
- Chú ý khoảng đệm. Ít khoảng đệm làm icon to hơn trong tab; thêm một chút sẽ đẹp hơn trên màn hình chính điện thoại.
Cần một file .ico riêng với kích thước khác? Công cụ chuyển đổi ảnh có thể lưu mọi ảnh thành ICO.
Câu hỏi thường gặp
Làm thế nào để tạo favicon?
Thêm logo hoặc ảnh vuông bất kỳ vào khung trên trang này, hoặc nhập một chữ cái hay emoji. Chỉnh màu nền, khoảng đệm và hình dạng, rồi tải xuống file ZIP gồm mọi kích thước icon và đoạn HTML để dán vào website của bạn.
Favicon cần những kích thước nào?
File favicon.ico với các phiên bản 16, 32 và 48 pixel dùng cho trình duyệt và Windows; apple-touch-icon 180 pixel dùng cho iPhone và iPad; icon 192 và 512 pixel dùng cho Android và ứng dụng web đã cài đặt. Gói tải xuống có đủ tất cả.
Làm thế nào để thêm favicon vào website?
Tải các file trong ZIP lên thư mục gốc của website, để favicon.ico mở được tại yoursite.com/favicon.ico. Sau đó dán các thẻ HTML vào phần head của các trang.
Vì sao favicon mới của tôi không hiển thị?
Trình duyệt lưu favicon trong bộ nhớ đệm rất lâu. Hãy mở trực tiếp địa chỉ favicon, tải lại trang, hoặc thử cửa sổ ẩn danh. Kết quả tìm kiếm có thể mất vài tuần để cập nhật.
Tôi có thể tạo favicon từ chữ hoặc emoji không?
Có. Chọn "Chữ cái hoặc emoji", nhập một hoặc hai ký tự và chọn màu. Đây là cách nhanh để có một icon gọn gàng mà không cần logo.
Ảnh của tôi có bị tải lên không?
Không. Mọi icon đều được tạo ngay trong trình duyệt của bạn, ảnh không bao giờ rời khỏi thiết bị của bạn.