Ảnh thành Favicon: Tạo Biểu Tượng Website Từ Mọi Hình Ảnh

Q: Làm thế nào để tôi tham chiếu favicon trong HTML?

Với các thẻ trỏ đến từng kích thước và định dạng, cộng với cho iOS. Trình duyệt chọn sự phù hợp tốt nhất. Một bộ đầy đủ các thẻ liên kết bao phủ mọi nền tảng.

Cập nhật lần cuối: June 28, 2026. Hỗ trợ favicon trình duyệt đang phát triển; các kích thước và định dạng cốt lõi ở đây bao gồm bối cảnh hiện tại.

Favicon là biểu tượng nhỏ xuất hiện trên tab trình duyệt, danh sách đánh dấu trang và màn hình chính điện thoại khi ai đó lưu trang web của bạn. Chuyển đổi một hình ảnh thành favicon có nghĩa là tạo ra các loại tệp phù hợp với kích thước thích hợp để biểu tượng trông sắc nét ở mọi nơi nó xuất hiện — từ tab trình duyệt 16-pixel đến biểu tượng Apple Touch 180-pixel. Hướng dẫn này bao gồm các kích thước mà mỗi nền tảng yêu cầu, các định dạng tệp cần tạo và cách giữ cho biểu tượng dễ nhận biết ngay cả khi có kích thước nhỏ.

Trả lời nhanh: làm thế nào để tạo favicon từ một hình ảnh?

Bắt đầu với một hình ảnh nguồn vuông (hoặc cắt thành hình vuông bằng image cropper), thu nhỏ nó xuống các kích thước favicon tiêu chuẩn (16px, 32px, 180px, 512px), và xuất dưới dạng PNG cộng với tệp ICO cho các trình duyệt cũ. Tham chiếu chúng trong thẻ <head> HTML của bạn bằng các thẻ liên kết thích hợp. Hãy kiểm tra phiên bản 16px trên tab trình duyệt, bởi vì nếu biểu tượng không dễ nhận biết ở kích thước đó, thì dù có nhiều phiên bản lớn hơn cũng không khắc phục được. Cũng nên giữ lại phiên bản SVG nếu logo là vector, để hiển thị sắc nét trên màn hình DPI cao.

Favicon cần những kích thước nào?

Các ngữ cảnh khác nhau hiển thị favicon ở các kích thước khác nhau, và việc cung cấp đúng kích thước sẽ giúp nó sắc nét ở mọi nơi.

Size	File	Used for
16x16	ICO / PNG	Browser tab (legacy)
32x32	ICO / PNG	Browser tab (retina)
180x180	PNG	Apple Touch icon
192x192	PNG	Android home screen
512x512	PNG	PWA / splash
Any	SVG	Modern browsers, high-DPI

Phiên bản 16px là quan trọng nhất — đây là thứ mà hầu hết mọi người thấy trên tab.
Biểu tượng Apple Touch cần 180px để hiển thị sắc nét trên màn hình chính iOS.
SVG phục vụ các trình duyệt hiện đại ở bất kỳ độ phân giải nào mà không cần nhiều tệp.
Một ICO có thể đóng gói nhiều kích thước cho hỗ trợ cũ.

Làm thế nào để thiết kế một favicon hoạt động ở 16px?

Thách thức của favicon là nó phải dễ nhận biết ở 16 pixel, vốn rất nhỏ. Chi tiết trông đẹp ở 512px sẽ biến mất ở 16px, vì vậy thiết kế phải đơn giản.

Sử dụng một hình dạng duy nhất, nổi bật — một chữ cái, một dấu logo, một biểu tượng đơn giản.
Tránh các đường nét mảnh và văn bản nhỏ — chúng biến mất ở 16px.
Sử dụng độ tương phản cao để hình dạng nổi bật trên nền tab.
Kiểm tra phiên bản 16px ở kích thước thực tế trước khi xuất bản.

Một lỗi phổ biến là sử dụng toàn bộ logo có chữ. Ở 16px, văn bản không thể đọc được, vì vậy favicon trông giống như một vết nhòe mờ. Cách khắc phục là trích xuất yếu tố dễ nhận biết nhất — biểu tượng hoặc chữ cái đầu tiên — và sử dụng nó làm favicon. SVG to PNG guide hướng dẫn cách xuất các dấu vector ở kích thước bạn cần.

Bạn nên tạo định dạng tệp nào?

Favicon bao gồm nhiều định dạng vì hỗ trợ trình duyệt đã phát triển theo thời gian, và việc bao phủ tất cả chúng đảm bảo biểu tượng hoạt động ở mọi nơi.

ICO — định dạng cũ, đóng gói nhiều kích thước, được hỗ trợ bởi tất cả các trình duyệt.
PNG — tiêu chuẩn hiện đại, một tệp cho mỗi kích thước.
SVG — vector, co giãn với mọi kích thước, được hỗ trợ bởi các trình duyệt hiện đại.
Apple Touch PNG — cụ thể là 180x180, dành cho biểu tượng màn hình chính iOS.

Format	When to use
ICO	Legacy browser support, bundles sizes
PNG	Modern browsers, per-size files
SVG	Modern browsers, single scalable file
Apple Touch PNG	iOS home screen

Tạo một ICO để tương thích với các trình duyệt cũ, các tệp PNG ở mỗi kích thước để hỗ trợ rộng rãi, và một SVG nếu nguồn là vector. image converter xử lý việc tạo định dạng, và image cropper cắt hình vuông nguồn trước.

Làm thế nào để tham chiếu favicon trong HTML?

Các tệp được tạo phải được tham chiếu trong thẻ <head> của trang để trình duyệt tìm thấy chúng. Các thẻ liên kết cho trình duyệt biết nên sử dụng tệp nào cho ngữ cảnh nào.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

ICO bao gồm các trình duyệt cũ với kích thước được đóng gói.
SVG phục vụ các trình duyệt hiện đại ở bất kỳ độ phân giải nào.
Apple Touch icon bao phủ việc lưu màn hình chính iOS.
Đặt các tệp tại thư mục gốc của trang web để tương thích tối đa.

Mozilla favicon guide tài liệu hóa các thẻ liên kết và hành vi trình duyệt, và Web.dev app icons guide bao gồm tiêu chuẩn biểu tượng maskable cho Android. Hãy kiểm tra kết quả trên tab trình duyệt thực tế và trên màn hình chính điện thoại sau khi triển khai, bởi vì các lỗi hiển thị chỉ xuất hiện trong các ngữ cảnh thực tế.

Thiết kế favicon cho chế độ sáng và tối

Các trình duyệt và hệ điều hành hiện đại chuyển đổi giữa chế độ sáng và tối, và một favicon trông tuyệt vời trên tab sáng có thể biến mất trên tab tối. Một PNG nền trong suốt hoặc SVG với màu sắc thích ứng xử lý cả hai ngữ cảnh, bởi vì biểu tượng thích ứng với phần chrome xung quanh thay vì mang theo nền của riêng nó.

Mode challenge	Solution
Dark icon vanishes on dark tab	Add a subtle outline or use transparency
Light icon vanishes on light tab	Same — outline or adaptive color
Hard readability at 16px	Simplify shape, increase contrast

Đối với favicon SVG, bạn có thể sử dụng truy vấn media prefers-color-scheme bên trong SVG để cung cấp các màu khác nhau cho ngữ cảnh sáng và tối, đây là giải pháp sạch nhất. Đối với PNG, nền trong suốt với hình dạng có đủ độ tương phản nội bộ hoạt động chấp nhận được trên cả hai chế độ. Mục tiêu là favicon phải dễ đọc trong tab bất kể người dùng chạy chế độ sáng hay tối, điều này ngày càng trở thành mặc định hơn là ngoại lệ.

Các lỗi favicon phổ biến

Quá nhiều chi tiết — biểu tượng không thể nhận biết ở 16px. Hãy đơn giản hóa.
Nguồn không vuông — hãy cắt thành hình vuông trước hoặc biểu tượng sẽ bị méo mó.
Thiếu Apple Touch icon — các lần lưu của iOS hiển thị ảnh chụp màn hình chung thay thế.
Không có SVG — màn hình DPI cao hiển thị PNG mờ thay vì vector sắc nét.
Quên kiểm tra ở 16px — kích thước mà hầu hết mọi người thấy là kích thước thường bị bỏ qua nhất.

Favicon nhỏ nhưng nó xuất hiện ở mọi nơi trang web của bạn được đại diện — tab, dấu trang, màn hình chính, kết quả tìm kiếm. Một biểu tượng sắc nét, dễ nhận biết ở mọi kích thước sẽ củng cố thương hiệu ngay lập tức, trong khi một favicon mờ hoặc bị thiếu báo hiệu sự thiếu chuyên nghiệp. Hãy dành thời gian để làm cho phiên bản 16px đúng, tạo bộ đầy đủ kích thước và định dạng, và biểu tượng sẽ đại diện cho trang web sạch sẽ ở bất cứ nơi nào nó xuất hiện. Sự đầu tư là nhỏ — chỉ một buổi chiều thiết kế và xuất tệp — nhưng nó mang lại lợi ích mỗi khi người dùng thấy trang web của bạn trên tab, dấu trang hoặc màn hình chính, điều này thường xuyên hơn nhiều so với những gì hầu hết các nhóm nhận ra.

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

Favicon cần những kích thước nào?

Bộ hiện đại: 16×16, 32×32, 48×48 (cổ điển), cộng thêm 180×180 (biểu tượng Apple touch) và 192×192 / 512×512 (Android). Một hình ảnh chủ sẽ tạo ra toàn bộ bộ. Trình duyệt chọn đúng kích thước cho từng ngữ cảnh.

Làm thế nào để tôi thiết kế một favicon hoạt động ở 16px?

Giữ nó đơn giản — một hình dạng nổi bật, độ tương phản cao, không có chi tiết nhỏ hoặc văn bản. Ở 16px, bất cứ thứ gì phức tạp đều trở thành vết nhòe. Hãy kiểm tra thiết kế ở 16px trước khi cam kết; nếu nó không dễ đọc ở đó, thì nó quá phức tạp.

Favicon nên sử dụng định dạng tệp nào?

ICO cho khả năng tương thích cũ, PNG cho trình duyệt hiện đại và biểu tượng Apple/Android, và SVG cho phiên bản độc lập độ phân giải nơi được hỗ trợ. Tạo bộ đầy đủ; một định dạng không bao phủ mọi thiết bị.

Làm thế nào để tôi tham chiếu favicon trong HTML?

Với các thẻ <link rel="icon"> trỏ đến từng kích thước và định dạng, cộng với <link rel="apple-touch-icon"> cho iOS. Trình duyệt chọn sự phù hợp tốt nhất. Một bộ đầy đủ các thẻ liên kết bao phủ mọi nền tảng.

Tôi có thể sử dụng một hình ảnh cho tất cả các kích thước favicon không?

Có — một master vuông duy nhất (512×512 hoặc lớn hơn) sẽ tạo ra toàn bộ bộ, từ 16×16 đến 512×512. Thiết kế master để dễ đọc ở 16px (một hình dạng nổi bật) để kích thước nhỏ nhất vẫn hoạt động. Một master, nhiều kích thước.

Làm thế nào để tôi kiểm tra favicon?

Mở trang web trên tab trình duyệt và kiểm tra biểu tượng ở 16px (kích thước tab), 32px (dấu trang), và 180px (Apple touch). Nếu phiên bản 16px không dễ đọc, thiết kế quá phức tạp — hãy đơn giản hóa thành một hình dạng nổi bật. Favicon nhỏ nhưng xuất hiện khắp nơi, vì vậy một biểu tượng sắc nét, dễ nhận biết ở mọi kích thước sẽ củng cố thương hiệu ngay lập tức.

ICO file là gì?

Một định dạng container cũ chứa một hoặc nhiều hình ảnh raster ở các kích thước khác nhau, được sử dụng cho favicon trên các trình duyệt cũ hơn (đặc biệt là Internet Explorer đời cũ). Các trình duyệt hiện đại sử dụng PNG và SVG, vì vậy ICO chủ yếu là lớp tương thích ngược. Tạo một ICO cùng với bộ PNG/SVG của bạn để mọi trình duyệt, dù cũ đến đâu, cũng có được biểu tượng.

Ảnh thành Favicon: Tạo Biểu Tượng Website Từ Mọi Hình Ảnh

Trả lời nhanh: làm thế nào để tạo favicon từ một hình ảnh?

Favicon cần những kích thước nào?

Làm thế nào để thiết kế một favicon hoạt động ở 16px?

Bạn nên tạo định dạng tệp nào?

Làm thế nào để tham chiếu favicon trong HTML?

Thiết kế favicon cho chế độ sáng và tối

Các lỗi favicon phổ biến