Mở bất kỳ website nào trên trình duyệt, bạn sẽ thấy một hình nhỏ nằm ngay đầu tab, bên cạnh tên trang. Đó là favicon. Ít người để ý đến nó khi làm web, nhưng khi thiếu favicon hoặc khai báo sai định dạng, người dùng nhìn thấy ngay sự không hoàn chỉnh. Bài này giải thích favicon là gì, nó xuất hiện ở đâu, ba định dạng phổ biến, kích thước cần chuẩn bị và cách khai báo đúng trong HTML để mọi trình duyệt và thiết bị hiển thị đúng.
Favicon là gì
Favicon là hình ảnh nhỏ đại diện cho website, hiển thị ở tab trình duyệt, danh sách bookmark (dấu trang yêu thích) và nhiều vị trí khác. Tên gọi này ghép từ “favorite” (yêu thích) và “icon” (biểu tượng), xuất hiện lần đầu trong Internet Explorer 5 năm 1999 khi Microsoft dùng nó để nhận ra các trang được lưu vào mục Favorites.
Về mặt kỹ thuật, favicon là một file ảnh được khai báo trong phần <head> của HTML, hoặc đơn giản hơn là đặt tại đường dẫn /favicon.ico ở thư mục gốc của website. Trình duyệt tự động tìm file đó khi tải trang, kể cả khi không có khai báo rõ ràng trong HTML.
Favicon xuất hiện ở đâu trên trình duyệt và thiết bị
Nhiều người chỉ biết favicon là cái hình nhỏ ở tab trình duyệt, nhưng thực ra nó xuất hiện ở nhiều nơi hơn thế. Ở tab trình duyệt, khi mở nhiều trang cùng lúc, favicon là thứ giúp bạn phân biệt tab nào là tab nào chỉ bằng một cái nhìn, đặc biệt khi tên trang đã bị cắt ngắn vì tab quá hẹp.
Trong thanh bookmark, favicon xuất hiện bên trái tên trang. Khi bạn tắt nhãn chữ để tiết kiệm không gian, favicon là thứ duy nhất còn lại để nhận ra trang đó. Trong lịch sử duyệt web (Ctrl+H hoặc Cmd+Y trên macOS), mỗi địa chỉ cũng có favicon đi kèm giúp tìm nhanh hơn.
Ngoài trình duyệt, favicon còn hiển thị trên điện thoại khi người dùng lưu trang thành shortcut trên màn hình chính. Ở đây, trình duyệt dùng một phiên bản favicon kích thước lớn hơn, thường là 180×180 pixel cho iOS hoặc 192×192 pixel cho Android Chrome. Nếu không có file đúng kích thước, hệ điều hành sẽ tự co giãn ảnh gốc, thường ra kết quả mờ và không đẹp.
Kết quả tìm kiếm trên mobile cũng là một nơi favicon xuất hiện từ khoảng năm 2019. Vị trí này đặc biệt cần favicon đơn giản và tương phản cao, vì kích thước hiển thị rất nhỏ (khoảng 18×18 pixel được thu từ 32×32) nên những nét nhỏ và màu gần nhau đều không còn phân biệt được.
Ba định dạng favicon phổ biến và khi nào dùng cái nào
Có ba định dạng favicon được dùng phổ biến nhất hiện nay, mỗi định dạng có ưu điểm và trường hợp phù hợp riêng. Bảng dưới đây so sánh để bạn dễ chọn.
| Định dạng | Nền trong suốt | Không vỡ khi phóng to | Hỗ trợ trình duyệt | Ghi chú |
|---|---|---|---|---|
| ICO | Có | Không (ảnh điểm ảnh) | Tốt nhất, kể cả IE cũ | Có thể chứa nhiều kích thước trong một file duy nhất |
| PNG | Có | Không (ảnh điểm ảnh) | Rất tốt, mọi trình duyệt hiện đại | Phổ biến nhất hiện nay, dễ tạo |
| SVG | Có | Có (vector) | Tốt, Chrome 80 trở lên, Firefox 70 trở lên, Safari 14 trở lên | Không chạy trên IE; lý tưởng cho logo thiết kế đơn giản |
ICO là định dạng ra đời sớm nhất và vẫn còn hữu dụng vì một lý do thực tế: file ICO có thể chứa nhiều kích thước trong một file duy nhất (ví dụ vừa có 16×16 vừa có 32×32), trình duyệt tự chọn kích thước phù hợp. Đây cũng là định dạng duy nhất mà IE cũ hiểu đúng. Nếu bạn đặt favicon.ico ở thư mục gốc, mọi trình duyệt đều tìm thấy mà không cần khai báo thêm.
PNG là lựa chọn phổ biến nhất hiện nay. Ảnh PNG hỗ trợ nền trong suốt, dễ tạo bằng bất kỳ phần mềm thiết kế nào và mọi trình duyệt hiện đại đều hiểu. Nhược điểm duy nhất là vì là ảnh điểm ảnh (pixel-based, không tự co giãn tốt), cần chuẩn bị sẵn đúng kích thước thay vì dùng một file cho mọi nơi.
SVG là định dạng vector, nghĩa là chỉ cần một file duy nhất mà favicon vẫn sắc nét ở mọi kích thước, kể cả màn hình retina có độ phân giải cao gấp đôi. Chrome 80 ra mắt tháng 2/2020, Firefox 70 và Safari 14 đã hỗ trợ SVG favicon. Cần lưu ý SVG không chạy trên IE và một số trình duyệt cũ.
Cách thực tế nhất cho hầu hết website hiện nay: dùng PNG cho các kích thước nhỏ 16×16 và 32×32, dùng PNG hoặc SVG cho Apple touch icon 180×180, kèm một file favicon.ico ở thư mục gốc để phủ các trình duyệt cũ.
Kích thước favicon cần chuẩn bị cho một bộ đầy đủ
Không có một kích thước favicon duy nhất phù hợp mọi nơi. Mỗi vị trí và thiết bị hiển thị favicon cần một kích thước khác nhau. Bộ favicon đầy đủ cho website hiện đại thường gồm ít nhất các file sau.
- 16×16 px: kích thước cơ bản nhất, dùng trong tab trình duyệt và danh sách bookmark trên nhiều nền tảng.
- 32×32 px: dùng cho tab ở độ phân giải cao hơn, thanh taskbar của Windows và bookmark trên một số trình duyệt.
- 180×180 px: Apple touch icon, dùng khi người dùng lưu trang về màn hình chính của iPhone hoặc iPad. Khai báo bằng thẻ
<link rel="apple-touch-icon">. - 192×192 px: dùng cho Android Chrome khi lưu trang thành shortcut hoặc khi website có Progressive Web App (ứng dụng web lũy tiến) manifest.
- 512×512 px: dùng cho màn hình splash của PWA trên Android, khai báo trong file
site.webmanifest.
Ở kích thước 16×16, mọi chi tiết phức tạp đều biến mất. Nếu logo của bạn có nhiều nét nhỏ hoặc chữ, nên thiết kế phiên bản favicon riêng đơn giản hơn, thay vì co nhỏ logo đầy đủ vì kết quả thường mờ và không nhận ra được.
Cách khai báo favicon trong HTML
Cách đơn giản nhất là đặt file favicon.ico vào thư mục gốc của website (cùng chỗ với index.html). Trình duyệt tự tìm ở đường dẫn đó mà không cần khai báo. Tuy nhiên, cách này chỉ phủ được tab trình duyệt, không đủ cho Apple touch icon hay Android shortcut.
Để khai báo đầy đủ, thêm các thẻ sau vào trong phần <head> của HTML:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">File site.webmanifest là file JSON khai báo icon cho Android. Nội dung cơ bản của file đó bao gồm khai báo icon 192×192 và 512×512. Công cụ nhanh nhất để tạo toàn bộ bộ favicon là Real Favicon Generator: bạn upload logo hoặc ảnh nguồn, công cụ tự xuất đủ các kích thước và đoạn HTML cần dán vào <head>.
WordPress từ phiên bản 4.3 có tính năng “Site Icon” trong phần Customizer, cho phép upload ảnh và WordPress tự tạo các kích thước cần thiết. Bộ icon này đủ dùng cho hầu hết trường hợp, nhưng nếu cần hoàn chỉnh hơn, đặc biệt là phần PWA manifest, thì vẫn nên xử lý thêm bằng plugin hoặc thủ công.
Favicon ảnh hưởng đến nhận diện thương hiệu như thế nào
Khi người dùng mở 10 tab cùng lúc, tên trang bị cắt còn vài ký tự, favicon là thứ duy nhất giúp họ nhận ra tab của bạn không cần phải nhìn kỹ. Nếu favicon trông giống hệt favicon mặc định của trình duyệt, tab của bạn hòa vào đám đông, khách có thể nhầm hoặc mất thêm thời gian tìm lại.
Trong danh sách bookmark, vai trò của favicon còn lớn hơn. Nhiều người lưu bookmark nhưng tắt nhãn chữ để thoáng hơn, lúc đó favicon là thứ duy nhất còn lại. Thiếu favicon hoặc favicon mờ nhạt khó nhận ra thì bookmark đó thực tế gần như vô dụng, người dùng không nhớ đó là trang gì.
Trang của bạn trông đáng tin hơn trong danh sách kết quả tìm kiếm khi favicon rõ ràng và nhất quán với thương hiệu, so với trang chỉ có hình mặc định hoặc không có favicon. Đây là lý do favicon nhỏ nhưng không nên bỏ qua khi xây dựng nhận diện thương hiệu trực tuyến.
Người không rành kỹ thuật cần quan tâm đến đâu
Có một cách kiểm tra đơn giản: mở website của mình, nhìn lên tab trình duyệt, thấy hình nhỏ bên cạnh tên trang chưa? Nếu chưa thấy hoặc thấy hình mặc định của trình duyệt (tờ giấy trắng hoặc hình cầu) thì favicon chưa được thiết lập.
Thử thêm bước nữa: dùng Safari hoặc Chrome trên điện thoại, vào website rồi chọn “Thêm vào màn hình chính”. Shortcut vừa lưu trông như thế nào? Nếu hình nhỏ mờ hoặc bị cắt xén, khả năng cao Apple touch icon hoặc Android icon chưa được khai báo đúng.
Phần kỹ thuật để thiết lập favicon đúng cách (xử lý manifest, tối ưu kích thước, chọn định dạng phù hợp) thường do người làm web lo. Điều bạn cần chuẩn bị là logo hoặc hình ảnh nguồn có độ phân giải đủ cao, tốt nhất là dạng vector (SVG hoặc AI). Tương tự với phông chữ hiển thị trên website, bài viết về webfont là gì giải thích thêm về phần trình bày trực quan của trang, bạn đọc thêm để hiểu rõ hơn hai phần kỹ thuật này bổ sung cho nhau như thế nào.
Nếu dự án website của bạn cần hoàn thiện cả phần giao diện responsive lẫn các chi tiết kỹ thuật như favicon, meta và tốc độ tải trang, dịch vụ thiết kế website responsive của Web22 xử lý đầy đủ từ đầu đến cuối, không để sót phần nào.
Câu hỏi thường gặp về favicon
Favicon có ảnh hưởng đến SEO không?
Favicon không trực tiếp ảnh hưởng đến thứ hạng từ khóa. Tuy nhiên, Google hiển thị favicon cạnh tên miền ở kết quả tìm kiếm trên mobile, nên favicon rõ ràng và nhận ra được có thể giúp tỷ lệ nhấp vào kết quả (CTR) cao hơn vì trang trông đáng tin hơn so với trang không có favicon hoặc favicon không nhận ra được.
Tôi có thể dùng chính logo của mình làm favicon không?
Được, nhưng cần lưu ý: favicon nhỏ nhất chỉ 16×16 pixel. Nếu logo có nhiều chi tiết, chữ nhỏ hoặc màu sắc phức tạp, khi co xuống 16×16 sẽ thành một đốm mờ không nhận ra được. Trường hợp đó, tốt hơn là thiết kế riêng một biểu tượng đơn giản hơn, dùng ký tự đầu hoặc hình tượng trưng của thương hiệu thay vì logo đầy đủ.
Tôi phải làm gì nếu favicon đã thay đổi nhưng trình duyệt vẫn hiển thị favicon cũ?
Trình duyệt cache favicon để không tải lại mỗi lần vào trang. Cách nhanh nhất là mở tab ẩn danh (Incognito) và truy cập lại website, hoặc xóa cache của trình duyệt. Nếu cần buộc người dùng cũ thấy favicon mới, có thể thêm tham số phiên bản vào đường dẫn, ví dụ href="/favicon.png?v=2", trình duyệt sẽ coi đây là file mới và tải lại.
Website của tôi đang dùng WordPress, favicon được thiết lập ở đâu?
Trong WordPress, favicon được gọi là “Site Icon” (biểu tượng trang web). Vào Giao diện ngoài (Appearance), chọn Tùy chỉnh (Customize), tìm mục “Thông tin trang web” (Site Identity), ở đó bạn sẽ thấy phần upload Site Icon. WordPress tự tạo các kích thước cần thiết từ ảnh bạn upload, khuyến nghị upload ảnh vuông tối thiểu 512×512 pixel.