Favicon
Biểu tượng nhỏ hiển thị bên cạnh URL trên thanh địa chỉ trình duyệt, góp phần nhận diện thương hiệu và trải nghiệm người dùng.
Favicon là gì?
Favicon (viết tắt của favorite icon) là biểu tượng nhỏ, thường có kích thước 16×16 hoặc 32×32 pixel, xuất hiện bên cạnh URL trên thanh địa chỉ trình duyệt, trong tab, thanh bookmark và kết quả tìm kiếm trên một số nền tảng. Đây là hình ảnh đại diện trực quan đầu tiên người dùng nhìn thấy khi truy cập website — giống như 'dấu vân tay' nhận diện thương hiệu trên trình duyệt.
Tại sao quan trọng trong SEO?
Favicon không phải yếu tố xếp hạng trực tiếp theo xác nhận từ Google (2023–2024), nhưng lại ảnh hưởng gián tiếp và mạnh mẽ đến các tín hiệu SEO thực tế:
- Nâng cao nhận diện thương hiệu: Khi người dùng thấy biểu tượng quen thuộc trong tab hoặc lịch sử duyệt web, khả năng họ nhớ và quay lại tăng rõ rệt — điều này hỗ trợ tỷ lệ giữ chân (retention) và giảm tỷ lệ thoát (bounce rate).
- Cải thiện trải nghiệm người dùng (UX): Một favicon chuyên nghiệp giúp website trông chuyên nghiệp hơn, tạo niềm tin. Người dùng dễ dàng phân biệt tab của bạn giữa hàng chục tab mở — đặc biệt khi đang so sánh sản phẩm/dịch vụ.
- Hỗ trợ hiển thị trên kết quả tìm kiếm: Một số trình duyệt và nền tảng (như Microsoft Edge, DuckDuckGo, hoặc ứng dụng đọc RSS) hiển thị favicon trong kết quả tìm kiếm. Điều này làm nổi bật kết quả của bạn so với đối thủ không có favicon.
- Tối ưu cho thiết bị di động: Trên iOS và Android, favicon được dùng làm biểu tượng khi người dùng thêm website vào màn hình chính (‘Add to Home Screen’). Đây là yếu tố then chốt cho chiến lược PWA (Progressive Web App).
Cách hoạt động
Khi người dùng nhập URL hoặc nhấp vào kết quả tìm kiếm, trình duyệt tự động gửi yêu cầu tải favicon theo thứ tự ưu tiên sau (nếu cấu hình đúng):
- Tìm tệp
favicon.icoở thư mục gốc (https://example.com/favicon.ico). - Nếu không tìm thấy, trình duyệt kiểm tra thẻ
<link>trong phần<head>của HTML — ví dụ:<link rel="icon" href="/images/favicon.svg">. - Với các định dạng hiện đại (SVG, PNG), trình duyệt sẽ ưu tiên phiên bản có độ phân giải phù hợp nhất dựa trên
sizes,typevàmedia(nếu khai báo).
Lưu ý: Trình duyệt có thể lưu favicon vào bộ nhớ đệm lâu dài — nên thay đổi tên tệp hoặc thêm tham số version khi cập nhật để tránh lỗi hiển thị cũ.
Hướng dẫn thực hiện
Dưới đây là cách triển khai favicon chuẩn, tương thích đa nền tảng và tối ưu SEO:
- Thiết kế biểu tượng: Dùng logo đơn giản, dễ nhận diện ở kích thước nhỏ. Nên có nền trong suốt (PNG/SVG) hoặc nền trắng/đen (ICO). Tránh chi tiết nhỏ, chữ nhỏ hoặc gradient phức tạp.
- Xuất nhiều định dạng & kích thước:
favicon.ico: hỗ trợ tất cả trình duyệt cũ và mới (bắt buộc cho IE, Edge cũ).favicon-16x16.png,favicon-32x32.png: cho màn hình Retina và máy tính hiện đại.favicon.svg: nhẹ, co giãn tốt, hỗ trợ màu động — nhưng chưa được hỗ trợ đầy đủ trên Safari (iOS/iPadOS trước phiên bản 16.4).apple-touch-icon.png(180×180 px): bắt buộc nếu muốn hiển thị đúng khi thêm vào màn hình chính trên iOS.
- Đặt tệp vào đúng vị trí: Lưu
favicon.icoở thư mục gốc. Các tệp khác có thể đặt trong thư mục/images/hoặc/assets/. - Thêm thẻ HTML vào <head>:
<!-- Favicon cơ bản -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Cho Chrome, Firefox, Opera -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Cho iOS -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Cho Android (Web App Manifest) -->
<link rel="manifest" href="/site.webmanifest">Ghi chú: Thứ tự khai báo rất quan trọng — trình duyệt chọn phiên bản phù hợp nhất dựa trên thứ tự và thuộc tính type, sizes. Đặt svg trước png để ưu tiên định dạng hiện đại.
Lỗi thường gặp
| Lỗi | Nguyên nhân | Cách khắc phục |
|---|---|---|
| Favicon không hiển thị dù đã upload | Trình duyệt cache quá lâu; thiếu thẻ <link> trong <head>; đường dẫn sai hoặc phân quyền file (403/404) |
Xóa cache trình duyệt, kiểm tra console (F12 → Console/Network), dùng công cụ RealFaviconGenerator Checker, đảm bảo tệp có quyền đọc (chmod 644) |
| Hiển thị favicon mặc định (globe hoặc chữ ‘E’) | Không có tệp favicon.ico ở gốc + không khai báo thẻ <link> nào |
Thêm <link rel="icon" href="/favicon.ico"> vào <head> hoặc đặt tệp favicon.ico đúng vị trí |
| Favicon bị mờ hoặc lệch trên iOS | Ảnh apple-touch-icon.png thiếu kích thước 180×180 px hoặc có viền, góc bo tròn không chuẩn |
Xuất đúng kích thước 180×180 px, nền trong suốt hoặc trắng, không bo góc — iOS tự bo góc khi thêm vào màn hình chính |
Ví dụ thực tế
Website Tiki.vn sử dụng favicon là chữ ‘T’ màu cam trong nền trắng — đơn giản, dễ nhận diện, hiển thị rõ cả ở 16×16 px. Họ khai báo đầy đủ:
/favicon.ico(16×16 & 32×32 trong cùng tệp)/favicon-32x32.png,/favicon-16x16.png/apple-touch-icon.png(180×180)- Thẻ
<link rel="manifest">trỏ tới/manifest.json
Kết quả: Biểu tượng xuất hiện rõ ràng trên mọi tab, trong kết quả tìm kiếm Google trên mobile, và khi người dùng ‘Add to Home Screen’ — góp phần tăng tỷ lệ cài đặt app web lên 22% (theo báo cáo nội bộ năm 2023).
Câu hỏi thường gặp
Favicon có ảnh hưởng đến thứ hạng Google không?
Không — Google khẳng định favicon không phải yếu tố xếp hạng. Tuy nhiên, nó ảnh hưởng đến hành vi người dùng (tỷ lệ nhấp, thời gian ở lại, quay lại), những tín hiệu gián tiếp mà Google theo dõi qua Analytics và Search Console.
Có bắt buộc phải dùng favicon.ico không?
Không bắt buộc về mặt kỹ thuật, nhưng rất nên dùng. Vì đây là định dạng duy nhất được hỗ trợ bởi mọi trình duyệt — kể cả Internet Explorer và các trình duyệt cũ. Nếu chỉ dùng SVG/PNG, một bộ phận nhỏ người dùng (dưới 1%) sẽ thấy biểu tượng mặc định.
Có thể dùng SVG làm favicon không?
Có thể — và ngày càng phổ biến. SVG được hỗ trợ đầy đủ trên Chrome, Firefox, Edge (từ phiên bản 79+), và Opera. Tuy nhiên, Safari trên iOS/iPadOS chỉ hỗ trợ SVG làm favicon từ phiên bản 16.4 trở đi. Với các phiên bản cũ hơn, cần cung cấp fallback bằng PNG hoặc ICO.
