Hình ảnh & Đồ họa
Tại sao Favicon không hiển thị? Cách sửa lỗi đường dẫn, bộ nhớ cache và thẻ HTML
Tạo trọn bộ Favicon đa nền tảng chỉ trong vài giây: Tự động xuất đầy đủ tệp .ico đa độ phân giải, biểu tượng Apple Touch 180x180, Web App Manifest 192x192 và 512x512 cùng đoạn mã HTML hoàn chỉnh.
Mở công cụ Tạo Favicon
Mục lục nội dung
1. Hiện tượng bộ nhớ cache cứng (Aggressive Browser Caching)
Biểu tượng trang web (Favicon) là một trong những tài nguyên được trình duyệt web lưu vào bộ nhớ đệm (cache) một cách cực kỳ tích cực. Khác với tệp CSS hay JavaScript thông thường được làm mới khi nhấn F5, các trình duyệt hiện đại như Google Chrome, Microsoft Edge hay Safari lưu trữ favicon trong một cơ sở dữ liệu SQLite độc lập dưới hệ điều hành.
Do đó, khi bạn thay thế tệp favicon.ico mới trên máy chủ, trình duyệt vẫn tiếp tục hiển thị biểu tượng cũ trong nhiều tuần trừ khi bạn can thiệp kỹ thuật:
- Kỹ thuật phá cache (Cache Busting Query): Thêm tham số phiên bản vào đường dẫn thẻ link trong phần
<head>:<link rel="icon" href="/favicon.ico?v=2">. - Truy cập trực tiếp URL tệp: Mở một tab mới và truy cập trực tiếp vào
https://yoursite.com/favicon.ico, sau đó thực hiện tổ hợp phímCtrl + F5(hoặcCmd + Shift + Rtrên macOS).
2. Cấu trúc bộ Favicon hiện đại cho mọi nền tảng
Để biểu tượng trang web hiển thị sắc nét trên cả màn hình máy tính, thanh đánh dấu trang (Bookmarks), màn hình chính iOS và ứng dụng web tiến bộ (PWA) trên Android, bạn cần cung cấp một bộ tệp tiêu chuẩn:
| Tên tệp | Kích thước vật lý | Mục đích sử dụng |
|---|---|---|
favicon.ico |
Container chứa 16x16 và 32x32 px | Dành cho trình duyệt máy tính truyền thống và thanh tab trình duyệt. |
favicon-32x32.png |
32x32 px | Định dạng PNG chất lượng cao cho trình duyệt hiện đại. |
apple-touch-icon.png |
180x180 px | Màn hình chính của iPhone và iPad khi người dùng ghim trang web. |
android-chrome-192x192.png |
192x192 px | Khai báo trong site.webmanifest cho thiết bị di động Android. |
android-chrome-512x512.png |
512x512 px | Màn hình khởi động (Splash screen) khi mở ứng dụng web toàn màn hình. |
3. Khai báo mã HTML chuẩn mực trong thẻ <head>
HTML5 Metadata
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">