Hướng dẫn về favicon
Giải đáp rõ ràng các câu hỏi khi tạo favicon: kích thước, định dạng và đoạn mã cần dán.
Kích thước favicon: định dạng và cách dùng
Tìm “kích thước favicon” vẫn thấy những danh sách mười lăm tệp có từ năm 2014. Thực tế, sáu kích thước hiện đã đủ cho thẻ trình duyệt, kết quả tìm kiếm, iOS, Android và PWA. Dưới đây là các kích thước và lý do sử dụng.
Đọc hướng dẫnChuyển PNG sang ICO miễn phí
.ico vẫn là định dạng được mong đợi ở thư mục gốc trang web, và phần lớn công cụ chuyển đổi trực tuyến yêu cầu tải ảnh lên máy chủ. Sau đây là cách tạo favicon.ico nhiều kích thước đúng chuẩn từ PNG mà không tải bất cứ thứ gì lên.
Đọc hướng dẫnapple-touch-icon: kích thước, định dạng và mã
Biểu tượng Apple Touch chỉ định rõ ảnh dùng khi khách truy cập thêm trang web vào màn hình chính iPhone. Biểu tượng này tách biệt với favicon trên thẻ trình duyệt và các biểu tượng khai báo trong manifest ứng dụng web.
Đọc hướng dẫnFavicon chế độ tối bằng SVG
Logo đen trên nền trong suốt trông hoàn hảo trong thẻ sáng nhưng biến mất trong thẻ tối. Định dạng ICO không thích ứng được, nhưng favicon SVG thì có: nó chứa quy tắc CSS đổi màu theo giao diện trình duyệt.
Đọc hướng dẫnThêm favicon vào HTML
Favicon HTML hoạt động ổn định không chỉ nhờ một thẻ đặc biệt. Nó cần bộ tệp nhỏ truy cập được và các liên kết đặt trong head. Quy trình này đáp ứng thẻ hiện đại, trình duyệt cũ và lối tắt trên di động mà không tạo hàng loạt phiên bản lỗi thời.
Đọc hướng dẫnFavicon không hiển thị hoặc không cập nhật
Khi favicon bị thiếu, không phải lúc nào lỗi cũng nằm ở tệp. Trình duyệt, CDN, service worker và công cụ tìm kiếm có thể giữ các phiên bản khác nhau. Chẩn đoán theo thứ tự giúp tránh thay đổi nhiều yếu tố cùng lúc.
Đọc hướng dẫnFavicon trong Next.js App Router
App Router có thể tạo phần tử biểu tượng từ tệp theo quy ước hoặc từ đối tượng metadata. Cả hai cách đều hợp lệ, nhưng kết hợp không có quy tắc rõ ràng dễ tạo các khai báo cạnh tranh nhau.
Đọc hướng dẫnHướng dẫn favicon SVG
SVG giữ đường nét sắc sảo ở mọi mật độ điểm ảnh và có thể điều chỉnh màu theo giao diện. Sự linh hoạt đó đi kèm một điều kiện: tệp phải tự chứa đủ tài nguyên, đơn giản và dễ nhận diện trong không gian rất nhỏ.
Đọc hướng dẫn