Kích thước favicon: cần những tệp nào, bao nhiêu px

Vì sao favicon lại nhiều tệp đến vậy?

Favicon là biểu tượng nhỏ của trang web — xuất hiện trên tab trình duyệt, danh sách dấu trang, kết quả tìm kiếm và màn hình chính điện thoại. Nó là gương mặt của trang; thiếu nó, trang trông dang dở.

Rắc rối ở chỗ mỗi nơi hiển thị lại đòi kích thước và định dạng khác nhau. Vì vậy favicon không phải một tệp mà là một bộ nhỏ gồm nhiều tệp.

Bộ tệp bạn cần

• •favicon.ico — gói 16, 32 và 48px trong một tệp. Dùng cho thanh địa chỉ, tab và dấu trang; chuẩn lâu đời nhất và vẫn bắt buộc
• •PNG 16px và 32px — bản sắc nét mà trình duyệt hiện đại dùng trên tab
• •apple-touch-icon 180px — dùng khi thêm trang vào màn hình chính iPhone, iPad
• •PNG 192px và 512px — cho màn hình chính Android và cài đặt PWA, khai báo trong site.webmanifest

Chuẩn bị ảnh gốc thế nào

Cách đúng là bắt đầu từ ảnh vuông lớn (từ 512px trở lên) rồi thu nhỏ dần. Phóng to ảnh nhỏ chỉ khiến nó mờ đi.

Biểu tượng phải nhận ra được ở cỡ 16px, nên càng đơn giản càng tốt. Một biểu tượng đơn thắng logo nhiều chữ; chừa chút lề ở mép để khi thu nhỏ không bị chật; nền trong suốt hợp cả giao diện sáng lẫn tối.

Gắn vào HTML

Tải các tệp lên thư mục gốc của trang, rồi khai báo bằng thẻ link trong head: rel="icon" cho ICO và PNG, rel="apple-touch-icon" cho biểu tượng 180px, rel="manifest" cho site.webmanifest.

Dự phòng: hầu hết trình duyệt tự tìm thấy favicon.ico đặt ở thư mục gốc dù không có thẻ nào. Nhưng để PNG từng cỡ và biểu tượng màn hình chính hoạt động chuẩn, hãy thêm thẻ.

Đừng tự ghép bộ bằng tay

Thu nhỏ từng ảnh rồi tự đóng gói ICO rất mất công. Thả một ảnh vào trình tạo favicon của Image Converter NOW — favicon.ico, đủ cỡ PNG, site.webmanifest và thẻ HTML dán ngay được tạo trọn trong một tệp ZIP.

Mọi thứ chạy trong trình duyệt — logo của bạn không bao giờ bị tải lên máy chủ.