Trình Tạo Favicon - đủ mọi cỡ kèm HTML
Trình tạo favicon
Các kích thước
HTML cho phần head
Đặt các tệp vào thư mục gốc của trang, rồi dán đoạn này vào trong head.
Công cụ này làm gì
Favicon đã thôi là một ô vuông 16 điểm ảnh từ nhiều năm trước. Một trang bây giờ cần cả nắm kích thước cho thẻ trình duyệt, lối tắt Windows, màn hình chính iPhone và lời mời cài đặt trên Android, cộng thêm đoạn mã trỏ tới chúng. Trang này làm tất cả từ một tấm ảnh, ngay trong trình duyệt của bạn.
Cách dùng
- 1 Thả vào một ảnh vuông, tốt nhất từ 512 px trở lên.
- 2 Xem từng cỡ trong phần xem trước và chọn màu nền nếu ảnh của bạn trong suốt.
- 3 Tải zip, giải nén vào thư mục gốc của trang rồi dán đoạn HTML.
Thiết kế cho 16 điểm ảnh, không phải cho logo
Ở cỡ thẻ trình duyệt, một favicon rộng chừng bằng dấu chấm câu trên trang này. Logo chữ biến thành vệt xám, còn nét mảnh thì biến mất hẳn. Thứ sống sót ở tỷ lệ đó là một chữ cái, một hình đơn giản, hoặc mảnh dễ nhận ra nhất của logo; cả logo thì gần như không bao giờ.
| Kích thước | Dùng ở đâu |
|---|---|
| 16×16 | Thẻ trình duyệt, thanh dấu trang |
| 32×32 | Thẻ trên màn hình mật độ cao, thanh tác vụ |
| 48×48 | Lối tắt Windows và ô xếp của trang |
| 180×180 | Màn hình chính iPhone và iPad |
| 192×192 | Màn hình chính Android và trình chuyển ứng dụng |
| 512×512 | Lời mời cài đặt và màn hình khởi động |
PNG là đủ; ICO chỉ là tàn dư
Mọi trình duyệt đang dùng hôm nay đều đọc favicon PNG, nên một chồng tệp PNG cùng các thẻ link đúng là đủ phủ cả web. Cái vỏ .ico tồn tại vì Internet Explorer từng tìm nó ở thư mục gốc; trừ khi bạn buộc phải hỗ trợ thứ gì đó rất cũ, có thể bỏ qua.
Nền trong suốt hành xử khác trên điện thoại
Trong thẻ trình duyệt, một biểu tượng trong suốt nằm rất ổn trên nền mà giao diện cung cấp. Còn trên màn hình chính iPhone, đúng tệp đó lại bị đặt một ô vuông đen đặc phía sau, vì iOS không ghép nền trong suốt ở đó. Hãy chọn một màu nền, biểu tượng sẽ trông có chủ ý ở cả hai nơi.
Vì sao trình duyệt vẫn hiện cái cũ
Favicon được lưu đệm rất chặt và rất lâu, đôi khi vượt qua cả một lần tải lại bình thường. Hãy mở thẳng tệp biểu tượng để chắc rằng cái mới thật sự nằm ở đó, rồi kiểm lại bằng cửa sổ ẩn danh. Đổi tên tệp, hoặc gắn thêm số phiên bản vào tên, mới là cách đáng tin để ép nó cập nhật.