Tạo favicon
Biến logo thành trọn bộ favicon hoàn chỉnh cho website của bạn.
Chạy ngay trên trình duyệt. File của bạn không bao giờ rời khỏi thiết bị.
- ICO cùng mọi kích thước PNG
- Đoạn HTML dùng ngay
- Chỉnh được khoảng đệm
Cách tạo favicon
- Thả logo hoặc ảnh vuông vào đây.
- Chỉnh khoảng đệm và màu nền nếu cần.
- Tải file ZIP về rồi dán đoạn HTML vào trang.
Trong file ZIP có gì
| File | Kích thước | Dùng bởi |
|---|---|---|
| favicon.ico | 16, 32 và 48 px trong một file | Trình duyệt cũ, bookmark |
| favicon-16x16.png | 16 x 16 | Tab trình duyệt |
| favicon-32x32.png | 32 x 32 | Tab trình duyệt, thanh taskbar |
| apple-touch-icon.png | 180 x 180 | Màn hình chính iPhone và iPad |
| android-chrome-192x192.png | 192 x 192 | Màn hình chính Android |
| android-chrome-512x512.png | 512 x 512 | Màn hình chờ và icon app Android |
| site.webmanifest | File văn bản | Cho Android biết dùng icon nào |
Những file này đặt ở đâu
Tải mọi file trong ZIP lên thư mục gốc của website, cùng thư mục với index.html, không phải thư mục con. Sau đó dán đoạn HTML được cung cấp vào phần head của mọi trang, hoặc vào file header dùng chung của trang nếu có.
Mẹo về khoảng đệm và màu nền
- Thêm 10 đến 15 phần trăm khoảng đệm cho logo chạm sát mép hình vuông, để không bị trông như bị cắt xén ở kích thước 16 pixel.
- Bật tô màu nền nếu logo của bạn có nền trong suốt và trông lạ trên màu tab riêng của trình duyệt.
- Một logo đơn giản, tương phản cao sẽ rõ hơn ở kích thước 16x16 so với logo có chi tiết nhỏ hoặc chữ mảnh.
Câu hỏi thường gặp về Tạo favicon
Trong file ZIP có gì?
favicon.ico với các kích thước 16, 32 và 48 pixel, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, hai file PNG android-chrome và một file site.webmanifest.
Những file này đặt ở đâu?
Tải chúng lên thư mục gốc của website, rồi dán đoạn HTML vào phần head của mọi trang.
Ảnh của tôi có cần vuông sẵn không?
Logo vuông cho kết quả gọn gàng nhất. Ảnh không vuông sẽ được canh vừa vào một hình vuông có đệm, nên không bị kéo méo.
Khoảng đệm dùng để làm gì?
Nó thêm khoảng trống quanh logo bên trong hình vuông, giúp thiết kế không chạm sát mép khi hiển thị ở kích thước icon nhỏ.
Ảnh của tôi có bị tải lên không?
Không. Mọi kích thước icon được tạo ngay trong trình duyệt, nên ảnh không bao giờ rời khỏi thiết bị.
Tôi có cần cả sáu file, hay chỉ favicon.ico?
Trình duyệt hiện đại chủ yếu dùng các file PNG và site.webmanifest. favicon.ico được giữ lại cho trình duyệt cũ và một số thanh bookmark, nên hãy tải lên tất cả để hỗ trợ rộng nhất.
Tôi nên bắt đầu với ảnh kích thước bao nhiêu?
Ít nhất 512 x 512 pixel. Icon gốc được tạo ở kích thước đó, nên ảnh nguồn nhỏ hơn sẽ bị kéo giãn lên và có thể trông mờ.
File manifest có cần chỉnh sửa không?
File site.webmanifest được tạo ra dùng văn bản mẫu cho tên trang. Mở nó bằng trình soạn văn bản sau đó và cập nhật trường name và short_name cho khớp với trang của bạn.