Favicon Là Gì Cách Tạo Favicon Cho Website

Q: Favicon nên dùng kích thước và định dạng nào?

Nên thiết kế favicon gốc ở 512x512 px rồi xuất ra các kích thước nhỏ như 16x16, 32x32, 180x180 (iOS) và 192x192 (Android, PWA). Về định dạng, dùng .PNG cho favicon chuẩn vì sắc nét và nhẹ, kèm thêm .ICO để đảm bảo tương thích với mọi trình duyệt.

Favicon là biểu tượng nhỏ hiển thị trên tab trình duyệt — chi tiết nhỏ nhưng giúp thương hiệu chuyên nghiệp và dễ nhận diện. Bài viết hướng dẫn favicon là gì và cách tạo favicon cho website.

Mục lục

Favicon là gì?

Trong gần 10 năm thiết kế Website WordPress tại Halo Media, đội ngũ chúng tôi đã ứng dụng kiến thức về Favicon tạo favicon cho Website cho hơn 500 dự án khách hàng. Theo kinh nghiệm của Halo Media, đây là yếu tố quan trọng cần nắm vững — đặc biệt với doanh nghiệp muốn website chuẩn SEO ngay từ ngày đầu publish.

Favicon là viết tắt của “favorite icon”, còn được gọi là biểu tượng trang web hoặc biểu tượng lối tắt. Đây là hình ảnh nhỏ (thường là 16×16, 32×32 hoặc 48×48 pixel) xuất hiện:

Trên tab trình duyệt
Trong danh sách bookmark
Ở phần lịch sử duyệt web
Trên ứng dụng mobile (progressive web apps)
Khi lưu website ra màn hình chính điện thoại

Ví dụ:

Nếu bạn mở một trang như Google, bạn sẽ thấy logo chữ “G” nhỏ bên cạnh tên trang trong tab trình duyệt – đó là favicon.

Tại sao favicon lại quan trọng?

Tham khảo: WordPress Codex chính thức

Giúp tăng khả năng nhận diện thương hiệu

Favicon là phần mở rộng trực quan của thương hiệu. Dù chỉ là một biểu tượng nhỏ, nhưng nếu được thiết kế đúng cách, nó sẽ giúp người dùng:

Dễ dàng nhận ra website của bạn giữa hàng chục tab đang mở
Nhớ đến thương hiệu mỗi lần truy cập

Tăng tính chuyên nghiệp cho website

Một website có favicon trông gọn gàng, đáng tin cậy và chuyên nghiệp hơn trong mắt người dùng, đặc biệt khi bạn muốn tạo ấn tượng với khách hàng hoặc đối tác.

Cải thiện trải nghiệm người dùng

Người dùng mở nhiều tab cùng lúc? Một favicon rõ ràng giúp họ nhanh chóng xác định đúng trang, tránh nhầm lẫn.

Hỗ trợ SEO (gián tiếp)

Mặc dù favicon không phải yếu tố xếp hạng chính thức trong SEO, nhưng Google khuyến khích sử dụng favicon. Favicon còn có thể hiển thị trong kết quả tìm kiếm trên thiết bị di động, giúp tăng tỷ lệ click (CTR).

Kích thước favicon tiêu chuẩn

Nếu bạn đang triển khai dự án website mới, tham khảo Dịch vụ thiết kế Website chuẩn SEO của Halo Media — chúng tôi đã ứng dụng các best practices trong bài này cho 500+ khách hàng.

Hiện nay, để đảm bảo favicon hiển thị tốt trên mọi thiết bị (desktop, mobile, ứng dụng), bạn nên chuẩn bị nhiều kích thước khác nhau:

Kích thước	Mục đích
16×16 px	Trình duyệt web (tab)
32×32 px	Bookmark, shortcut
48×48 px	Thanh công cụ trình duyệt
96×96 px	Shortcut trên màn hình desktop
180×180 px	iOS (Apple touch icon)
192×192 px	Android devices, Progressive Web App (PWA)

Khuyến nghị: Nên thiết kế favicon ở kích thước lớn như 512×512 px, sau đó xuất ra các định dạng nhỏ hơn để dùng cho từng nền tảng.

Định dạng favicon phổ biến

.ICO – định dạng cổ điển, hỗ trợ nhiều kích thước trong một file (hợp với các trình duyệt cũ)
.PNG – sắc nét, nhẹ, được dùng nhiều nhất hiện nay
.SVG – dạng vector, có thể mở rộng không vỡ nét (trình duyệt hiện đại hỗ trợ tốt)
.GIF – favicon động (hiếm dùng, không khuyến nghị cho hiệu suất)

Tốt nhất: Dùng .PNG cho favicon chuẩn và .ICO để đảm bảo tương thích với mọi trình duyệt.

Hướng dẫn tạo favicon chi tiết từ A đến Z

Bước 1: Chuẩn bị file thiết kế

Bạn có thể dùng các công cụ thiết kế sau để tạo favicon:

Photoshop / Illustrator / Figma – dành cho dân thiết kế chuyên nghiệp
Canva – thiết kế nhanh, dễ dùng, có sẵn template
Favicon.io – tạo favicon từ văn bản, hình ảnh hoặc emoji
RealFaviconGenerator.net – tạo favicon đa nền tảng tự động

Lưu ý: Favicon nên đơn giản, ít chi tiết, có thể hiển thị rõ nét ở kích thước nhỏ.

Bước 2: Xuất favicon với các kích thước cần thiết

Dạng .ico: Dùng công cụ như favicon.io hoặc convertico.com để xuất file .ico
Dạng .png: Nên tạo các file 32x32, 180x180, 192x192… tùy theo nhu cầu
Dạng favicon.svg nếu bạn muốn dùng biểu tượng vector

Bước 3: Đưa favicon vào website

Cách 1: Chèn thủ công trong HTML

Dán đoạn mã vào trong thẻ <head> của website:

html

<span class="hljs-tag"><<span class="hljs-name">link</span></span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"image/png"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/favicon-32x32.png"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"32x32"</span>>
<span class="hljs-tag"><<span class="hljs-name">link</span></span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"apple-touch-icon"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/apple-touch-icon.png"</span>>
<span class="hljs-tag"><<span class="hljs-name">link</span></span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"shortcut icon"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/favicon.ico"</span>>

Cách 2: Với WordPress

Vào Giao diện (Appearance) > Tùy biến (Customize) > Site Identity
Tìm đến phần Site Icon (biểu tượng trang)
Tải favicon lên và lưu lại

Mẹo khi thiết kế favicon

Favicon là gì ? Cách tạo favicon cho Website

Đơn giản là chìa khóa: Đừng dùng quá nhiều chi tiết vì favicon rất nhỏ
Tương phản màu tốt: Nền và biểu tượng nên rõ ràng, dễ nhận diện
Giữ đúng tỉ lệ khung vuông: Tránh lệch bố cục
Thử nghiệm trước khi dùng chính thức: Kiểm tra trên các trình duyệt Chrome, Firefox, Safari, Edge…

Những lỗi thường gặp khi tạo favicon

Lỗi phổ biến	Nguyên nhân	Cách khắc phục
Không hiển thị favicon	Chưa khai báo đúng đường dẫn / thiếu thẻ `<link>`	Kiểm tra đường dẫn và cập nhật mã HTML
Favicon bị vỡ nét	Dùng ảnh quá nhỏ	Thiết kế ảnh lớn (512×512) rồi giảm kích thước
Không hiển thị trên mobile	Thiếu file `apple-touch-icon`	Thêm dòng `<link rel="apple-touch-icon" ...>`
Trình duyệt cũ không hỗ trợ	Dùng định dạng PNG	Bổ sung favicon.ico để đảm bảo tương thích

Kết luận

Dù nhỏ bé, favicon chính là “chữ ký thương hiệu” của bạn trên thế giới số. Nó giúp website trông chuyên nghiệp hơn, dễ nhận diện hơn và tăng độ tin tưởng cho người dùng khi truy cập.

Việc tạo favicon không khó – chỉ cần bạn:

Hiểu rõ kích thước và định dạng cần dùng
Thiết kế biểu tượng tối giản, rõ ràng
Gắn favicon đúng cách vào website

Lời khuyên cuối cùng: Nếu bạn đang xây dựng thương hiệu online, favicon không nên là thứ bị bỏ qua. Đôi khi, một biểu tượng nhỏ cũng đủ để người dùng nhớ đến bạn suốt đời.

Bài viết cùng chủ đề

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

Favicon là gì và nó hiển thị ở đâu?

Favicon (viết tắt của ‘favorite icon’) là biểu tượng nhỏ thường 16×16, 32×32 hoặc 48×48 pixel đại diện cho website. Nó xuất hiện trên tab trình duyệt, danh sách bookmark, lịch sử duyệt web và khi lưu trang ra màn hình chính điện thoại, giúp người dùng nhận diện thương hiệu nhanh chóng.

Favicon nên dùng kích thước và định dạng nào?

Nên thiết kế favicon gốc ở 512×512 px rồi xuất ra các kích thước nhỏ như 16×16, 32×32, 180×180 (iOS) và 192×192 (Android, PWA). Về định dạng, dùng .PNG cho favicon chuẩn vì sắc nét và nhẹ, kèm thêm .ICO để đảm bảo tương thích với mọi trình duyệt.

Cách thêm favicon vào website WordPress như thế nào?

Trong WordPress, bạn vào Giao diện (Appearance) > Tùy biến (Customize) > Site Identity, tìm phần Site Icon rồi tải favicon lên và lưu lại là xong. Nếu không dùng WordPress, bạn chèn thủ công thẻ vào phần của trang HTML.

Tại sao favicon của website không hiển thị?

Lỗi favicon không hiển thị thường do khai báo sai đường dẫn hoặc thiếu thẻ trong, nên cần kiểm tra lại đường dẫn và cập nhật mã HTML. Nếu không hiện trên mobile, hãy bổ sung file apple-touch-icon; nếu bị vỡ nét, hãy thiết kế ảnh lớn 512×512 rồi giảm kích thước.

Tham khảo: Tài liệu chính thức WordPress

Bài viết & dịch vụ liên quan

Đánh giá

Kinh nghiệm thiết kế website

Favicon Là Gì? Cách Tạo Favicon Cho Website

Favicon là gì?