[{"data":1,"prerenderedAt":11},["ShallowReactive",2],{"guide:vi:blog\u002Ffavicon-sizes-which-ones-you-need":-1,"article-vi-favicon-sizes-which-ones-you-need":3},{"slug":4,"title":5,"description":6,"date":7,"keyword":8,"tool":9,"html":10},"favicon-sizes-which-ones-you-need","Kích thước Favicon: Cái nào bạn thực sự cần trong năm 2025","Hướng dẫn bằng tiếng Anh đơn giản về kích thước favicon: 16x16, 32x32, 180x180, 192 và 512, cái nào các trình duyệt hiện đại sử dụng, và HTML để thêm vào.","2026-10-12","favicon size","favicon-generator","\u003Cp>Tìm kiếm "kích thước favicon" và bạn sẽ thấy một bức tường những con số mâu thuẫn: 16x16, 32x32, 48x48, 64, 180, 192, 256, 512. Hầu hết những danh sách đó được viết một thập kỷ trước và không bao giờ được cập nhật. Trên thực tế, một trang web hiện đại cần khoảng bốn tệp, và bạn có thể tạo tất cả chúng trong một lần với \u003Ca href=\"\u002Fvi\u002Ffavicon-generator\">trình tạo favicon\u003C\u002Fa> — nó chạy hoàn toàn trong trình duyệt của bạn, vì vậy logo của bạn không bao giờ rời khỏi máy của bạn.\u003C\u002Fp>\n\u003Cp>Dưới đây là những gì mỗi kích thước thực sự dùng để làm, và những gì bạn có thể an toàn bỏ qua.\u003C\u002Fp>\n\u003Ch2>Các kích thước vẫn còn quan trọng\u003C\u002Fh2>\n\u003Ch3>16x16 và 32x32 — các tab trình duyệt và dấu trang\u003C\u002Fh3>\n\u003Cp>Đây là favicon cổ điển. 16x16 là những gì bạn thấy trong một dải tab đông đúc; 32x32 được sử dụng trên màn hình high-DPI, thanh dấu trang và một số giao diện thanh địa chỉ. Cả hai theo truyền thống được đóng gói trong một tệp \u003Ccode>favicon.ico\u003C\u002Fcode> duy nhất, có thể chứa nhiều độ phân giải cùng một lúc. Windows cũng kéo 48x48 từ \u003Ccode>.ico\u003C\u002Fcode> giống nhau cho các phím tắt trên máy tính để bàn, vì vậy việc bao gồm nó hầu như không tốn chi phí gì.\u003C\u002Fp>\n\u003Ch3>180x180 — biểu tượng Apple touch\u003C\u002Fh3>\n\u003Cp>Khi ai đó nhấn vào "Thêm vào Màn hình Chính" trên iPhone hoặc iPad, Safari tìm kiếm \u003Ccode>apple-touch-icon.png\u003C\u002Fcode> ở 180x180. Nếu nó không có, iOS chụp ảnh trang của bạn và sử dụng nó thay thế, có vẻ tệ hại. PNG duy nhất này bao gồm mọi thiết bị iOS hiện tại vì hệ thống thu nhỏ kích thước khi cần.\u003C\u002Fp>\n\u003Ch3>192x192 và 512x512 — Android và PWA\u003C\u002Fh3>\n\u003Cp>Android Chrome và các ứng dụng web có thể cài đặt đọc biểu tượng từ \u003Ccode>site.webmanifest\u003C\u002Fcode> của bạn. 192 là biểu tượng màn hình chính; 512 được sử dụng cho màn hình khởi động và danh sách ứng dụng. Nếu bạn muốn trang của mình có thể cài đặt được, bạn cần cả hai.\u003C\u002Fp>\n\u003Ch3>SVG — tùy chọn nhưng tốt\u003C\u002Fh3>\n\u003Cp>Firefox và Chrome đều hỗ trợ favicon SVG, giữ hình ảnh sắc nét ở bất kỳ kích thước nào và có thể phản hồi với chế độ tối bằng media query bên trong tệp. Nó là một phần thưởng, không phải là thay thế — Safari và các trình duyệt cũ hơn vẫn muốn các phiên bản raster.\u003C\u002Fp>\n\u003Ch2>Những cái bạn có thể bỏ qua\u003C\u002Fh2>\n\u003Cp>64x64, 96x96, 128x128, toàn bộ tập hợp các hình ảnh gạch Windows và hàng chục tệp \u003Ccode>apple-touch-icon-76x76\u003C\u002Fcode> cũ. Chúng là cần thiết cho các thiết bị đã phần lớn biến mất. Gửi hai mươi tệp biểu tượng làm phình kho lưu trữ của bạn và không đạt được bất cứ điều gì đo lường được.\u003C\u002Fp>\n\u003Ch2>HTML\u003C\u002Fh2>\n\u003Cp>Thả các tệp vào thư mục gốc trang web của bạn và thêm điều này vào \u003Ccode><head>\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><link rel="icon" href="\u002Ffavicon.ico" sizes="any">\n<link rel="icon" href="\u002Ficon.svg" type="image\u002Fsvg+xml">\n<link rel="apple-touch-icon" href="\u002Fapple-touch-icon.png">\n<link rel="manifest" href="\u002Fsite.webmanifest">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Và trong manifest:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-json\">"icons": [\n  { "src": "\u002Ficon-192.png", "type": "image\u002Fpng", "sizes": "192x192" },\n  { "src": "\u002Ficon-512.png", "type": "image\u002Fpng", "sizes": "512x512" }\n]\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Thiết kế cho 16 pixel\u003C\u002Fh2>\n\u003Cp>Phần khó không phải là xuất, mà là một logo đầy đủ trở thành bột mì ở 16x16. Một vài điều giúp ích:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Sử dụng một đoạn, không phải toàn bộ logo.\u003C\u002Fstrong> Một chữ cái, một ký tự, một hình dạng. Wordmark không thể đọc được ở kích thước tab.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Bắt đầu vuông.\u003C\u002Fstrong> Nếu nguồn của bạn là logo rộng, \u003Ca href=\"\u002Fvi\u002Fcrop-image\">cắt nó thành hình vuông\u003C\u002Fa> trước tiên để trình tạo không phải thêm hộp thư với khoảng trống trống.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Giữ độ tương phản cao.\u003C\u002Fstrong> Các đường viền mỏng biến mất. Các hình dạng rắn tồn tại.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Quyết định về nền.\u003C\u002Fstrong> Một PNG trong suốt thích ứng với chrome trình duyệt sáng và tối; nếu dấu hiệu của bạn tối, hãy xem xét cung cấp cho nó một ô màu rắn thay thế. Bạn có thể \u003Ca href=\"\u002Fvi\u002Fremove-background\">loại bỏ nền\u003C\u002Fa> từ ảnh chụp màn hình logo trong vài giây nếu bạn chỉ có JPG phẳng.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Ghi nhớ vùng an toàn.\u003C\u002Fstrong> Android che biểu tượng thành hình tròn và squircle, vì vậy hãy để khoảng 10% phần đệm xung quanh cạnh của tác phẩm 512 của bạn.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Nếu bạn khớp nền của favicon với màu thương hiệu của trang web, \u003Ca href=\"\u002Fvi\u002Fcolor-picker\">bộ chọn màu hình ảnh\u003C\u002Fa> sẽ kéo hex chính xác từ ảnh chụp hiện có — cũng hữu ích cho thẻ meta \u003Ccode>theme-color\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2>Tạo toàn bộ tập hợp cùng một lúc\u003C\u002Fh2>\n\u003Cp>Không tải lên: thả PNG hoặc SVG hình vuông vào \u003Ca href=\"\u002Fvi\u002Ffavicon-generator\">trình tạo favicon miễn phí dựa trên trình duyệt\u003C\u002Fa> và nó tạo ra \u003Ccode>.ico\u003C\u002Fcode>, biểu tượng Apple touch và 192\u002F512 PNG cục bộ, trong tab của riêng bạn. Không có gì được gửi đến máy chủ, không có đăng ký, và không có bản sao logo chưa phát hành của bạn kết thúc lên ngồi trong bucket lưu trữ của người khác.\u003C\u002Fp>\n\u003Cp>Sau đó phóng to trình duyệt của bạn, nhìn vào tab, và hỏi câu hỏi duy nhất quan trọng: bạn có thể nói nó là gì không?\u003C\u002Fp>\n",1791831537479]