Bạn cần những kích thước favicon nào vào năm 2026? Bộ favicon lý tưởng

Năm 2026, bộ favicon lý tưởng gồm: một tệp favicon.ico chứa các ảnh 16, 32 và 48 px, một PNG 96x96 (cho Google Search), một favicon SVG tùy chọn, một tệp apple-touch-icon.png 180x180, cùng các tệp PNG 192x192 và 512x512 (cộng thêm một bản 512 maskable) được khai báo trong web app manifest. Biểu tượng ô Windows và các kích thước Apple cũ chỉ cần thiết nếu bạn buộc phải hỗ trợ các thiết bị rất cũ. Phần dưới đây giải thích lý do, kèm bảng kích thước, HTML dùng ngay và các lỗi thường gặp cần tránh.

Trước đây bức tranh về favicon khá lộn xộn: mỗi trình duyệt và hệ điều hành đòi một kích thước riêng, dẫn đến những khối <head> dài 20 dòng khét tiếng. Ngày nay phần lớn những thứ đó đã lỗi thời. Trình duyệt hiện đại tự co giãn một biểu tượng tốt, iOS chỉ cần một kích thước và Android đọc manifest. Bài viết này tách bạch điều thật sự cần thiết với điều chỉ là "có thì tốt".

Câu trả lời ngắn gọn: bộ tệp favicon lý tưởng

• favicon.ico (16, 32, 48 px trong một tệp) đặt ở thư mục gốc của trang. Trình duyệt, trình đọc feed và nhiều công cụ vẫn tự động yêu cầu /favicon.ico.
• favicon.svg (tùy chọn nhưng nên có) để hiển thị sắc nét ở mọi kích thước và hỗ trợ chế độ tối.
• PNG 16x16, 32x32 và 96x96 làm phương án dự phòng tường minh. Bản 96 px hỗ trợ Google Search, vốn yêu cầu kích thước là bội số của 48 px.
• apple-touch-icon.png kích thước 180x180, nền đặc, không trong suốt.
• PNG 192x192 và 512x512 trong manifest.json, cộng thêm một biểu tượng maskable 512x512 cho Android.
• Thẻ meta theme-color để tô màu giao diện trình duyệt trên thiết bị di động.
• Ô Windows (70, 150, 310 px) với browserconfig.xml chỉ dành cho Windows cũ và các trang được ghim trên IE11.

Bảng kích thước favicon: mục đích, tên tệp và mức ưu tiên

Hãy dùng bảng này như một danh sách kiểm tra. "Bắt buộc" nghĩa là một trang web bình thường sẽ trông lỗi hoặc dang dở nếu thiếu; "Nên có" nghĩa là chất lượng cải thiện rõ rệt; "Tùy chọn" nghĩa là dùng cho trường hợp đặc thù hoặc cũ.

favicon.ico: 16, 32 và 48 px trong một tệp

Tệp ICO là một vùng chứa nhiều ảnh bitmap. Một tệp favicon.ico tốt gồm các ảnh 16x16, 32x32 và 48x48 để trình duyệt hoặc hệ điều hành chọn bản gần nhất. Hãy đặt nó ở thư mục gốc của tên miền (https://example.com/favicon.ico). Dù HTML của bạn trỏ đến nơi khác, nhiều trình thu thập dữ liệu, trình đọc RSS và trình duyệt cũ vẫn yêu cầu đúng URL này, nên có sẵn tệp sẽ tránh được các dòng lỗi 404 trong nhật ký.

Đừng chỉ đổi tên một tệp PNG thành .ico. Đa số trình duyệt chấp nhận, nhưng một số công cụ sẽ từ chối và bạn mất lợi ích đa độ phân giải. Hãy xuất một tệp ICO thực thụ.

Favicon PNG: 16, 32 và 96 px

Các liên kết PNG có thuộc tính sizes tường minh cho phép trình duyệt chọn ảnh bitmap tốt nhất mà không cần phân tích tệp ICO. Trên thực tế, 32x32 đáp ứng các tab độ phân giải cao, còn 16x16 gần như thừa ngày nay. Kích thước 96x96 đáng để thêm vì Google Search hiển thị favicon bên cạnh kết quả và yêu cầu biểu tượng vuông có kích thước là bội số của 48 px (48x48, 96x96, 144x144, v.v.). Tệp 96 px cho Google nguồn ảnh sắc nét hơn bản 48 px khi thu nhỏ cho kết quả trên di động.

Mẹo thiết kế: ở 16 px, các chi tiết nhỏ sẽ biến mất. Hãy dùng hình khối đậm, đơn giản, độ tương phản cao và ít hoặc không có chữ. Bạn có thể chỉnh sửa và xem trước biểu tượng trong trình chỉnh sửa MakeFav trước khi xuất.

Favicon SVG và chế độ tối

Favicon SVG là một tệp nhỏ duy nhất vẫn sắc nét trên mọi mật độ điểm ảnh. Các trình duyệt nền Chromium và Firefox đều hỗ trợ. Hỗ trợ của Safari trước nay còn hạn chế, vì vậy đừng bao giờ chỉ dựa vào SVG: hãy giữ các phương án dự phòng ICO và PNG.

Lợi thế lớn nhất là khả năng đổi giao diện. Vì SVG có thể chứa CSS, bạn có thể điều chỉnh biểu tượng theo bảng màu của người dùng bằng prefers-color-scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

Lưu ý rằng media query phản ánh giao diện của trình duyệt hoặc hệ điều hành, thứ mà thanh tab sử dụng. Nó không theo nút chuyển giao diện trên chính website của bạn.

Một điểm kỳ quặc đã biết: khi cả ICO và SVG cùng được khai báo, Chrome có thể chọn ICO. Khai báo ICO với sizes="32x32" rồi liệt kê SVG sau đó sẽ khiến Chrome ưu tiên SVG, như trong đoạn mã bên dưới.

Apple touch icon: 180x180 và các kích thước cũ

Khi người dùng thêm trang của bạn vào màn hình chính iOS hoặc iPadOS, Safari sử dụng apple-touch-icon. Ngày nay chỉ cần một PNG 180x180 px là đủ: iOS sẽ thu nhỏ cho các thiết bị cũ hơn và iPad. Hãy đặt tên là apple-touch-icon.png và để ở thư mục gốc; iOS thậm chí tự tìm tệp này theo mặc định nếu không có thẻ link.

Quy tắc cho biểu tượng Apple:

• Không trong suốt. iOS tô đen các điểm ảnh trong suốt, nên một logo trong suốt thường biến thành một mảng đen. Hãy thêm màu nền đặc.
• Không bo góc. iOS tự áp dụng mặt nạ bo góc của riêng nó. Hãy cung cấp một hình vuông đầy đủ.
• Giữ nội dung quan trọng cách xa mép ngoài, vì các góc sẽ bị cắt.

Khi nào bạn cần các kích thước cũ (57, 72, 76, 114, 120, 144, 152, 167)? Chỉ khi bạn hỗ trợ iOS 6 trở xuống, hoặc muốn kiểm soát chính xác từng điểm ảnh theo thiết bị cho iPad Pro (167 px) và iPad (152 px). Với hầu hết mọi trang web năm 2026, chỉ tệp 180x180 là ổn. Thiết lập tương thích tối đa bên dưới có kèm một vài kích thước cho đầy đủ.

Biểu tượng Android và PWA: 192, 512 và maskable

Chrome trên Android và các trình duyệt hỗ trợ PWA khác đọc biểu tượng từ web app manifest, không phải từ <link rel="icon">. Để có thể cài đặt, bạn cần ít nhất một PNG 192x192 và một PNG 512x512. Biểu tượng 192 px được dùng trên màn hình chính và trình khởi chạy ứng dụng; biểu tượng 512 px xuất hiện trên màn hình chờ và hộp thoại cài đặt.

Biểu tượng maskable và vùng an toàn

Biểu tượng thích ứng của Android có thể bị cắt thành hình tròn, squircle hoặc hình dạng khác tùy thiết bị. Một biểu tượng maskable được thiết kế để cắt an toàn: nội dung quan trọng phải nằm trong vùng an toàn, một hình tròn ở giữa có đường kính bằng 80% ảnh (bán kính bằng 40% cạnh). Với tệp 512x512, điều đó nghĩa là giữ logo trong một hình tròn có đường kính khoảng 410 px, và kéo màu nền ra cả bốn cạnh để không lộ khoảng trống sau khi áp mặt nạ.

Hãy khai báo biểu tượng maskable thành một mục riêng với "purpose": "maskable". Tránh dùng "any maskable" cho một tệp: phần đệm cần cho việc che mặt nạ trông quá nhỏ khi biểu tượng hiển thị không bị che.

Ví dụ manifest.json

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Hãy phục vụ tệp với kiểu application/manifest+json (hoặc application/json) và liên kết từ mọi trang bằng <link rel="manifest" href="/manifest.json">. Một số dự án đặt tên là site.webmanifest; tên không quan trọng, liên kết mới quan trọng.

Ô Windows và browserconfig.xml

Windows 8.1 và 10 cho phép người dùng ghim một trang web lên menu Start, còn IE11 và Edge cũ đọc ảnh ô từ browserconfig.xml. Các kích thước thường dùng là 70x70 (nhỏ), 150x150 (vừa), 310x150 (rộng) và 310x310 (lớn). Edge nền Chromium dùng manifest và favicon thông thường, nên đây là tính năng cũ. Chỉ thêm nếu đối tượng của bạn vẫn còn dùng Windows đời cũ, chẳng hạn trong môi trường doanh nghiệp.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: tô màu giao diện trình duyệt

Thẻ meta theme-color cho trình duyệt di động (và một số trình duyệt máy tính) biết nên dùng màu nào cho thanh địa chỉ hoặc thanh tiêu đề. Nó không phải favicon, nhưng thuộc cùng bộ nhận diện thương hiệu. Bạn có thể cung cấp các giá trị riêng cho chế độ sáng và tối:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

Thiết lập hiện đại tối giản so với tương thích tối đa

Thiết lập hiện đại tối giản (khuyên dùng cho hầu hết các trang)

Năm tệp bao phủ hơn 99% nhu cầu thực tế: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) và hai biểu tượng manifest (192 và 512). Hãy thêm PNG 96x96 nếu hiển thị trên Google Search quan trọng, và một biểu tượng maskable nếu bạn phát hành PWA.

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

Thiết lập tương thích tối đa

Hãy chọn cách này khi bạn phục vụ nhóm người dùng rộng hoặc doanh nghiệp, hoặc khi muốn bao phủ mọi ứng dụng khách có thể. Nó bổ sung các kích thước PNG tường minh, kích thước Apple cũ, ô Windows và màu giao diện.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

Hãy chú ý các đường dẫn tương đối theo thư mục gốc bắt đầu bằng /. Chúng hoạt động ở mọi độ sâu của trang, điều này dẫn chúng ta đến những lỗi phổ biến nhất.

Các lỗi favicon thường gặp và cách khắc phục

1. Sai đường dẫn

Một liên kết như href="favicon.ico" được phân giải tương đối theo URL hiện tại, nên hoạt động ở / nhưng hỏng ở /blog/post/. Hãy dùng đường dẫn tương đối theo gốc (/favicon.ico) hoặc URL tuyệt đối. Cũng hãy kiểm tra các tệp có thực sự tồn tại: mở trực tiếp từng URL trong trình duyệt và đảm bảo nó trả về HTTP 200, không phải chuyển hướng đến trang 404 hay trang đăng nhập.

2. Thiếu hoặc sai thuộc tính sizes

Không có sizes, trình duyệt phải tải biểu tượng về để kiểm tra, và có thể chọn nhầm. Luôn khai báo sizes trên các liên kết PNG và bảo đảm nó khớp với kích thước điểm ảnh thật. Một tệp ghi là 32x32 nhưng thực tế là 64x64 sẽ cho kết quả không nhất quán.

3. Bộ nhớ đệm quá mạnh

Trình duyệt lưu đệm favicon rất lâu, thường độc lập với bộ nhớ đệm của trang. Sau khi đổi thương hiệu, biểu tượng cũ có thể còn tồn tại nhiều ngày. Hãy đổi tên tệp hoặc thêm chuỗi truy vấn phiên bản (/favicon.ico?v=2) và cập nhật các thẻ link. Tải lại cứng thường không làm mới biểu tượng trên tab; mở trực tiếp URL biểu tượng rồi tải lại thường có hiệu quả.

4. Ảnh không vuông

Favicon phải vuông. Một logo hình chữ nhật sẽ bị kéo giãn, cắt xén hoặc thêm viền một cách khó đoán. Hãy thiết kế một biểu tượng vuông riêng, chẳng hạn chữ cái đầu hoặc một ký hiệu, thay vì thu nhỏ một wordmark dài.

5. Apple touch icon trong suốt bị chuyển thành màu đen

iOS tô đen phần trong suốt. Hãy cho biểu tượng 180x180 một nền đặc và đừng bo góc trước.

6. Biểu tượng maskable không có vùng an toàn

Nếu logo chạm các cạnh của biểu tượng maskable, Android sẽ cắt mất nó. Hãy giữ logo trong hình tròn 80% ở giữa và tô kín toàn bộ khung bằng màu nền.

7. Chặn biểu tượng khỏi trình thu thập dữ liệu

Nếu robots.txt cấm đường dẫn favicon của bạn, Google không thể tải nó và sẽ hiển thị biểu tượng quả địa cầu chung chung trong kết quả tìm kiếm. Cũng hãy nhớ rằng Google cần favicon nằm trên cùng máy chủ với trang và chỉ làm mới thỉnh thoảng, nên thay đổi có thể mất vài ngày hoặc vài tuần mới xuất hiện.

8. Quên liên kết manifest hoặc thuộc tính purpose

Một manifest không được liên kết, hoặc thiếu biểu tượng 192 và 512 px, sẽ khiến Chrome không hiện lời nhắc cài đặt. Hãy kiểm tra nó trong công cụ dành cho nhà phát triển của trình duyệt, ở tab Application.

Tạo toàn bộ bộ tệp chỉ bằng một cú nhấp

Tạo hàng chục tệp thủ công trong trình chỉnh sửa ảnh, rồi chuyển sang ICO và viết manifest, vừa tẻ nhạt vừa dễ sai sót. MakeFav tạo tất cả các tệp trên từ một ảnh, văn bản hoặc emoji: favicon.ico nhiều kích thước, PNG, SVG, Apple touch icon, PNG 192/512, biểu tượng maskable, ô Windows, manifest.json và browserconfig.xml, cùng đoạn HTML sẵn sàng dán, tất cả trong một tệp ZIP tải về. Bạn có thể tinh chỉnh nền, phần đệm và hình dạng trong trình chỉnh sửa, kiểm tra một website hiện có bằng công cụ kiểm tra favicon, và tự động hóa việc tạo qua tài nguyên dành cho nhà phát triển.

Danh sách kiểm tra khi triển khai

1. Tải tất cả các tệp lên thư mục gốc của trang.
2. Dán đoạn HTML vào <head> của mọi trang (hoặc layout dùng chung).
3. Đảm bảo các đường dẫn tương đối theo gốc và trả về HTTP 200.
4. Kiểm tra chế độ sáng và tối, việc cài lên màn hình chính iOS và cài đặt trên Android.
5. Chạy công cụ kiểm tra để phát hiện kích thước thiếu hoặc không khớp.
6. Xóa bộ nhớ đệm bằng chuỗi phiên bản nếu bạn đã thay một biểu tượng cũ.

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

Năm 2026 tôi có còn cần favicon.ico không?

Có. Dù trình duyệt hiện đại chấp nhận PNG và SVG, nhiều trình thu thập dữ liệu, trình đọc feed, ứng dụng email và trình duyệt cũ vẫn yêu cầu trực tiếp /favicon.ico. Một tệp ICO nhiều kích thước với các ảnh 16, 32 và 48 px có dung lượng nhỏ và giúp tránh thiếu biểu tượng cũng như lỗi 404.

Favicon cho Google Search nên có kích thước bao nhiêu?

Google yêu cầu favicon vuông có kích thước là bội số của 48 px, tối thiểu 48x48. PNG 96x96 là lựa chọn an toàn, và SVG cũng được hỗ trợ. Google cũng cần tệp có thể thu thập được, vì vậy đừng chặn nó trong robots.txt. Các cập nhật có thể mất vài ngày hoặc vài tuần mới hiển thị.

180x180 có đủ cho Apple touch icon không?

Với hầu hết các trang web thì đủ. iOS và iPadOS thu nhỏ PNG 180x180 cho mọi thiết bị hiện tại. Các kích thước cũ hơn (57 đến 152 px) chỉ quan trọng với các phiên bản iOS rất cũ. Hãy nhớ dùng nền đặc để biểu tượng không bị chuyển thành màu đen.

Biểu tượng maskable là gì và tôi có cần không?

Biểu tượng maskable là một PNG 512x512 được thiết kế cho các hình dạng biểu tượng thích ứng của Android. Nội dung quan trọng nằm trong hình tròn đường kính 80% ở giữa, và nền lấp đầy toàn bộ hình vuông. Bạn chỉ cần nó nếu cung cấp một PWA có thể cài đặt, nhưng nó giúp biểu tượng trông như ứng dụng gốc thay vì nằm trong một vòng tròn trắng.

Vì sao favicon cũ vẫn hiện sau khi tôi đã đổi?

Trình duyệt lưu đệm favicon riêng biệt và trong thời gian dài. Hãy đổi tên tệp hoặc thêm chuỗi truy vấn phiên bản như ?v=2, cập nhật các thẻ link, rồi mở trực tiếp URL biểu tượng và tải lại. Các công cụ tìm kiếm có thể mất nhiều thời gian hơn để làm mới bản sao của riêng họ.