Trình tạo Favicon

Tải lên một hình ảnh và tạo tất cả các kích thước favicon chuẩn ở dạng PNG.

Kéo-thả một hình ảnh vào đây, hoặc nhấp để chọn

Các hình ảnh vuông cho kết quả tốt nhất (PNG, JPG, SVG)

Giải thích các kích thước favicon

16×16 · favicon tab trình duyệt chuẩn

32×32 · tab Retina, lối tắt thanh tác vụ

48×48 · lối tắt trang web Windows

180×180 · Apple Touch Icon (màn hình chính iOS)

192×192 · Android Chrome, biểu tượng manifest PWA

512×512 · màn hình khởi động PWA, tìm kiếm Google

Lịch Sử Ngắn Gọn của Favicon

Favicon bắt đầu cuộc đời như một tính năng của Microsoft trong Internet Explorer 5, phát hành tháng 3 năm 1999. Microsoft giới thiệu quy ước tìm kiếm /favicon.ico trong gốc của trang web và hiển thị nó bên cạnh các trang web được đánh dấu trong thanh Yêu thích: từ đó có tên "favicon" (favorite icon). Lựa chọn thiết kế ban đầu là định dạng ICO Windows độc quyền, có thể chứa nhiều kích thước bitmap trong một tệp duy nhất. Các trình duyệt khác đã áp dụng quy ước này gần như ngay lập tức và bắt đầu hỗ trợ favicon PNG nữa, được báo hiệu thông qua các thẻ <link rel="icon"> trong head tài liệu. iPhone của Apple (ra mắt 2007) đã thêm quy ước apple-touch-icon: một PNG 180×180 được sử dụng khi người dùng thêm một trang web vào màn hình chính iOS của họ, hiển thị ở cùng kích thước với biểu tượng ứng dụng gốc. Progressive Web Apps (PWA, được chính thức hóa vào khoảng 2015) đã thêm tệp manifest.json với mảng icons của nó, yêu cầu các biến thể PNG 192×192 (lời nhắc cài đặt của Chrome) và 512×512 (màn hình splash PWA, màn hình chính Android, ghim menu Start của Windows). Favicon SVG (được hỗ trợ trong Firefox từ phiên bản 41 vào năm 2015, Chrome từ phiên bản 80 vào tháng 2 năm 2020, Safari từ phiên bản 12.1 vào năm 2019) hiện là khuyến nghị hiện đại khi biểu tượng là một hình dạng đơn giản: một tệp duy nhất có thể mở rộng hoàn hảo đến bất kỳ mật độ hiển thị nào. Tệp favicon.ico kế thừa vẫn được yêu cầu cho Internet Explorer 11 và các trình duyệt cũ hơn; các stack hiện đại gửi SVG cộng với ICO dự phòng và PNG apple-touch-icon.

Tại Sao Có Quá Nhiều Kích Thước?

Mỗi kích thước trong bộ favicon phục vụ một bối cảnh hiển thị khác nhau. 16×16 là favicon tab trình duyệt cổ điển ở DPI tiêu chuẩn: kích thước đã dạy các nhà thiết kế các ràng buộc pixel có thể tàn nhẫn đến mức nào. 32×32 là kích thước tab trình duyệt DPI cao (Retina); nhiều trình duyệt hiện đại thích kích thước này ngay cả đối với màn hình "tiêu chuẩn" vì nó thu nhỏ tốt hơn so với 16×16 phóng to. 48×48 là kích thước Windows sử dụng cho các phím tắt taskbar và favicon trang web đã ghim. 180×180 là apple-touch-icon, được hiển thị khi người dùng thêm một trang web vào màn hình chính iOS. 192×192 là lời nhắc cài đặt ứng dụng web Chrome và biểu tượng màn hình chính Android tiêu chuẩn. 512×512 là biểu tượng màn hình splash PWA, hình thu nhỏ kết quả tìm kiếm Google và biểu tượng tile menu Start của Windows. Lý do một tệp độ phân giải cao duy nhất là không đủ: ở các kích thước nhỏ nhất, biểu tượng thường cần đơn giản hóa được điều chỉnh thủ công để vẫn dễ đọc (một logo phức tạp ở 16×16 trở thành một vệt màu), vì vậy thiết kế favicon chuyên nghiệp thường liên quan đến việc vẽ hai hoặc ba biến thể: phiên bản chi tiết cho kích thước lớn, phiên bản đơn giản hóa cho kích thước trung bình và phiên bản "chỉ nhãn hiệu" cho kích thước nhỏ nhất. Trình tạo này thu nhỏ một nguồn duy nhất thông qua thuật toán nearest-neighbor-or-bilinear downsampling tiêu chuẩn, tốt cho các hình dạng đơn giản; logo phức tạp có thể cần chỉnh sửa thủ công ở các kích thước nhỏ nhất.

HTML Đi Kèm Với Các Tệp

Tạo các tệp chỉ là một nửa công việc; nửa còn lại là các thẻ meta trong <head> của bạn để cho trình duyệt biết tệp nào sẽ sử dụng trong bối cảnh nào. Stack favicon tối thiểu khả thi 2026:

<link rel="icon" type="image/svg+xml" href="/icon.svg">
<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">

Trình duyệt chọn tệp phù hợp nhất dựa trên mật độ pixel của thiết bị và định dạng nào nó hỗ trợ. Các trình duyệt hiện đại thích SVG khi có; các trình duyệt cũ hơn dự phòng vào các kích thước PNG; iOS sử dụng apple-touch-icon; cài đặt PWA đọc manifest. favicon.ico ở gốc vẫn được tự động lấy làm dự phòng mặc định ngay cả khi không có thẻ liên kết rõ ràng: mọi trang web vẫn nên có một cho khả năng tương thích ngược với các trình duyệt và công cụ rất cũ.

Khi Bạn Thực Sự Cần Tạo Favicon

Thiết Kế Cho Ràng Buộc 16×16

Favicon 16×16 là ràng buộc đòi hỏi nhất trong thiết kế giao diện hiện đại. 256 pixel: toàn bộ canvas biểu tượng: phải truyền đạt đủ bản sắc thương hiệu để người dùng có thể tìm thấy tab của bạn trong số hai mươi tab khác. Hướng dẫn thực tế từ các nhà thiết kế đã làm điều này nhiều lần: Đơn giản hóa mạnh mẽ. Một logo phức tạp ở 16×16 là một vệt màu. Loại bỏ chi tiết cho đến khi chỉ còn lại hình dạng tối thiểu có thể nhận biết được. Tối đa hóa độ tương phản với nền tab. Tab trình duyệt thường có màu xám nhạt hoặc xám đậm; một biểu tượng có độ tương phản yếu sẽ biến mất vào chrome. Thích các hình dạng đơn đậm hơn các đường thẳng mỏng. Các đường mảnh hơn 2px alias thành màu xám ở 16px và trở nên vô hình. Kiểm tra ở kích thước thực tế trong trình duyệt của bạn. Cái trông ổn trong công cụ thiết kế của bạn ở 256×256 có thể không đọc được ở 16×16. Mở nhiều tab của trang web của bạn và nhìn vào chúng trong thanh tab: đó là kiểm tra thực sự. Xem xét trường hợp chế độ tối. Một biểu tượng được thiết kế cho thanh tab trắng có thể vô hình trên thanh tab tối. Favicon SVG có thể bao gồm media query prefers-color-scheme bên trong SVG để thích ứng tự động sáng/tối; đối với dự phòng ICO và PNG, thiết kế thứ gì đó hoạt động trên cả hai nền.

Các tệp được tạo

Quyền Riêng Tư: Xử Lý Hình Ảnh Chỉ-Trình-Duyệt

Một logo hoặc hình ảnh thương hiệu mà bạn tải lên để tạo favicon có thể là bí mật: công việc thương hiệu trước-ra-mắt, thương hiệu công cụ nội bộ, logo khách hàng được bảo vệ NDA. Các trình tạo favicon phía máy chủ (RealFaviconGenerator rất phổ biến và tương tự) lấy bản sao của mọi hình ảnh được tải lên vào cơ sở hạ tầng của họ nơi nó nằm trong nhật ký và bộ nhớ cache. Trình tạo này chạy hoàn toàn trong trình duyệt của bạn thông qua Canvas API: hình ảnh được đọc vào trình duyệt, thu nhỏ đến mỗi kích thước favicon bởi pipeline thay đổi kích thước hình ảnh tích hợp của trình duyệt và đóng gói để tải xuống: tất cả trong tab của bạn. Xác minh trong tab Network của DevTools khi bạn tải lên (không có yêu cầu nào kích hoạt sau khi trang được tải), hoặc đưa trang offline (chế độ máy bay) sau khi tải và trình tạo vẫn hoạt động trên các tệp cục bộ. An toàn cho công việc thương hiệu chưa được công bố, logo khách hàng được bảo vệ NDA, thương hiệu công cụ nội bộ hoặc bất kỳ hình ảnh nào bạn không muốn được sao chép vào ổ cứng của người lạ.

Công cụ liên quan

Bộ nén ảnh

Nén các hình ảnh của bạn nhỏ hơn 80%. Kéo-thả, tải xuống tức thì. Không gửi đến máy chủ.

Bộ thay đổi kích thước ảnh

Thay đổi kích thước hình ảnh của bạn theo các kích thước pixel chính xác. Cài đặt sẵn cho mạng xã hội, web và nhiều hơn nữa.

Bộ chuyển đổi ảnh

Chuyển đổi giữa PNG, JPEG và WebP. Chuyển đổi hàng loạt nhiều tệp cùng một lúc.