Introduction
Favicon là biểu tượng siêu nhỏ xuất hiện trên tab trình duyệt, thanh địa chỉ và danh sách bookmark. Dù kích thước chỉ vài pixel, nó lại là yếu tố quan trọng giúp người dùng nhận diện nhanh website của bạn. Bài viết này sẽ hướng dẫn chi tiết cách tạo favicon PNG 512×512 chuẩn, tích hợp vào các nền tảng phổ biến và khắc phục các vấn đề thường gặp.
Main section 1 – Tại sao chọn PNG 512×512?
- Định dạng PNG giữ nguyên chất lượng khi thu nhỏ, tránh hiện tượng mờ mà JPEG thường gây ra.
- Kích thước 512×512 pixel được Google Chrome khuyến nghị trong tài liệu <https://developer.chrome.com/docs/web-platform/favicons/> và đáp ứng yêu cầu của Android App Icons (<https://developer.android.com/guide/topics/ui/graphics/app-icon>).
- Khi được nén thành các kích thước phụ (16×16, 32×32, 96×96…) trình duyệt sẽ tự động lựa chọn phiên bản phù hợp, nên việc cung cấp nguồn 512×512 giúp mọi thiết bị hiển thị sắc nét.
- PNG hỗ trợ kênh alpha trong suốt, cho phép thiết kế biểu tượng không viền và dễ dàng hòa nhập với nền tối hoặc sáng.
- Đối với các nền tảng Progressive Web App (PWA), file 512×512 là bắt buộc để tạo biểu tượng trên màn hình chính điện thoại.
Main section 2 – Quy trình tạo favicon bằng công cụ của DangNH Studio
1. Truy cập https://dangnhstudio.com/tools/generator-tools/favicon-generator. 2. Kéo thả hoặc nhấn “Chọn file” để tải ảnh nguồn PNG hoặc JPG (đảm bảo tỷ lệ 1:1 và độ phân giải tối thiểu 512×512). 3. Nhập tên file tùy chọn, ví dụ “logo-website”. 4. Xem trước ngay trong trình duyệt; công cụ sẽ hiển thị các kích thước phụ tự động. 5. Nhấn “Copy” để sao chép thẻ <link> đã chuẩn hoá, hoặc “Download” để lưu file PNG 512×512 về máy. > Lưu ý nội bộ: Công cụ không tự động phóng to ảnh, vì vậy ảnh gốc phải đáp ứng kích thước chuẩn trước khi tải lên.
Sau khi tải xuống, bạn có thể tích hợp ngay vào dự án: ``html <link rel="icon" type="image/png" sizes="512x512" href="/assets/favicon.png"> `` Nếu muốn hỗ trợ các kích thước khác, chỉ cần sao chép file và đổi tên (favicon-32.png, favicon-16.png) hoặc để trình duyệt tự tạo.
Main section 3 – Cách nhúng favicon vào các nền tảng phổ biến
3.1 HTML thuần
Thêm thẻ <link> ở trên vào phần <head> của mọi trang tĩnh. Đường dẫn href nên trỏ tới thư mục gốc hoặc assets để tránh lỗi “file not found”.
3.2 WordPress
1. Vào Dashboard → Settings → General. 2. Tại mục Site Icon, chọn “Select Image” và tải lên file PNG 512×512. 3. Lưu lại; WordPress sẽ tự động tạo các phiên bản 192×192, 180×180 cho iOS và Android. > Tham khảo: <https://developer.wordpress.org/themes/functionality/custom-header/#adding-a-favicon>