Favicon là biểu tượng nhỏ xuất hiện trên tab trình duyệt, bookmark và nhiều vị trí khác. Tuy nhiên, để favicon hiển thị đúng trên tất cả các thiết bị (desktop, iOS, Android), bạn cần nhiều hơn một file favicon.ico. Bài viết này hướng dẫn đầy đủ các thành phần favicon cần thiết.
1. favicon.ico (Cũ nhưng vẫn cần)
File favicon.ico là định dạng favicon truyền thống, hỗ trợ từ IE5+. Dù đã có các định dạng hiện đại hơn, file .ico vẫn cần thiết để tương thích với trình duyệt cũ và bookmark.
<link rel="icon" href="/favicon.ico" sizes="48x48">Kích thước khuyến nghị: ít nhất 48×48. Đặt file ở thư mục gốc để trình duyệt tự động tìm thấy. Có thể dùng công cụ như RealFaviconGenerator để tạo tất cả các loại favicon.
2. PNG Favicon
PNG là định dạng favicon phổ biến nhất hiện nay, hỗ trợ trong suốt (transparency) và chất lượng cao:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">Nên cung cấp ít nhất 2 kích thước: 16×16 (tab, bookmark) và 32×32 (thanh tác vụ, shortcut).
3. SVG Favicon
SVG cho phép favicon co giãn mà không mất chất lượng, phù hợp với màn hình Retina và dark mode:
<link rel="icon" type="image/svg+xml" href="/favicon.svg">SVG favicon được hỗ trợ trên Chrome, Firefox, Edge. Safari chưa hỗ trợ. Nên kết hợp SVG + PNG để đảm bảo tương thích.
4. Apple Touch Icon
Khi người dùng thêm trang web vào màn hình chính iOS (Add to Home Screen), Apple Touch Icon sẽ được sử dụng:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.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">Kích thước quan trọng: 180×180 (iPhone 6s+), 152×152 (iPad), 120×120 (iPhone cũ). Apple tự động scale icon, nên dùng kích thước lớn nhất là an toàn.
5. Web App Manifest
File site.webmanifest giúp trình duyệt hiểu trang web của bạn hoạt động như một Progressive Web App (PWA), bao gồm icon cho các nền tảng khác nhau:
<link rel="manifest" href="/site.webmanifest">// site.webmanifest
{
"name": "Trang web của bạn",
"short_name": "Web",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}6. Microsoft Tile
Windows 8/10 sử dụng tile trên Start Menu. Cần file XML riêng:
<meta name="msapplication-TileColor" content="#0E103D">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="msapplication-config" content="/browserconfig.xml"><!-- browserconfig.xml -->
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#0E103D</TileColor>
</tile>
</msapplication>
</browserconfig>7. Safari Pinned Tab (SVG Mask Icon)
Safari cho phép tuùy chỉnh màu icon trên pinned tab:
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0E103D">8. Tổng hợp HTML đầy đủ
Dưới đây là đoạn code HTML đầy đủ cho tất cả các loại favicon, có thể copy-paste vào <head>:
<!-- Favicon .ico -->
<link rel="icon" href="/favicon.ico" sizes="48x48">
<!-- PNG Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- SVG Favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest">
<!-- Microsoft Tile -->
<meta name="msapplication-TileColor" content="#0E103D">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
<!-- Safari Pinned Tab -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0E103D">
<!-- Safari Tab Color -->
<meta name="theme-color" content="#ffffff">Kết luận
Một favicon hoàn chỉnh không chỉ là file .ico. Bạn cần ít nhất 8 định dạng khác nhau để hỗ trợ tất cả trình duyệt và thiết bị. Công cụ RealFaviconGenerator có thể tạo tất cả các file này từ một ảnh duy nhất.
Tham khảo: RealFaviconGenerator Guide | Responsive Images | HTML5 Tags
