Cách tạo Favicon cho trang web của bạn: Hướng dẫn về tệp ICO

Favicon (viết tắt của "biểu tượng yêu thích") là biểu tượng nhỏ được liên kết với trang web của bạn. Trình duyệt hiển thị nó trong thanh tab bên cạnh tiêu đề trang của bạn, trong danh sách dấu trang và trong lịch sử trình duyệt. Thiết bị di động sử dụng nó khi người dùng thêm trang web của bạn vào màn hình chính của họ. Công cụ tìm kiếm có thể hiển thị nó trong kết quả. Đây là một trong những yếu tố hình ảnh nhỏ nhất trên trang web của bạn nhưng là một trong những yếu tố được nhìn thấy thường xuyên nhất.

Các bối cảnh khác nhau hiển thị favicon của bạn ở các kích cỡ khác nhau. Để bao gồm tất cả các trường hợp sử dụng, bạn cần một số phiên bản:

16x16 pixel - Tab trình duyệt. Đây là kích thước favicon cổ điển và là phiên bản nhỏ nhất bạn cần. 32x32 pixel — Phím tắt trên thanh tác vụ, tab trình duyệt mới hơn trên màn hình có độ phân giải cao. 48x48 pixel — Phím tắt trên màn hình Windows và biểu tượng trang web.

180x180 pixel - Biểu tượng cảm ứng của Apple. Đây là những gì iOS sử dụng khi ai đó thêm trang web của bạn vào màn hình chính của họ. Đây là kích thước di động quan trọng nhất. 192x192 pixel — Biểu tượng màn hình chính của Android Chrome và biểu tượng PWA (Ứng dụng web lũy tiến). 512x512 pixel — Màn hình giật gân PWA và hộp thoại cài đặt Android.

Định dạng ICO: Định dạng favicon gốc và là định dạng duy nhất hoạt động ở mọi nơi — kể cả các trình duyệt rất cũ và Internet Explorer. Tệp ICO có thể gộp nhiều kích thước vào một tệp duy nhất (thường là 16x16, 32x32 và 48x48). Để có khả năng tương thích tối đa, mọi trang web nên có tệp favicon.ico trong thư mục gốc. các Công cụ chuyển đổi PNG sang ICO trên iformat.io làm cho việc tạo một cái trở nên đơn giản.

định dạng PNG: Sự thay thế hiện đại. Các favicon PNG được tạo đơn giản hơn (một hình ảnh cho mỗi tệp) và hỗ trợ độ trong suốt hoàn toàn. Tất cả các trình duyệt hiện đại đều hỗ trợ favicon PNG. Nhược điểm là bạn cần các tệp riêng biệt cho từng kích thước và các trình duyệt quá cũ có thể không hỗ trợ chúng.

Định dạng SVG: Tùy chọn mới nhất. Vì SVG là định dạng vectơ nên một tệp duy nhất có tỷ lệ hoàn hảo theo mọi kích thước — không có pixel, không có nhiều tệp. Biểu tượng yêu thích SVG được Chrome, Firefox và Edge hỗ trợ nhưng không được hỗ trợ bởi Safari (kể từ đầu năm 2026). Favicon SVG cũng hỗ trợ thích ứng chế độ tối thông qua các truy vấn phương tiện CSS, điều mà PNG và ICO không thể làm được.

Nguyên tắc quan trọng nhất của thiết kế favicon: giữ cho nó đơn giản. Biểu tượng của bạn sẽ được hiển thị nhỏ ở mức 16x16 pixel - tức là một lưới chỉ có 256 ô vuông. Các chi tiết nhỏ, đường kẻ mỏng và văn bản nhỏ sẽ không thể đọc được ở kích thước đó. Favicon tốt nhất là hình dạng đậm, dễ nhận biết với độ tương phản cao.

Sử dụng logo của bạn nếu nó hoạt động ở kích thước nhỏ. Nhiều công ty chỉ sử dụng chữ cái đầu tiên trong tên của họ hoặc một phiên bản đơn giản của nhãn hiệu logo của họ. Tránh chụp ảnh — chúng trở thành các đốm màu không thể nhận dạng được ở kích thước 16x16. Màu sắc đồng nhất và hình dạng hình học đơn giản hoạt động tốt nhất. Kiểm tra thiết kế của bạn bằng cách xem nó ở kích thước 16x16 pixel trước khi thực hiện.

Bắt đầu bằng hình ảnh PNG hình vuông có kích thước tối thiểu 512x512 pixel. Nguồn lớn hơn mang lại cho bạn kết quả rõ ràng hơn khi thu nhỏ lại. Sử dụng Công cụ chuyển đổi PNG sang ICO để tạo tệp ICO của bạn. Trình chuyển đổi tạo ra một ICO nhiều kích thước chứa các phiên bản 16x16, 32x32 và 48x48 — tất cả đều từ hình ảnh nguồn duy nhất của bạn.

Nếu hình ảnh nguồn của bạn là JPG (chẳng hạn như logo được xuất từ công cụ thiết kế), hãy sử dụng Công cụ chuyển đổi JPG sang ICO thay vì. Đối với các logo vector ở định dạng SVG, Công cụ chuyển đổi SVG sang ICO tạo ra kết quả sắc nét nhất vì nó hiển thị vectơ ở mỗi kích thước mục tiêu.

Đặt tệp favicon.ico vào thư mục gốc của trang web của bạn. Hầu hết các trình duyệt sẽ tự động tìm thấy nó tại /favicon.ico ngay cả khi không có thẻ HTML. Nhưng để kiểm soát rõ ràng và hỗ trợ tất cả các định dạng, hãy thêm các thẻ này vào trong HTML của bạn <head> phần:

<link rel="icon" type="image/x-icon" href="/favicon.ico"> - Biểu tượng ICO cổ điển. <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> - Favicon PNG cho các trình duyệt hiện đại. <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> - Biểu tượng màn hình chính của thiết bị Apple.

Biểu tượng Apple Touch (180x180 PNG) được hiển thị khi người dùng iOS thêm trang web của bạn vào màn hình chính của họ. Tạo phiên bản PNG 180x180 pixel cho biểu tượng của bạn với một số phần đệm xung quanh các cạnh - iOS sẽ áp dụng các góc bo tròn của riêng nó. Đặt tên là apple-touch-icon.png và tham chiếu nó trong HTML của bạn.

Đối với Android và Ứng dụng web lũy tiến, bạn cần có biểu tượng PNG 192x192 và 512x512. Chúng thường được tham chiếu trong tệp kê khai ứng dụng web (manifest.json hoặc site.webmanifest). Tệp kê khai cũng cho phép bạn đặt tên ứng dụng, màu chủ đề và chế độ hiển thị khi người dùng cài đặt trang web của bạn dưới dạng ứng dụng.

Sử dụng quá nhiều chi tiết: Một logo phức tạp với những đường nét mảnh và văn bản nhỏ trông rất đẹp ở kích thước 200px nhưng trở thành vết nhòe không thể đọc được ở kích thước 16px. Đơn giản hóa một cách tàn nhẫn. Quên chế độ tối: Nếu biểu tượng yêu thích của bạn sử dụng màu tối trên nền trong suốt, nó sẽ ẩn trong các trình duyệt có thanh tab tối. Hãy cân nhắc thêm đường viền sáng hoặc sử dụng biểu tượng yêu thích SVG với CSS chế độ tối.

Không thử nghiệm ở kích thước thực tế: Luôn xem trước favicon của bạn ở kích thước 16x16 trong tab trình duyệt thực tế. Những gì trông đẹp mắt trong công cụ thiết kế của bạn ở mức thu phóng 400% có thể không hoạt động ở kích thước thực. Bỏ qua tệp ICO: Mặc dù favicon PNG hoạt động trong các trình duyệt hiện đại, nhưng việc có favicon.ico trong thư mục gốc của bạn sẽ đảm bảo khả năng tương thích với mọi trình duyệt và trình thu thập thông tin, bao gồm cả các hệ thống cũ.

Sau khi tải lên các tệp favicon của bạn và thêm HTML, hãy kiểm tra trên nhiều trình duyệt: tối thiểu là Chrome, Firefox, Safari và Edge. Kiểm tra xem biểu tượng có xuất hiện chính xác trong tab, trong dấu trang hay không (đánh dấu trang và xác minh) và trên thiết bị di động (thêm vào màn hình chính trên cả iOS và Android). Bộ nhớ đệm của trình duyệt có thể hoạt động mạnh với favicon — nếu bạn không thấy biểu tượng mới của mình, hãy thử xóa bộ nhớ đệm hoặc mở cửa sổ ẩn danh.

Nếu bạn cần đi theo hướng khác - trích xuất các biểu tượng từ tệp ICO hiện có - thì Công cụ chuyển đổi ICO sang PNG trích xuất các hình ảnh nhúng. Điều này hữu ích khi bạn cần cập nhật favicon nhưng chỉ có tệp ICO chứ không phải tác phẩm nghệ thuật nguồn gốc.

Một favicon thích hợp mất năm phút để tạo nhưng mang lại cho trang web của bạn vẻ ngoài bóng bẩy, chuyên nghiệp. Bắt đầu với một thiết kế đơn giản, táo bạo, tạo tệp ICO của bạn bằng trình chuyển đổi trực tuyến, thêm thẻ HTML và thử nghiệm trên các trình duyệt. Trang web của bạn sẽ trông hoàn chỉnh — và người dùng của bạn sẽ có thể tìm thấy tab của bạn trong số hàng chục tab họ đã mở.