Cách tạo biểu tượng yêu thích
favicon hiện đại không chỉ là hình ảnh 16×16. Hướng dẫn này hướng dẫn cách chuẩn bị nguồn, tạo nhiều kích thước, thiết lập HTML, ví dụ thực tế và cách khắc phục các sự cố gây khó khăn cho hầu hết các nhóm.
favicon là gì?
favicon là biểu tượng nhỏ của trình duyệt hiển thị trong tab, thanh dấu trang, danh sách lịch sử và thanh địa chỉ. Trên điện thoại, nó trở thành biểu tượng màn hình chính khi ai đó lưu trang web của bạn. Trên Windows nó xuất hiện trên các ghim trên thanh tác vụ và các phím tắt trên màn hình.
Từ này xuất phát từ biểu tượng yêu thích, nhưng công việc đã phát triển vượt xa một GIF 16×16 duy nhất. favicon ngày nay là một nhóm tài sản nhỏ: favicon.ico cấp cơ sở, các biến thể SVG và PNG tùy chọn, biểu tượng cảm ứng quả táo cho iOS và các biểu tượng kê khai cho PWA có thể cài đặt.
Người dùng hiếm khi nhận xét về một favicon tốt nhưng họ ngay lập tức nhận thấy một cái bị thiếu hoặc bị mờ. Biểu tượng sắc nét báo hiệu sự đánh bóng và giúp tab của bạn có thể nhận dạng được trong số 20 trang đang mở.
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
Chuẩn bị hình ảnh nguồn của bạn
Bắt đầu từ hình ảnh hình vuông có kích thước tối thiểu 512×512 pixel. SVG với viewBox hình vuông là lý tưởng vì nó có tỷ lệ rõ ràng theo mọi kích thước raster mà bạn sẽ xuất.
Tránh các nét mỏng, kiểu chữ đẹp và chuyển màu phức tạp. Ở kích thước 16×16, các chi tiết chân tóc hợp nhất thành bột màu xám. Đơn giản hóa dấu hiệu: ít hình dạng hơn, độ tương phản cao hơn, nhiều khoảng đệm hơn xung quanh glyph.
Nếu biểu tượng của bạn nằm ngang, hãy tạo một hình vuông để đặt biểu tượng vào giữa mà không có nhãn từ. Các dạng chữ có chiều cao dưới 8px hiếm khi tồn tại khi thu nhỏ kích thước.
Xuất PNG-32 với độ trong suốt khi raster là lựa chọn duy nhất của bạn. Nền trắng mờ sẽ trông không ổn trong trình duyệt Chrome tối màu và trên các trình khởi chạy di động có tông màu.
Tạo .ico nhiều kích thước
Gói các khung hình 16, 32, 48, 64, 128 và 256 pixel bên trong một tệp favicon.ico. Các trình duyệt và Windows đọc tiêu đề thư mục và chỉ giải mã kích thước chúng cần.
Đặt favicon.ico ở thư mục gốc trang web của bạn (/favicon.ico). Ngay cả khi bạn khai báo các thẻ <link> hiện đại, trình thu thập thông tin và ứng dụng khách cũ hơn vẫn thăm dò đường dẫn đó theo quy ước.
Trình tạo favicon của chúng tôi quét mọi kích thước phía máy khách trong chưa đầy một giây. Hình ảnh nguồn của bạn không bao giờ rời khỏi trình duyệt, điều này quan trọng khi nhãn hiệu là biểu tượng sản phẩm chưa được phát hành.
Thêm thẻ HTML
Thả các thẻ này vào <head> để có thiết lập hoàn chỉnh cho năm 2026:
<link rel="icon" href="/favicon.ico" size="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Dòng SVG cho tab sắc nét trên Chromium và Firefox. Dòng .ico bao gồm các dự phòng Safari, phím tắt Windows và trình đọc RSS bỏ qua SVG.
Ví dụ thực tế
Trang web tiếp thị tĩnh: tải lên 512×512 PNG logomark của bạn, tạo favicon.ico cộng với biểu tượng apple-touch 180×180, thêm bốn dòng <link>, triển khai vào /public hoặc web root. Tổng thời gian: dưới năm phút.
Ứng dụng React / Vite: đặt các biểu tượng trong /public, tham chiếu chúng với các đường dẫn tương đối gốc trong index.html. Bản sao Vite /public không thay đổi tại thời điểm xây dựng, do đó /favicon.ico phân giải chính xác trong quá trình sản xuất.
WordPress: bỏ qua HTML thủ công — sử dụng Giao diện → Tùy chỉnh → Nhận dạng trang web → WordPress. Tải lên nguồn 512×512; WordPress tự động phát ra các thẻ phù hợp. Xem hướng dẫn WordPress của chúng tôi để biết các mẹo chặn bộ nhớ đệm.
Thương hiệu chế độ tối: xuất SVG có công tắc điền màu bên trong @media (prefers-color-scheme: tối). Ghép nối nó với một dự phòng .ico trung lập cho các máy khách không bao giờ tải SVG.
Xác minh trong mọi trình duyệt
Làm mới cứng (Ctrl+Shift+R hoặc Cmd+Shift+R) trong Chrome, Safari, Firefox và Edge. Các lần tải lại thông thường thường giữ favicon được lưu trong bộ nhớ đệm trong nhiều ngày.
Kiểm tra bốn bề mặt: tab trình duyệt, thanh dấu trang, Thêm vào màn hình chính trên iOS và biểu tượng thanh tác vụ Windows được ghim. Mỗi bề mặt có thể yêu cầu độ phân giải khác nhau từ gói của bạn.
Mở DevTools → Mạng, lọc theo ico hoặc png, tải lại và xác nhận 200 phản hồi cho mỗi URL biểu tượng bạn đã khai báo. Một lỗi 404 trên apple-touch-icon.png là lỗi thường gặp.
Câu hỏi thường gặp
Tôi có còn cần favicon.ico nếu tôi có SVG không? Đúng. Giữ .ico làm dự phòng chung. SVG là một cải tiến, không phải là một sự thay thế.
favicon khả thi tối thiểu là bao nhiêu? Một favicon.ico nhiều kích cỡ tại /favicon.ico. Mọi thứ khác đều cải thiện độ rõ nét trên màn hình có độ phân giải cao và màn hình chính trên thiết bị di động.
Tôi có thể sử dụng JPG không? Bạn có thể, nhưng bạn sẽ mất đi tính minh bạch. PNG hoặc SVG hầu như luôn tốt hơn cho các biểu tượng giao diện.
Tôi nên cập nhật favicon bao lâu một lần? Bất cứ khi nào nhãn hiệu của bạn thay đổi. Thực hiện truy vấn ?v=2 trên thẻ <link> một lần để đánh bại bộ nhớ đệm của trình duyệt.
Khắc phục sự cố
Biểu tượng không cập nhật sau khi triển khai: trình duyệt lưu trữ favicon độc lập với HTML. Làm mới cứng, xóa dữ liệu trang web hoặc thêm ?v=2 vào URL biểu tượng tạm thời.
Biểu tượng tab mờ: nguồn của bạn quá nhỏ hoặc không vuông. Tái tạo từ 512×512 hoặc SVG; xác minh .ico thực sự chứa khung 32 × 32.
Hộp màu trắng xung quanh logo: nguồn có nền mờ. Tái xuất với độ trong suốt và tạo lại .ico với các mục được nén PNG.
Hoạt động cục bộ nhưng không được sản xuất: xác nhận các tệp nằm trong thư mục gốc web công khai, không chỉ trong src/. Kiểm tra bộ đệm CDN và đường dẫn phân biệt chữ hoa chữ thường trên máy chủ Linux.
Danh sách kiểm tra từng bước
Xuất hoặc định vị hình vuông chính ở kích thước 512×512 hoặc lớn hơn. Xác nhận độ trong suốt, cấu hình màu sRGB và không có lớp nền ẩn trong tệp thiết kế của bạn.
Chạy bản gốc thông qua trình tạo favicon phía máy khách. Tải xuống favicon.ico, favicon.svg nếu có, apple-touch-icon.png và hiển thị PNG trong một lần tải xuống.
Tải tất cả các tập tin lên web root công khai của bạn. Trên các máy chủ tĩnh có nghĩa là cùng thư mục với index.html; trên các khung công tác, sử dụng thư mục /public hoặc /static ánh xạ tới /.
Dán khối <link> được đề xuất vào <head> trước bất kỳ tập lệnh chặn hiển thị nào. Vị trí sớm giúp trình duyệt khám phá các biểu tượng trên lần sơn đầu tiên.
Xác thực bằng làm mới cứng trên Chrome, Safari và Firefox. Ghim một tab, đánh dấu trang và kiểm tra Thêm vào Màn hình chính trên iPhone thật nếu lưu lượng truy cập iOS quan trọng với bạn.
Ghi lại biểu tượng được đặt trong README hoặc hệ thống thiết kế của bạn để lần đổi thương hiệu tiếp theo không bắt đầu từ một 32×32 PNG duy nhất mà ai đó tìm thấy trong email.
Những lỗi thường gặp cần tránh
Sử dụng biểu tượng nằm ngang hoàn toàn được chia tỷ lệ thành khe 16×16 — văn bản sẽ trở nên nhiễu không thể đọc được. Cắt theo biểu tượng.
Chỉ vận chuyển một PNG 16×16 được đổi tên thành .ico mà không có thư mục nhiều kích thước phù hợp — các tab Windows và Retina được nâng cấp và làm mờ.
Quên biểu tượng cảm ứng quả táo trong khi bị ám ảnh bởi các tab trên máy tính để bàn - Người dùng iOS chiếm phần lớn lưu lượng truy cập web trên thiết bị di động.
Trỏ <link href> vào đường dẫn CDN khác nhau giữa giai đoạn dàn dựng và sản xuất mà không có bản dựng nhận biết môi trường.
Giả sử WordPress, Shopify hoặc Webflow sẽ sửa lỗi tải lên nguồn có độ phân giải thấp một cách kỳ diệu. Rác vào, rác ra đủ kích cỡ.