Kích thước Favicon tốt nhất cho trang web

favicon được chia tỷ lệ thành nhiều pixel vật lý: 16×16 trong một tab, 32×32 trên thanh dấu trang Retina, 180×180 trên màn hình chính iPhone, 512×512 trên màn hình giật gân favicon. Một hình ảnh không thể phục vụ tốt cho tất cả chúng.

Việc nâng cấp một nguồn nhỏ sẽ tạo ra hiện tượng mờ. Việc thu nhỏ kích thước chi tiết 1024×1024 mà không kiểm tra sẽ làm mất đi các đường nét nhỏ. Cách khắc phục là một tập hợp nhỏ các bản xuất được xây dựng có mục đích hoặc một .ico nhiều kích thước nhúng các khung máy tính để bàn phổ biến.

Vận chuyển mọi kích cỡ được liệt kê trên các bài đăng trên blog cũ đều lãng phí. Vận chuyển quá ít để lại một khoảng trống rõ ràng trên một nền tảng. Ma trận bên dưới phản ánh các yêu cầu thực tế được đo lường trong năm 2026 trình duyệt.

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

Các tab trên màn hình thường hiển thị biểu tượng pixel 16×16 CSS, ánh xạ tới pixel thiết bị 16×16 hoặc 32×32 tùy thuộc vào mật độ hiển thị.

Thanh đánh dấu và tab được ghim thường sử dụng kích thước 32×32 hoặc 48×48. Chromium có thể tự động chọn khung được nhúng gần nhất từ ​​favicon.ico.

Tất cả ba kích thước tab phổ biến (16, 32, 48) đều vừa vặn thoải mái bên trong một .ico nhiều kích thước. Đó là lý do tại sao vùng chứa .ico vẫn là định dạng phân phối trên máy tính để bàn hiệu quả nhất.

Windows Menu Bắt đầu, ghim thanh tác vụ và phím tắt File Explorer có thể yêu cầu 24×24, 32×32, 48×48, 64×64, 128×128 hoặc 256×256 tùy thuộc vào ngữ cảnh và tỷ lệ hiển thị.

Microsoft ghi lại 16, 24, 32, 48, 64, 128 và 256 làm bộ thực tế cho các ứng dụng Windows. Web favicon được hưởng lợi từ việc gói ít nhất 16 đến 256 trong favicon.ico.

macOS thích .icns hơn cho các ứng dụng gốc nhưng vui vẻ sử dụng .ico và PNG cho các phím tắt trên web. iOS bỏ qua .ico đối với các biểu tượng trên màn hình chính và muốn có PNG 180×180 chuyên dụng thông qua apple-touch-icon.

Tệp kê khai ứng dụng web yêu cầu các biểu tượng có mục đích bất kỳ và có thể che được tùy chọn. Kích thước phổ biến là 192×192 và 512×512 PNG.

Android Chrome sử dụng các biểu tượng kê khai cho giao diện người dùng cài đặt và màn hình chờ. Nguồn 512×512 giảm tỷ lệ một cách rõ ràng; bảng kê khai chỉ có kích thước 192×192 trông mềm mại trên điện thoại cao cấp.

iOS không đọc các biểu tượng kê khai cho vị trí trên màn hình chính. Bạn phải khai báo <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">.

16×16 — tab trình duyệt (mật độ 1×). 32×32 — tab và dấu trang trên màn hình Retina. 48×48 — một số bối cảnh giao diện người dùng Windows và cách sử dụng dấu trang cũ.

64×64 và 128×128 — Phím tắt Windows ở tỷ lệ cao hơn. 256×256 — Các ô được ghim Windows và các bản xem trước có độ phân giải cao.

180×180 — biểu tượng cảm ứng táo (iOS / iPadOS). 192×192 và 512×512 — Biểu tượng kê khai PWA cho Android và lời nhắc cài đặt.

Blog cá nhân: favicon.ico chỉ có 16/32/48. Có thể chấp nhận nếu bạn không quan tâm đến việc đánh bóng màn hình chính iOS.

Trang web tiếp thị của công ty: Gói .ico cộng với biểu tượng apple-touch 180×180 cộng với 32×32 PNG <link> dành cho các tab Retina rõ ràng.

PWA có thể cài đặt: .ico đầy đủ, biểu tượng apple-touch, bảng kê khai 192 + 512, SVG tùy chọn cho giao diện người dùng chrome có thể mở rộng.

Ứng dụng máy tính để bàn điện tử: Windows .ico với 16–256; macOS .icns riêng nếu bạn phân phối bên ngoài trình duyệt.

Nhiều kích cỡ favicon.ico (16, 32, 48, 64, 128, 256) tại /favicon.ico.

apple-touch-icon.png ở 180×180 dành cho màn hình chính iOS.

Một 512×512 PNG trong site.webmanifest cho các bề mặt lắp đặt Android.

Bộ ba đó đáp ứng khoảng 95% yêu cầu về biểu tượng trong thế giới thực. Thêm SVG khi bạn muốn chia tỷ lệ vô hạn và tạo kiểu ở chế độ tối trong các tab hiện đại.

Tôi có cần PNG 16×16 nếu nó nằm trong .ico không? Không, trừ khi bạn muốn có <link rel="icon" sizes="16x16"> rõ ràng để gỡ lỗi.

120×120 có còn cần thiết không? Đó là kích thước .ico cũ. Safari hiện đại mong đợi 180×180.

Còn 64×64 favicon thì sao? Hữu ích bên trong .ico cho Windows; hiếm khi cần thiết như một Site Icon độc lập.

Tôi có thể bỏ qua 256×256 không? Chỉ khi bạn không bao giờ quan tâm đến các bản xem trước phím tắt có độ phân giải cao Windows. Hầu hết các đội bao gồm nó.

Biểu tượng iOS có các góc được bo tròn và trông như bị cắt bớt: đó là mặt nạ iOS — thiết kế có phần đệm an toàn, không phải là lỗi trong tệp của bạn.

Bản cài đặt PWA hiển thị biểu tượng chung: biểu tượng tệp kê khai bị thiếu hoặc có kích thước tối thiểu dưới 192×192. Xác thực JSON bằng Chrome DevTools → Ứng dụng.

Biểu tượng tab mềm trên Retina Mac: đảm bảo favicon.ico chứa khung 32×32 chứ không chỉ 16×16.

Tải xuống .ico rất lớn: bạn đã nhúng 256×256 BMP không nén. Xây dựng lại với nén PNG bên trong vùng chứa.

Các pixel CSS không phải là pixel vật lý. Khe tab 16 × 16 trên màn hình 2 × thường tải bitmap 32 × 32 để có độ sắc nét.

Đó là lý do tại sao một favicon.ico chứa cả khung hình 16 và 32 lại hoạt động tốt hơn một khung hình 16×16 PNG duy nhất trên MacBook Retina và máy tính xách tay có độ phân giải cao-DPI PNG.

Android PWA hiển thị các biểu tượng hiển thị trên màn hình chờ ở độ phân giải đầy đủ của thiết bị — nguồn 192×192 được kéo dài đến điện thoại 1440p trông mềm mại; Giảm tỷ lệ 512×512 một cách rõ ràng.

iOS áp dụng mặt nạ và bán kính góc của riêng mình cho nội dung biểu tượng cảm ứng quả táo. Thiết kế với lớp đệm an toàn nên các cạnh quan trọng không bị hình tròn cắt bớt.

Khi kiểm tra, hãy chụp ảnh màn hình tab ở mức thu phóng trình duyệt 100% và tỷ lệ hệ điều hành 200%. Nếu cả hai đều trông sắc nét thì ma trận kích thước của bạn có thể đúng.

Tải xuống favicon.ico và mở nó trong công cụ liệt kê các khung được nhúng. Xác nhận tồn tại 16, 32, 48 và ít nhất một khung kích thước cao.

Tìm nạp apple-touch-icon.png và kiểm tra kích thước trong bất kỳ trình kiểm tra hình ảnh nào - mong đợi 180×180 chứ không phải 120×120 từ các mẫu lỗi thời.

Mở site.webmanifest và xác minh các biểu tượng[] bao gồm 192×192 và 512×512 với các đường dẫn và loại hình ảnh/png chính xác.

Tải trang web của bạn trong Chrome DevTools → Ứng dụng → Bản kê khai. Các mục nhập bị thiếu hoặc không hợp lệ sẽ hiển thị cảnh báo trước khi người dùng nhìn thấy hộp thoại cài đặt bị hỏng.

Giữ một bảng tính ánh xạ từng tệp tới ứng dụng tiêu dùng của nó (tab, iOS, PWA, Windows). Trong tương lai, bạn sẽ không phải thiết kế ngược thư mục tài sản trong quá trình đổi thương hiệu.

Các lớp thiết bị mới xuất hiện chậm rãi ở vùng đất favicon. Các biểu tượng tệp kê khai 512×512 ngày nay bao gồm các giao diện người dùng cài đặt máy tính bảng và có thể gập lại tốt hơn so với chỉ 192 biểu tượng.

Tránh các kích thước kỳ lạ (96×96, 120×120) trừ khi tài liệu nền tảng cụ thể vẫn yêu cầu chúng — chúng tạo thêm gánh nặng cho tác giả mà không mang lại lợi ích rộng rãi.

Lưu trữ vectơ chính hoặc raster 1024×1024 trong kho lưu trữ thiết kế của bạn ngay cả khi bạn không bao giờ gửi nó. Nền tảng trong tương lai có thể yêu cầu biểu tượng tệp kê khai lớn hơn.

Tự động tái tạo từ bản gốc để khi kích thước được đề xuất mới xuất hiện, bạn sẽ chạy lại tập lệnh thay vì xuất thủ công trong Photoshop.