Bộ Favicon Hoạt Động Ở Khắp Nơi Năm 2026
Sáu kích thước, một tệp .ico, một manifest — tất cả những gì bạn thực sự cần để gửi một favicon trông đúng trên mọi trình duyệt, màn hình chính iOS và thanh tác vụ Windows năm 2026.
Favicon có vẻ tầm thường. Gửi một cái và hàng trăm trường hợp đặc biệt sẽ xuất hiện: biểu tượng màn hình chính iOS bị mờ, tab chrome Android có màu sai, Windows pins hiển thị 16×16 mờ. Hướng dẫn này cắt qua tiếng ồn và bao gồm chính xác những gì bạn cần năm 2026 — không nhiều hơn, không ít hơn.
Bộ Tối Thiểu Khả Thi
Sáu tài sản bao gồm mọi bề mặt sẽ hiển thị biểu tượng trang web của bạn:
favicon.ico— container đa kích thước với 16×16, 32×32, 48×48 bên trong (trình duyệt cũ, Windows Explorer, pinned tabs).favicon-16x16.png,favicon-32x32.png— tab trình duyệt hiện đại.apple-touch-icon.png(180×180) — màn hình chính iOS, danh sách đọc Safari.android-chrome-192x192.png,android-chrome-512x512.png— màn hình chính Android, lời nhắc cài đặt PWA.site.webmanifest— cấu hình PWA trỏ đến các biểu tượng Android và xác định màu chủ đề.
Đó là tất cả. Mọi thứ khác (SVG pinned tab Safari, các biến thể Apple touch cũ, hình ảnh uốn Windows) là di sản. Các trình duyệt hiện đại quay lại một cách duyên dáng PNG 192 hoặc 512.
Tại Sao .ico Vẫn Được Gửi Năm 2026
Một tệp .ico là một container nhị phân có thể chứa nhiều hình ảnh PNG ở các kích thước khác nhau. Khi trình duyệt yêu cầu /favicon.ico (mà một số vẫn làm theo mặc định), nó sẽ nhận tất cả ba kích thước trong một yêu cầu. Trình kết xuất chọn cái phù hợp nhất cho bề mặt hiện tại — 48×48 cho Windows Explorer, 16×16 cho tab trình duyệt.
PNG được đổi tên thành .ico chỉ chứa một kích thước. Nó hoạt động hầu hết vì trình duyệt là dễ tính, nhưng Windows Explorer và một số máy khách email sẽ hiển thị nó mờ hoặc từ chối hiển thị nó. Gửi một .ico thực nếu bạn muốn tính nhất quán.
Cái site.webmanifest Làm Gì
Khi người dùng thêm trang web của bạn vào màn hình chính Android hoặc cài đặt nó dưới dạng PWA, trình duyệt đọc site.webmanifest để biết ứng dụng được cài đặt sẽ trông như thế nào. Nó xác định:
name/short_name— nhãn dưới biểu tượng.icons— PNG nào sử dụng ở kích thước nào.theme_color— màu thanh trạng thái khi ứng dụng mở.background_color— nền màn hình khởi động trong quá trình khởi động.display— thường làstandaloneđể ứng dụng mở mà không có chrome trình duyệt.
Không có manifest, Android quay lại apple-touch-icon và hiển thị trang web của bạn bên trong cửa sổ trình duyệt. Với một, nó trông giống như một ứng dụng gốc.
Đoạn HTML
Mọi tệp đều ở thư mục gốc web của bạn. Mọi trang web cần khối này trong <head>:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#YOUR_HEX">Thiết Kế Cho 16×16
Logo chi tiết đẹp của bạn chết ở 16 pixel. Các quy tắc để tạo favicon đọc rõ ở kích thước đó:
- Một hình dạng. Một vòng tròn, một hình vuông hoặc một chữ viết tắt mạnh mẽ. Tránh các hình thức phức hợp.
- Độ tương phản cao. Tiền cảnh và nền phải được tách biệt ít nhất WCAG AA. Gradient tinh tế biến mất.
- Lề an toàn. Để lại 10–20% padding. Trình duyệt thường thêm đường viền 1px của riêng chúng.
- Văn bản? Một chữ cái in đậm hoạt động tốt hơn một từ đầy đủ ở 16px.
Trình tạo Favicon aukimi tạo ra tất cả sáu tệp và đoạn HTML từ một hình ảnh hoặc một chữ cái trong vòng 30 giây. Nó tạo ra một .ico đa kích thước thực (theo thông số kỹ thuật Microsoft ICONDIR), không phải PNG được đổi tên. Tải lên, chọn kích thước của bạn, tải xuống một bộ không zip, dán đoạn — xong.
Sai Lầm Thường Gặp
- Serving
.icotừ CDN mà không có tiêu đề bộ nhớ cache. Trình duyệt bộ nhớ cache favicons một cách tích cực. Sử dụng URL phiên bản (?v=2) để buộc làm mới sau khi thiết kế lại. - Các biểu tượng khác nhau cho mỗi subdomain. Một
favicon.icoduy nhất ở đỉnh thường là những gì người dùng mong đợi — đừng chia nhỏ danh tính của bạn. - Quên
theme-colormeta. Mobile Chrome tints chrome trình duyệt để phù hợp với giá trị này. Bỏ qua nó sẽ để bạn với màu xám mặc định.
Một favicon tốt là nhàm chán theo cách tốt nhất — người dùng chú ý khi nó bị thiếu hoặc sai, không bao giờ khi nó đúng. Lấy sáu tệp được gửi và tiếp tục.
Bạn thích bài viết này?
Bài viết liên quan
Ngăn xếp sáng tạo vừa sụp đổ: Một tuần công cụ AI, cuối tháng 4 năm 2026
Giữa ngày 27 tháng 4 và 4 tháng 5 năm 2026, Adobe, Luma, Novi, fal, Figma, Canva, HeyGen và Anthropic đều vượt qua cùng một ngưỡng trong tám ngày. Đây là những gì đã được phát hành, ý nghĩa của nó, và nó để lại cho các bộ sáng tạo dựa trên trình duyệt cố gắng hợp nhất tất cả.
AI Music và SFX trong 2026: Những gì thực sự hoạt động trong âm thanh indie game
Ba năm trước, âm thanh indie game chỉ có hai lựa chọn: cấp phép thư viện royalty-free (rẻ, chung chung, mỗi game nghe như nhau) hoặc thuê nhạc sĩ (hay, đắt tiền). Trong năm 2026, AI tạo ra bản nhạc để phát hành. Dưới đây là những công cụ nào hoạt động — và nơi nhạc sĩ con người vẫn thắng.
Tạo Lưới AI năm 2026: Những Gì Thực Sự Được Triển Khai Trong Quy Trình Game
Image-to-3D đã chuyển từ "demo kỳ lạ" sang "triển khai trong các dự án indie" trong mười tám tháng. Đây là những gì Tripo, Meshy, Rodin và Hyper3D thực sự làm trong sản xuất — và nơi mà nghệ sĩ 3D vẫn vượt qua mô hình mỗi lần.