Favicon là gì? Đặt đâu trong HTML | link rel=icon, apple-touch, đường dẫn public【2026】

(Cập nhật: 19 tháng 7, 2026 ) favicon HTML link rel=icon apple-touch-icon head frontend
Kết luận

Favicon = biểu tượng nhận diện trên tab / bookmark / home screen — không phải logo trong header. Đặt file ở URL ổn định (thường /... từ public/), khai báo trong <head> bằng link rel="icon" (và apple-touch-icon nếu cần iOS). Một PNG 32×32 khai báo đúng đã cứu nhiều site “quên icon”. Sinh nhanh từ logo: favicon generator.

Khi mở 20 tab Chrome trong giờ làm việc, bạn nhận ra site nào nhờ ô vuông nhỏ trên tab, không nhờ đọc full title. Đó là favicon. Sinh viên và freelancer VN hay mắc hai lỗi: (1) không gắn gì — tab hiện icon trái đất mặc định; (2) dán 10 thẻ copy từ Stack Overflow 2015 nhưng path 404 vì file nằm sai thư mục src/ thay vì public/.

Bài này giải thích favicon là gì, hiện ở đâu, và đặt thẻ HTML + đường dẫn thế nào — góc “wiring”, khác bài xuất size từ logo và bài so sánh ICO/PNG/SVG.

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

  • Định nghĩa đúng favicon vs logo vs OG image
  • Biết các bề mặt hiển thị (tab, bookmark, iOS, PWA)
  • Viết link đúng trong <head> với mẫu copy được
  • Tránh 404 path, cache, đặt nhầm thư mục
  • Biết khi nào cần generator vs chỉ một file có sẵn

Favicon là gì?

Favicon (viết tắt favorite icon) là biểu tượng thương hiệu thu nhỏ gắn với origin của website. Trình duyệt lấy nó để đánh dấu trang trong:

  • Tab đang mở
  • Bookmark / Favorites
  • Lịch sử và một số thanh địa chỉ
  • Add to Home Screen (iOS/Android) qua apple-touch-icon hoặc icon PWA
  • Đôi khi kết quả tìm kiếm hoặc UI mật khẩu (tùy sản phẩm)

Nó không phải:

Khái niệmKhác favicon thế nào
Logo headerLớn, có thể kèm chữ; nằm trong <body>
OG / Twitter imageẢnh chia sẻ mạng xã hội (~1200×630), thẻ og:image
App icon storeBundle iOS/Android store, mask adaptive riêng

Nhầm logo header 1200px đem làm favicon → tab thành vệt màu không đọc được. Favicon cần symbol đơn giản, tối ưu cho ~16–32 CSS pixel.

Đặt đâu trong HTML?

Vị trí duy nhất đúng: <head>

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="utf-8" />
    <title>Tên site</title>

    <!-- Favicon: đặt ở đây -->
    <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
    <link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />

    <!-- Không đặt link favicon trong body -->
  </head>
  <body>...</body>
</html>

Ý nghĩa từng thuộc tính

  • rel="icon" — favicon chuẩn cho trình duyệt hiện đại
  • href — URL tuyệt đối từ gốc site (/favicon-32x32.png) hoặc path ổn định trên CDN
  • type — image/png, image/svg+xml, image/x-icon tùy file
  • sizes — gợi ý độ phân giải; giúp trình duyệt chọn bản phù hợp khi có nhiều link
  • rel="apple-touch-icon" — iOS dùng khi ghim ra màn hình chính (thường PNG 180×180)

SVG (nếu có):

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

Luôn giữ PNG fallback — Safari và một số WebView vẫn ưu tiên raster.

Root /favicon.ico — lớp dự phòng

Nếu không có thẻ link, nhiều client vẫn request https://domain.com/favicon.ico. Đặt file đó ở root giúp:

  • Crawler / tool giám sát cũ
  • Một số email client hoặc bookmarklet
  • Tránh 404 lặp trong log server

Nhưng đừng chỉ dựa vào convention: luôn khai báo link khi bạn kiểm soát HTML.

File vật lý đặt thư mục nào?

Framework → thư mục favicon
Stack Thư mục / hành vi URL công khai
Astro / Vite public/favicon-32x32.png /favicon-32x32.png
Next.js public/ hoặc file convention app/icon.png /favicon-32x32.png hoặc metadata API
HTML tĩnh Cùng cấp index.html hoặc /assets/ Khớp đúng href
WordPress Customizer / theme site icon hoặc upload Media Theme inject link — kiểm tra View Source

Lỗi kinh điển: bỏ PNG vào src/assets/ rồi viết href="/favicon.png" → production 404 vì bundler hash tên file hoặc không copy ra root. Với favicon, ưu tiên public/ + URL cố định để cache bust chủ động (?v=3) khi đổi brand.

Mẫu tối thiểu vs mẫu đủ dùng

Tối thiểu (landing 1 trang)

<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />

Đủ để tab không còn icon mặc định.

Đủ dùng (SME / portfolio / blog)

<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
<link rel="shortcut icon" href="/favicon.ico" />

shortcut icon mang tính tương thích cũ; có thể bỏ nếu chỉ target trình duyệt hiện đại và đã có rel="icon".

PWA

Ngoài link, khai báo trong manifest.webmanifest:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Thiếu block này, “Add to Home Screen” có thể lấy ảnh kém chất lượng hoặc icon mặc định.

Chẩn đoán nhanh khi icon không hiện

  1. View Source / DevTools → Network — request favicon status 200 hay 404?
  2. Đúng href? So sánh path file trên server (FTP/S3) với HTML.
  3. MIME type — CDN trả text/html cho path sai (SPA fallback) sẽ phá icon.
  4. Cache — đổi href="/favicon-32x32.png?v=20260719" hoặc đổi tên file.
  5. CSP / SVG — CSP chặn inline style trong SVG favicon dark-mode; kiểm tra console.
  6. HTTPS mixed content — href="http://..." trên site HTTPS có thể bị chặn.

Checklist 60 giây trước demo khách

  • Có ít nhất một link rel="icon" trong <head>
  • URL mở trực tiếp trên trình duyệt ra ảnh (không ra HTML 404)
  • Tab mới hoặc ẩn danh đã kiểm tra
  • iOS (nếu khách hay dùng): có apple-touch 180
  • Title tab vẫn đọc được — favicon không thay thế <title>

Case: “Em đã thêm favicon mà anh vẫn thấy quả cầu”

Sinh viên đặt favicon.png trong src/components/, import trong React, và kỳ vọng tab đổi. Component logo trong body không đổi favicon tab. Sửa: copy PNG vào public/favicon-32x32.png, thêm link trong index.html hoặc layout root. Sau đó buộc cache bust vì giảng viên đã mở site từ buổi trước.

Freelancer bàn giao WordPress: bật Site Icon trong Customizer đôi khi ghi đè link theme. Kiểm tra View Source sau khi đổi — tránh hai bộ icon xung đột.

Liên hệ với generator

Khi chưa có file sẵn:

  1. Chuẩn bị logo vuông / symbol
  2. Xuất 16 / 32 / 180 / 512 bằng Favicon generator (chạy local trên trình duyệt)
  3. Đặt vào public/ với tên khớp href
  4. Dán thẻ link như mẫu trên

Quy trình xuất chi tiết (crop, lỗi méo, checklist PR): Cách xuất favicon từ logo. Chọn ICO vs PNG vs SVG: Favicon 2026 — size & format.

Tóm tắt một dòng

Favicon là icon nhận diện tab — khai báo bằng link trong <head>, file ở URL công khai ổn định, kiểm tra 200 + xóa cache trước khi kết luận “không ăn”.