Favicon trong HTML: cách thêm favicon bằng link rel=icon

Cách thêm favicon

Lưu biểu tượng trên trang web và trỏ tới nó bằng thẻ <link rel="icon"> trong <head>:

<link rel="icon" href="/favicon.ico">

Với một trang web cơ bản, chỉ cần vậy là đủ. href có thể trỏ tới tệp .ico, .png hoặc .svg. Ví dụ dưới đây dùng một SVG viết thẳng vào href dưới dạng data URI, nên không cần tệp riêng. Bản xem trước nằm trong một trang khác thì không đổi được tab trình duyệt của bạn, nên script vẽ cùng biểu tượng đó lên một tab giả và ở ba kích thước:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bake Club</title>
  <link rel="icon" type="image/svg+xml"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%232563eb'/%3E%3Ctext x='16' y='23' font-size='20' font-family='Arial' font-weight='700' fill='white' text-anchor='middle'%3EB%3C/text%3E%3C/svg%3E">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    .sizes { display: flex; align-items: end; gap: 16px; margin-top: 16px; font-size: 12px; color: #6b7280; }
    .sizes div { text-align: center; }
  </style>
</head>
<body>
  <div class="bar"><div class="tab"><img id="tab-icon" width="16" height="16" alt=""><span id="tab-title"></span></div></div>
  <div class="sizes" id="sizes"></div>
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('tab-icon').src = href;
    document.getElementById('tab-title').textContent = document.title;
    for (const size of [16, 32, 64]) {
      const box = document.createElement('div');
      box.innerHTML = '<img width="' + size + '" height="' + size + '" alt=""><br>' + size + 'px';
      box.querySelector('img').src = href;
      document.getElementById('sizes').append(box);
    }
  </script>
</body>
</html>

Ở 16 pixel chỉ đủ chỗ cho một chữ cái đậm hoặc một hình đơn giản, còn chi tiết nhỏ sẽ biến mất. Hãy thiết kế biểu tượng cho kích thước nhỏ nhất trước. Đổi fill='%232563eb' sang màu khác (%23 là dấu # đã mã hóa URL) và mọi bản sao đều cập nhật theo.

Cần có những tệp nào

Trình duyệt, điện thoại và trình khởi chạy ứng dụng tìm những biểu tượng khác nhau. Một bộ nhỏ là đủ cho tất cả:

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

Hầu hết trình duyệt cũng tự yêu cầu /favicon.ico ở thư mục gốc của trang khi trang không có thẻ link biểu tượng, nên đặt một tệp favicon.ico ở đó là lựa chọn mặc định hữu ích. Thuộc tính sizes cho trình duyệt biết kích thước của từng tệp để chọn tệp phù hợp nhất. Hãy dùng rel="icon"; rel="shortcut icon" cũ hơn vẫn chạy chỉ vì trình duyệt bỏ qua từ thừa.

Favicon bằng emoji

Với bản thử nghiệm hay trang cá nhân, emoji là cách làm favicon nhanh. Đặt emoji bên trong phần tử <text> của SVG:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Emoji favicon</title>
  <link rel="icon"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%8D%AA%3C/text%3E%3C/svg%3E">
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>The icon at tab size and larger:</p>
  <img id="a" width="16" height="16" alt="">
  <img id="b" width="48" height="48" alt="">
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('a').src = href;
    document.getElementById('b').src = href;
  </script>
</body>
</html>

%F0%9F%8D%AA là emoji bánh quy đã mã hóa URL. Emoji được vẽ bằng font emoji của hệ điều hành, nên trông khác nhau trên Windows, macOS và Android; với một sản phẩm thật, biểu tượng được thiết kế riêng là lựa chọn tốt hơn.

Biểu tượng đổi theo chế độ tối

Favicon SVG có thể mang CSS riêng, kể cả media query prefers-color-scheme, nên một biểu tượng tối có thể chuyển sang sáng khi trình duyệt dùng giao diện tối:

<!-- icon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #111827; }
    @media (prefers-color-scheme: dark) { circle { fill: #f9fafb; } }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

Đổi favicon bằng JavaScript

Các trang web dùng favicon thay đổi để hiện chấm thông báo hoặc màu trạng thái. Vẽ biểu tượng mới lên một <canvas> rồi gán href của thẻ link bằng ảnh của canvas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dynamic favicon</title>
  <link rel="icon" id="icon" href="data:,">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; margin-inline-end: 6px; }
    img { vertical-align: middle; margin-inline-start: 8px; }
  </style>
</head>
<body>
  <button id="on">New message</button>
  <button id="off">Clear</button>
  Current icon: <img id="preview" width="32" height="32" alt="">
  <script>
    function draw(withDot) {
      const canvas = document.createElement('canvas');
      canvas.width = canvas.height = 32;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#2563eb';
      ctx.fillRect(2, 2, 28, 28);
      if (withDot) {
        ctx.fillStyle = '#dc2626';
        ctx.beginPath();
        ctx.arc(24, 8, 7, 0, Math.PI * 2);
        ctx.fill();
      }
      const url = canvas.toDataURL('image/png');
      document.getElementById('icon').href = url;
      document.getElementById('preview').src = url;
    }
    document.getElementById('on').onclick = () => draw(true);
    document.getElementById('off').onclick = () => draw(false);
    draw(false);
  </script>
</body>
</html>

Trên một trang thật trong Chrome hoặc Firefox, biểu tượng trên tab đổi mỗi lần href được gán, cùng lúc với ảnh xem trước thay đổi ở đây.

Lỗi thường gặp

• Sai đường dẫn. href="favicon.ico" là đường dẫn tương đối so với trang hiện tại, nên sẽ hỏng ở /blog/post. Hãy dùng đường dẫn từ gốc: href="/favicon.ico".
• Mong biểu tượng mới hiện ra ngay. Trình duyệt lưu favicon trong bộ nhớ đệm rất lâu. Tải lại sau khi xóa bộ nhớ đệm, hoặc đổi URL (/favicon.ico?v=2) khi bạn thay biểu tượng.
• Thu nhỏ một logo nhiều chi tiết xuống 16 pixel. Hãy đơn giản hóa: một chữ cái hoặc một hình có độ tương phản cao.
• Chỉ có SVG. Giữ thêm ICO hoặc PNG cho những trình duyệt không hỗ trợ favicon SVG, và thêm apple-touch-icon cho iOS.
• Đặt thẻ link trong <body>. Hãy để nó trong <head> cùng thẻ title và các metadata khác.