Favicon 2026: ICO, PNG, SVG và checklist ship landing | Không cần 20 file

Khi ship landing cho khách SME hoặc sản phẩm SaaS nhỏ ở Việt Nam, favicon thường bị làm hai kiểu cực đoan: quên hẳn (tab hiện icon mặc định), hoặc nhét cả chục link rel copy từ bài 2015. Cả hai đều làm mất thời gian review.

Bài này chốt format nào dùng năm 2026, size nào thật sự cần, và checklist trước khi bàn giao — không phải danh sách viện bảo tàng mọi kích thước từng tồn tại.

Bài viết này giúp bạn

• So sánh ICO / PNG / SVG theo trình duyệt hiện đại
• Hiểu vai trò apple-touch-icon
• Chọn bộ tối thiểu cho landing (không spam 20 file)
• Sinh nhanh PNG đa size từ một ảnh nguồn
• Tránh logo chữ dài, nền trắng cứng, cache dai

---

ICO vs PNG vs SVG (2026)

Thực tế trình duyệt

• Chrome / Edge / Firefox: SVG + PNG ổn. Tab thường lấy 16 hoặc 32.
• Safari (macOS / iOS): PNG đáng tin hơn; luôn có apple-touch-icon nếu khách hay “Thêm vào Màn hình chính”.
• PWA / manifest: icons trong manifest.webmanifest thường cần 192 và 512. Landing tĩnh không PWA có thể bỏ qua 192 nếu chưa có manifest.

Khuyến nghị một dòng: Có logo vector sạch → SVG + PNG dự phòng. Chỉ có raster (AI export PNG) → PNG đa size, thêm ICO nếu khách yêu cầu “đủ bộ”.

---

Bộ kích thước thật sự cần (landing)

Đừng xuất 16, 24, 32, 48, 57, 60, 72, 76, 96, 114, 120, 144, 152, 167, 180, 192, 256, 384, 512 “vì bài blog bảo vậy”. Với landing marketing / portfolio / microsite:

File	Size	Việc gì
favicon.svg	vector	Tab hiện đại (nếu dùng)
favicon-32x32.png	32×32	Tab / bookmark phổ biến
apple-touch-icon.png	180×180	iOS Home Screen
icon-512.png	512×512	Manifest / chất lượng nguồn
favicon.ico (tuỳ chọn)	16+32 trong 1 file	Client cũ, request /favicon.ico

16×16 hữu ích để kiểm tra độ rõ ở kích thước nhỏ nhất — nếu 16 đã vỡ, đơn giản hóa logo trước khi ship.

Android Chrome khi “Add to Home screen” thường lấy từ manifest hoặc PNG lớn; nếu không có PWA, 180 + 512 đã cover phần lớn case khách gửi screenshot “sao không có icon”.

---

HTML tối thiểu sạch

<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
<!-- Nếu có PWA -->
<link rel="manifest" href="/site.webmanifest" />

site.webmanifest (khi cần):

{
  "name": "Brand",
  "short_name": "Brand",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "display": "standalone",
  "start_url": "/"
}

Landing chưa PWA: bỏ manifest còn hơn khai báo 404.

SVG dark mode (tuỳ chọn)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    .mark { fill: #111; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f5f5; }
    }
  </style>
  <circle class="mark" cx="50" cy="50" r="40" />
</svg>

Symbol một màu đổi fill rõ hơn logo nhiều lớp gradient.

---

Sinh PNG đa size từ một ảnh

Freelancer thường nhận logo Canva/Figma export một lần. Thay vì resize tay từng size (dễ lệch tỷ lệ), dùng Tạo Favicon: upload ảnh nguồn, tải các bản 16 / 32 / 180 / 512 PNG — xử lý trên trình duyệt, không upload logo khách lên server lạ.

Sau khi tải:

1. Đổi tên favicon-180x180.png → apple-touch-icon.png (hoặc giữ tên và sửa href)
2. Copy favicon-32x32.png vào public/
3. Giữ 512 làm nguồn master hoặc icon manifest
4. Nếu cần ICO: ghép bằng tool riêng hoặc để hosting phục vụ PNG qua <link> là đủ cho đa số landing 2026

---

Case study: Landing agency — tab mờ, Home Screen xấu

Triệu chứng: Tab Chrome hiện vệt xám; iPhone Add to Home ra icon chữ nhỏ không đọc được.

Nguyên nhân: Wordmark ngang 800×200 bị nhét vào canvas vuông; chữ chiếm 10% diện tích → khi xuống 32px gần như mất.

Sửa: Designer tách monogram 1–2 chữ nền trong suốt, export 1024×1024. Ship bộ 32 + 180 + 512. Tab rõ; Home Screen nhìn như app.

Bài học: Favicon là symbol, không phải logo full brand guidelines.

---

Case study: Repo “đủ 18 file” nhưng vẫn thiếu apple-touch

HTML copy RealFaviconGenerator cũ với hàng loạt sizes, nhưng không có apple-touch-icon 180 — khách iOS vẫn thấy ảnh chụp thumbnail Safari.

Sửa: Xóa link thừa không tồn tại file, giữ 4–5 file thật, thêm đúng 180. PR gọn, QA nhanh hơn.

---

Checklist ship (dán vào Definition of Done)

1. Tab Chrome/Firefox hiện đúng icon sau hard refresh (Ctrl+Shift+R)
2. View Source — mọi href favicon không 404
3. Có 180×180 nếu khách dùng iPhone
4. Logo đơn giản ở 16px (mở file 16 xem bằng mắt)
5. Nền trong suốt hoặc contrast đủ trên tab tối/sáng
6. Không commit 20 file size lịch sử không được link
7. Nếu có PWA: manifest icons khớp file thật

---

Lỗi hay gặp

Lỗi	Hệ quả	Cách tránh
Chỉ đặt /favicon.ico cũ, không <link>	Một số SPA/base path sai	Khai báo rõ trong layout
PNG có nền trắng đục	Xấu trên tab tối	Export alpha
Cache CDN giữ icon cũ	Khách thấy logo cũ sau rebrand	Đổi tên file hoặc query ?v=2
Upscale logo 64→512	Mờ trên Home Screen	Luôn downscale từ ảnh lớn

---

Công cụ liên quan

• Tạo Favicon — PNG 16/32/180/512 từ một ảnh
• Nén ảnh — giảm dung lượng icon lớn trước khi commit
• OGP Preview — ảnh chia sẻ mạng xã hội (khác favicon; đừng nhầm 1200×630 với tab icon)

Favicon tốt là ít file, đúng chỗ, rõ ở 16px. Đó là tiêu chuẩn ship landing năm 2026 — không phải bộ sưu tập kích thước.