Favicon là gì và tại sao nó quan trọng với website của bạn?

Favicon (viết tắt của "favorite icon", nghĩa là biểu tượng yêu thích) là hình ảnh vuông nhỏ đại diện cho một website trên tab trình duyệt, dấu trang, danh sách lịch sử, kết quả tìm kiếm Google, màn hình chính điện thoại và các ứng dụng web đã cài đặt. Favicon quan trọng vì nó mang lại cho website một diện mạo dễ nhận biết ngay từ cái nhìn đầu tiên, giúp bạn dễ tìm thấy trang giữa nhiều tab đang mở, cho thấy website chuyên nghiệp và đáng tin cậy, và hiện được hiển thị cạnh tên website của bạn trong kết quả Google. Nếu không có favicon, khách truy cập sẽ thấy biểu tượng quả địa cầu hoặc trang trống mặc định, còn máy chủ của bạn sẽ ghi đầy nhật ký bằng các lỗi 404. Bạn có thể tạo bộ favicon hoàn chỉnh miễn phí bằng trình tạo favicon MakeFav.

Favicon là gì?

Favicon là một hình ảnh thương hiệu nhỏ, thường là phiên bản đơn giản hóa của logo hoặc một chữ cái, một biểu tượng duy nhất, mà trình duyệt và các phần mềm khác tải từ website của bạn để hiển thị ở bất cứ nơi nào cần một dấu hiệu nhận diện gọn nhẹ. Trên trình duyệt máy tính, nó thường được vẽ ở kích thước 16 x 16 pixel CSS, tuy nhiên bản thân tệp nên lớn hơn để vẫn sắc nét trên các màn hình mật độ điểm ảnh cao.

Về mặt kỹ thuật, favicon chỉ là một tệp hình ảnh được tham chiếu từ HTML của bạn (hoặc nằm ở vị trí mặc định) và được user agent tải xuống riêng biệt với nội dung trang. Ngày nay, "favicon" hiếm khi chỉ là một tệp duy nhất. Một website hiện đại thường cung cấp nhiều phiên bản của cùng một biểu tượng để trình duyệt, công cụ tìm kiếm, iOS và Android đều nhận được định dạng và kích thước phù hợp.

Lịch sử ngắn gọn của favicon

Favicon ra đời từ tháng 3 năm 1999, khi Microsoft phát hành Internet Explorer 5. Trình duyệt này cho phép người dùng lưu trang vào danh sách "Favorites", đồng thời tìm một tệp biểu tượng nhỏ tên favicon.ico ở thư mục gốc của website để hiển thị bên cạnh mỗi mục đã lưu. Ý tưởng rất đơn giản: nếu website cung cấp /favicon.ico, biểu tượng sẽ xuất hiện cạnh dấu trang.

Các trình duyệt khác sớm áp dụng tính năng này, và việc duyệt web theo tab khiến nó hữu ích hơn nhiều. Khi tab trở thành cách điều hướng chính, favicon chuyển từ một vật trang trí cho dấu trang thành công cụ hỗ trợ điều hướng cốt lõi. Qua nhiều năm, cách tiếp cận này đã phát triển:

• Đầu những năm 2000: phần tử <link rel="icon"> cho phép website trỏ đến biểu tượng ở bất kỳ URL nào thay vì chỉ ở thư mục gốc, và các trình duyệt không phải IE bắt đầu chấp nhận tệp PNG và GIF.
• Những năm 2010: Apple giới thiệu apple-touch-icon cho màn hình chính iOS, còn Android và Windows bổ sung các quy ước riêng như biểu tượng manifest và hình ảnh tile.
• Ngày nay: favicon SVG, web app manifest, biểu tượng thích ứng chế độ tối và các yêu cầu về favicon trong kết quả tìm kiếm của Google đã biến favicon thành một phần nhỏ nhưng thực sự của cấu hình kỹ thuật website.

Favicon xuất hiện ở đâu hiện nay

Favicon của bạn được hiển thị ở nhiều nơi hơn là chỉ tab trình duyệt. Những nơi chính gồm:

• Tab trình duyệt: vị trí dễ thấy nhất, nơi biểu tượng thường là thứ duy nhất bạn nhìn thấy khi mở nhiều tab.
• Dấu trang và mục yêu thích: biểu tượng nằm cạnh tiêu đề trang trong thanh dấu trang và các menu.
• Lịch sử và các trang truy cập nhiều nhất: trình duyệt hiển thị favicon trong danh sách lịch sử và trên trang tab mới.
• Kết quả tìm kiếm Google: trên cả di động lẫn máy tính, Google hiển thị favicon của website cạnh tên và URL của trang.
• Màn hình chính: khi khách truy cập thêm website của bạn vào màn hình chính trên iOS hoặc Android, touch icon hoặc biểu tượng manifest sẽ trở thành lối tắt giống như ứng dụng.
• PWA đã cài đặt: một ứng dụng web tiến bộ (PWA) dùng các biểu tượng trong web app manifest cho biểu tượng trình khởi chạy, màn hình chờ và trình chuyển đổi tác vụ.
• Windows tile và trang được ghim: các phiên bản Windows và Edge cũ dùng hình ảnh tile được định nghĩa cho trang được ghim; các phiên bản hiện đại chủ yếu dùng lại biểu tượng tiêu chuẩn của bạn.
• Xem trước liên kết trong một số ứng dụng: một số công cụ trò chuyện và năng suất (Slack là ví dụ nổi tiếng) hiển thị favicon của website bên cạnh liên kết được mở rộng. Hầu hết bản xem trước chủ yếu dựa vào hình ảnh Open Graph, nhưng favicon thường cung cấp dấu hiệu thương hiệu nhỏ đó.

Vì sao favicon quan trọng với website của bạn

Nhận diện thương hiệu

Con người nhận ra màu sắc và hình khối nhanh hơn đọc chữ. Một biểu tượng nhất quán lặp lại trên tab, dấu trang và kết quả tìm kiếm tạo nên sự quen thuộc mỗi lần ai đó nhìn thấy nó, đó là sự hiện diện thương hiệu miễn phí ở mỗi lượt truy cập.

Lòng tin và độ uy tín

Thiếu favicon khiến website trông như chưa hoàn thiện. Một biểu tượng gọn gàng, hiển thị đúng là tín hiệu nhỏ cho thấy ai đó quan tâm đến chi tiết, từ đó củng cố nhận thức rằng website là hợp pháp. Đó không phải là tính năng bảo mật, và các website lừa đảo cũng có thể sao chép biểu tượng, nhưng một biểu tượng mặc định trống hiếm khi giúp doanh nghiệp trông có uy tín.

Tỷ lệ nhấp trong kết quả tìm kiếm

Vì Google hiển thị favicon cạnh kết quả của bạn, nó trở thành một phần trong cách kết quả của bạn trông so với đối thủ. Google không công bố tác động xếp hạng nào của favicon, và bạn không nên kỳ vọng thứ hạng sẽ tăng. Lợi ích nằm ở khả năng nhận diện thị giác: người dùng biết biểu tượng của bạn sẽ dễ nhận ra và chọn kết quả của bạn hơn, đặc biệt trên di động nơi kết quả hiển thị gọn.

Dễ sử dụng khi mở nhiều tab

Khi trình duyệt mở hai mươi tab, tiêu đề bị cắt đến mức không còn gì và chỉ còn lại favicon. Một biểu tượng đặc trưng giúp mọi người tìm ra tab của bạn ngay lập tức và quay lại đó thay vì mở một tab trùng lặp hoặc quên mất nó.

Ấn tượng chuyên nghiệp

Một favicon được thiết kế tốt thể hiện sự chăm chút giống như phần còn lại của website. Dù là trang sản phẩm, tài liệu, blog hay ứng dụng web, đây là một trong những điểm chỉn chu rẻ nhất bạn có thể bổ sung.

Khả năng tìm tab dễ dàng hơn

Biểu tượng giúp những người quét bằng mắt thay vì đọc chữ, bao gồm người mắc chứng khó đọc hoặc có khác biệt về nhận thức, và bất kỳ ai chuyển qua lại nhanh giữa các tác vụ. Một biểu tượng có độ tương phản cao và hình dạng đơn giản sẽ dễ nhận ra hơn. Tuy nhiên, hãy nhớ rằng favicon chỉ là phần bổ trợ: nó không thay thế tiêu đề trang rõ ràng, thứ mà trình đọc màn hình và công nghệ hỗ trợ dựa vào.

Điều gì xảy ra nếu bạn không có favicon

Trình duyệt tự động yêu cầu /favicon.ico từ thư mục gốc của tên miền, ngay cả khi HTML của bạn không đề cập đến nó. Nếu tệp không tồn tại, sẽ xảy ra một số điều:

• Biểu tượng chung: khách truy cập thấy biểu tượng quả địa cầu, tài liệu hoặc biểu tượng trống mặc định trên tab và dấu trang, trông rất vô danh.
• Lỗi 404 trong nhật ký: mỗi trình duyệt yêu cầu tệp này đều tạo ra một yêu cầu thất bại. Trên các website đông truy cập, điều này gây nhiễu cho nhật ký truy cập, giám sát lỗi và phân tích, và có thể che khuất các vấn đề thật.
• Không có biểu tượng trong kết quả Google: nếu không có favicon hợp lệ và có thể thu thập dữ liệu, Google sẽ hiển thị biểu tượng giữ chỗ mặc định cạnh kết quả của bạn.
• Yêu cầu lãng phí: trình duyệt có thể thử lại, thêm tải nhỏ nhưng vô ích lên máy chủ của bạn.

Ngay cả một biểu tượng rất đơn giản cũng tốt hơn không có gì, vì nó loại bỏ các lỗi 404 và mang đến cho người dùng thứ gì đó dễ nhận biết.

Giải thích các định dạng favicon

Không có định dạng đơn lẻ nào bao phủ mọi nền tảng, vì vậy hầu hết website dùng một bộ nhỏ các tệp.

Hình ảnh tile Windows cũ (cấu hình qua browserconfig.xml) từng cần thiết cho Internet Explorer 11 và Edge đời cũ. Hiện nay chúng hiếm khi cần, trừ khi bạn phải hỗ trợ những môi trường đó.

Hướng dẫn về favicon của Google cho kết quả tìm kiếm

Nếu muốn biểu tượng của mình xuất hiện trên Google Search, hãy làm theo các yêu cầu Google đã công bố:

• Kích thước: hình ảnh phải vuông (tỷ lệ 1:1) và là bội số của 48 pixel, chẳng hạn 48x48, 96x96 hoặc 144x144. Sau đó Google thu nhỏ về 16x16 để hiển thị. Kích thước tối thiểu được hỗ trợ là 8x8, nhưng nên dùng 48x48 trở lên.
• Định dạng: mọi định dạng mà trình duyệt hỗ trợ đều dùng được, gồm ICO, PNG và SVG.
• URL ổn định: đừng thay đổi URL favicon thường xuyên. Một địa chỉ ổn định giúp Google luôn cập nhật biểu tượng của bạn.
• Có thể thu thập dữ liệu: cả tệp favicon và trang chủ của bạn đều phải truy cập được đối với Googlebot. Đừng chặn chúng trong robots.txt hoặc đặt sau màn hình đăng nhập.
• Một khai báo cho mỗi website: biểu tượng gắn với trang chủ của website, vì vậy hãy đặt thẻ <link> trong phần head của trang chủ.
• Đại diện và phù hợp: biểu tượng nên phản ánh thương hiệu của bạn, và Google có thể thay biểu tượng phản cảm hoặc gây hiểu lầm bằng biểu tượng mặc định.

Sau khi bạn đăng hoặc thay đổi favicon, Google có thể mất vài ngày đến vài tuần để thu thập lại và cập nhật, vì vậy đừng mong thay đổi xảy ra ngay lập tức.

Cách tạo favicon nhanh chóng với MakeFav

Bạn không cần phần mềm thiết kế hay dòng lệnh. Trình tạo MakeFav biến một hình ảnh gốc thành các tệp được mô tả ở trên.

1. Chuẩn bị hình ảnh. Dùng logo hoặc biểu tượng vuông có kích thước 512 x 512 px trở lên. Các hình dạng đơn giản hiệu quả nhất vì biểu tượng sẽ được nhìn ở 16 px.
2. Tải lên tại trang chủ MakeFav, hoặc mở trình chỉnh sửa để điều chỉnh hình ảnh, nền và khoảng đệm trước khi xuất.
3. Xem trước kết quả ở kích thước nhỏ và trên nền sáng lẫn tối để chắc chắn biểu tượng vẫn dễ đọc.
4. Tải gói về. Gói chứa tệp ICO, các kích thước PNG, Apple touch icon, biểu tượng manifest và đoạn mã HTML để dán vào.
5. Tải các tệp lên thư mục gốc của website để có thể truy cập qua các đường dẫn như /favicon.ico.
6. Thêm HTML vào <head> của mọi trang, hoặc vào bố cục hay template dùng chung của bạn.
7. Kiểm tra bằng công cụ kiểm tra favicon, sau đó xóa bộ nhớ đệm trình duyệt và tải lại để thấy biểu tượng mới.

Đoạn mã HTML ví dụ

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Thuộc tính sizes="48x48" trên liên kết ICO giúp trình duyệt ưu tiên SVG khi hỗ trợ, đồng thời vẫn giữ ICO làm phương án dự phòng. Tệp PNG 96 px đáp ứng quy tắc bội số của 48 do Google đặt ra.

Web app manifest ví dụ

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Nếu bạn làm việc với quy trình build hoặc muốn tự động hóa việc tạo biểu tượng, hãy xem tài nguyên dành cho nhà phát triển.

Mẹo thiết kế favicon hiệu quả

• Giữ sự đơn giản. Một hình khối, một chữ cái hoặc một monogram đậm nét tốt hơn một logo chi tiết bị nhòe thành mảng ở 16 px.
• Dùng độ tương phản mạnh. Đảm bảo biểu tượng hiển thị rõ trên cả giao diện trình duyệt sáng lẫn tối. Một ô nền có màu sẽ hữu ích.
• Tránh chữ. Một chữ cái đầu thì ổn; các từ không thể đọc được ở kích thước này.
• Chừa một chút khoảng đệm cho biểu tượng maskable và biểu tượng bo góc để không có gì quan trọng bị cắt mất.
• Giữ sự nhất quán với logo và màu thương hiệu để favicon củng cố khả năng nhận diện.
• Thử trên thiết bị thật và kiểm tra giao diện của nó trên tab, dấu trang và kết quả Google.

Các vấn đề favicon thường gặp

Nếu biểu tượng không hiển thị, nguyên nhân thường là bộ nhớ đệm, đường dẫn sai và tệp bị chặn. Trình duyệt lưu đệm favicon rất mạnh, nên làm mới cưỡng bức hoặc mở cửa sổ riêng tư mới thường đủ để thấy bản cập nhật. Hãy kiểm tra URL tệp trả về mã trạng thái 200 và loại nội dung đúng, và thẻ <link> nằm trong <head>. Với tìm kiếm, hãy đảm bảo robots.txt không chặn biểu tượng hay trang chủ. Công cụ kiểm tra MakeFav có thể giúp bạn phát hiện nhanh các vấn đề này.

Câu hỏi thường gặp

Favicon là viết tắt của gì?

Favicon là viết tắt của "favorite icon" (biểu tượng yêu thích). Cái tên bắt nguồn từ Internet Explorer 5, vào năm 1999 lần đầu dùng một tệp biểu tượng nhỏ để trang trí các mục trong danh sách Favorites của trình duyệt. Thuật ngữ này vẫn được dùng dù biểu tượng giờ đây xuất hiện ở nhiều nơi khác.

Favicon có giúp ích cho SEO không?

Favicon không phải là yếu tố xếp hạng trực tiếp. Tuy nhiên, nó xuất hiện cạnh tên website của bạn trong kết quả Google trên di động và máy tính, nên có thể cải thiện nhận diện thương hiệu và vẻ hấp dẫn của kết quả, từ đó gián tiếp hỗ trợ lượt nhấp. Tuân thủ hướng dẫn của Google là điều giúp biểu tượng đủ điều kiện được hiển thị.

Favicon nên có kích thước bao nhiêu?

Với Google Search, hãy dùng hình ảnh vuông là bội số của 48 pixel, chẳng hạn 48x48 hoặc 96x96. Để phủ rộng hơn, hãy cung cấp thêm tệp ICO, Apple touch icon 180x180 và các biểu tượng manifest 192x192 và 512x512. SVG là một bổ sung tốt nhờ khả năng co giãn.

Tôi có còn cần favicon.ico nếu đã dùng PNG hoặc SVG không?

Vẫn nên có. Trình duyệt và một số công cụ yêu cầu /favicon.ico theo mặc định, và phần mềm cũ phụ thuộc vào nó. Giữ một tệp ICO ở thư mục gốc website giúp tránh lỗi 404 và mang lại phương án dự phòng an toàn khi SVG hoặc PNG không được hỗ trợ.

Tại sao favicon của tôi không cập nhật?

Trình duyệt và công cụ tìm kiếm lưu đệm favicon trong thời gian dài. Hãy thử làm mới cưỡng bức, mở cửa sổ riêng tư hoặc xóa bộ nhớ đệm. Đảm bảo đường dẫn tệp đúng và tệp mới đang được phục vụ. Trên Google Search, một biểu tượng đã thay đổi có thể mất vài ngày hoặc vài tuần để được thu thập lại và cập nhật.