PNG là tiêu chuẩn hiện đại nhất. Hầu hết trình duyệt hiện đại ưu tiên PNG favicon.
Favicon là gì?
Favicon (viết tắt của “favorite icon”) là biểu tượng nhỏ xuất hiện trên tab trình duyệt, thanh bookmark, lịch sử trình duyệt và kết quả tìm kiếm Google. Đó là yếu tố thương hiệu nhỏ nhất nhưng lại được nhìn thấy nhiều nhất trên website của bạn. Mỗi khi ai đó mở tab chứa trang web của bạn, favicon là thứ giúp họ nhận ra ngay đó là trang nào.
Favicon ban đầu được Internet Explorer 5 giới thiệu năm 1999 dưới dạng file ICO. Ngày nay, hầu hết trình duyệt hiện đại đều hỗ trợ PNG và thậm chí SVG favicon, mang lại chất lượng hình ảnh tốt hơn nhiều so với định dạng ICO cũ.
Tại sao favicon quan trọng cho SEO và UX?
Google hiển thị favicon ngay cạnh tên trang web trong kết quả tìm kiếm trên di động. Một favicon chuyên nghiệp làm tăng tỷ lệ nhấp (CTR) vì nó tạo cảm giác đáng tin cậy. Ngược lại, một trang web không có favicon hoặc dùng favicon mặc định trông thiếu chuyên nghiệp và có thể khiến người dùng bỏ qua kết quả của bạn.
Ngoài SEO, favicon cải thiện trải nghiệm người dùng (UX) đáng kể. Khi người dùng mở 10-20 tab cùng lúc, favicon là cách duy nhất để nhận biết nhanh từng tab. Trên thiết bị di động, khi trang web được thêm vào màn hình chính, favicon (dưới dạng Apple Touch Icon hoặc PWA icon) trở thành biểu tượng ứng dụng.
Các kích thước favicon bạn cần
Không có một kích thước favicon duy nhất phù hợp cho tất cả. Mỗi nền tảng và thiết bị yêu cầu kích thước khác nhau:
- 16x16: Kích thước chuẩn cho tab trình duyệt — đây là kích thước nhỏ nhất và phổ biến nhất.
- 32x32: Dùng cho thanh tác vụ Windows, bookmark bar và một số trình duyệt hiển thị ở độ phân giải cao hơn.
- 48x48: Shortcut desktop trên Windows và một số hệ điều hành khác.
- 180x180: Apple Touch Icon — bắt buộc cho bookmark trên màn hình chính iOS. Nếu thiếu, Apple sẽ tự chụp screenshot trang web làm icon.
- 192x192: Icon cho Android Chrome khi thêm trang vào màn hình chính.
- 512x512: Icon cho PWA (Progressive Web App) splash screen — hiển thị khi ứng dụng web đang tải.
Cách thêm favicon vào website
Sau khi tạo và tải về tất cả các kích thước favicon, bạn cần thêm các thẻ HTML <link> vào phần <head> của trang web. Công cụ này tự động tạo đoạn HTML cần thiết — chỉ cần nhấn “Sao chép HTML” và dán vào file HTML hoặc layout template của bạn.
Đặt các file favicon ở thư mục gốc (root) của website để đảm bảo mọi trang đều có thể truy cập. Nếu dùng framework như Next.js hoặc Nuxt, đặt trong thư mục public/.
Mẹo thiết kế favicon hiệu quả
- Giữ đơn giản tuyệt đối: Ở kích thước 16x16 pixel, chỉ có các hình dạng đơn giản, đậm và tương phản cao mới nhìn rõ. Tránh dùng text đầy đủ, chi tiết nhỏ hoặc gradient phức tạp.
- Dùng một chữ cái hoặc biểu tượng: Chữ cái đầu tiên của tên thương hiệu hoặc một biểu tượng đơn giản là lựa chọn tốt nhất.
- Kiểm tra trên nền sáng và tối: Tab trình duyệt có thể có nền sáng hoặc tối. Favicon cần nổi bật trên cả hai.
- Sử dụng màu thương hiệu: Favicon là cơ hội nhận diện thương hiệu — dùng màu chính của bạn để tạo sự nhất quán.
- Tránh nền trong suốt cho Apple Touch: iOS sẽ tự thêm nền trắng nếu icon có nền trong suốt, có thể không đẹp.
Câu hỏi thường gặp
Công cụ khác bạn có thể thích
Thêm công cụ trong Generators
Giới thiệu về Generators
Công cụ developer tự động hóa các phần lặp đi lặp lại của công việc phần mềm: format JSON, encode/decode Base64, decode JWT để xác minh claim của token, tạo UUID, format XML, diff cấu hình. Đây không phải tác vụ hào nhoáng, nhưng là các điểm nghẽn ngốn 10-15 phút nhiều lần mỗi ngày — cộng lại hàng giờ mỗi tuần. Chạy chúng trên tab trình duyệt sạch sẽ hơn vật lộn với phụ thuộc CLI hay extension IDE có thể gửi dữ liệu riêng tư của bạn cho bên thứ ba.
Vì sao nó quan trọng
Công cụ developer client-side nhanh về cơ bản quan trọng vì chúng được dùng với dữ liệu nhạy cảm. JWT token chứa danh tính người dùng. Payload Base64 có thể encode API key. JSON dump bao gồm bản ghi khách hàng. Nếu một 'công cụ developer' gửi input của bạn lên server để xử lý, bạn vừa rò rỉ production secret. Công cụ dev của ZestLab chạy 100% client-side không có network call nào sau khi load page — những gì bạn paste vẫn ở trong trình duyệt.
Riêng tư và an toàn
Tất cả công cụ developer ở đây chạy trong trình duyệt bằng JavaScript thuần. Không có 'decode server' hay 'format API' — JWT, JSON, payload encode của bạn được parse bởi code chạy trên laptop của bạn. Tự xác minh bằng DevTools trình duyệt → Network tab: bạn sẽ thấy không có request nào khi dùng bất kỳ công cụ nào. Đó là tiêu chuẩn chúng tôi giữ vì công cụ dev xử lý secret.
Thực hành tốt
- Không bao giờ paste JWT hay API token production vào BẤT KỲ công cụ online nào mà không xác minh chạy client-side (check tab Network)
- Dùng chế độ ẩn danh trình duyệt để decode một lần các payload nhạy cảm
- Bookmark công cụ bạn dùng hàng ngày — URL công cụ ZestLab ổn định, không cần tài khoản
- Khi format JSON có secret để team review, redact credential trước khi share output