Cách tạo biểu tượng yêu thích
Tạo một favicon là một công việc kéo dài hai phút với công cụ phù hợp. Bắt đầu từ hình ảnh nguồn hình vuông — ít nhất 512×512 pixel — chạy hình ảnh đó qua favicon generator và nhận được gói hoàn chỉnh: .ico, SVG, apple-touch-icon và PNG tệp kê khai nhiều kích thước. Hướng dẫn này hướng dẫn từng bước từ chuẩn bị nguồn đến xác minh trình duyệt. Để tham khảo chuyên sâu, hãy xem full tutorial.
Favicon là biểu tượng nhỏ mà trình duyệt hiển thị trên thanh tab, thanh địa chỉ và danh sách dấu trang. Trên thiết bị di động, nó trở thành biểu tượng màn hình chính khi người dùng lưu trang web của bạn. Trên Windows, nó xuất hiện trên ghim thanh tác vụ và phím tắt trên màn hình. Để có được biểu tượng yêu thích phù hợp là một nỗ lực nhỏ nhưng lại có tác động to lớn đến thương hiệu — mỗi lượt xem trang đều bắt đầu bằng biểu tượng của bạn nằm trong tab của người dùng.
Thiết lập favicon hiện đại không phải là một tệp duy nhất - nó là một tập hợp phối hợp. Một .ico nhiều kích thước xử lý dự phòng trình duyệt phổ quát. SVG mang lại khả năng hiển thị sắc nét có thể mở rộng trên các trình duyệt hiện đại, bao gồm cả hỗ trợ chế độ tối. 180×180 PNG (apple-touch-icon) là loại iOS sử dụng để cài đặt trên màn hình chính. Một 192×192 và 512×512 PNG cung cấp lời nhắc cài đặt Android PWA. Một hình ảnh nguồn được chuẩn bị tốt sẽ tạo ra tất cả những thứ này cùng một lúc.
Chuẩn bị hình ảnh nguồn là bước bị bỏ qua nhiều nhất. Logo của bạn phải có hình vuông - việc cắt không đối xứng luôn tạo ra kết quả bị kéo dài. Thiết kế một phiên bản đơn giản hóa nhãn hiệu của bạn để đọc rõ ràng ở kích thước nhỏ: giảm các đường nét nhỏ, loại bỏ văn bản nhỏ và tăng độ tương phản. Những gì có vẻ trang nhã ở kích thước 512×512 có thể trở thành đốm màu không thể đọc được ở kích thước 16×16 nếu bạn bỏ qua bước đơn giản hóa này.
SVG là định dạng nguồn lý tưởng vì nó không phụ thuộc vào độ phân giải. Đồ họa vector sẽ raster hóa theo bất kỳ mật độ pixel nào mà không làm giảm chất lượng. Nếu bạn chỉ có raster PNG hoặc JPG, hãy đảm bảo nó có kích thước tối thiểu là 512×512 trước khi tạo — việc thu nhỏ kích thước từ bất kỳ thứ gì nhỏ hơn sẽ làm mờ các hợp chất đó qua mỗi bước thay đổi kích thước và dẫn đến biểu tượng tab mờ.
Định dạng .ico là một vùng chứa chứ không phải một hình ảnh. Nó chứa nhiều khung raster — thường là 16×16, 32×32, 48×48 và 64×64 — trong một tệp duy nhất. Trình duyệt phân tích thư mục ICO và chỉ hiển thị khung phù hợp nhất với mật độ hiển thị mà nó cần. Cách tiếp cận một tệp này có nghĩa là bạn không cần các thẻ liên kết riêng cho từng độ phân giải — một thẻ bao gồm tất cả các kích thước tab.
Tải hình ảnh nguồn của bạn lên favicon generator. Công cụ này xử lý mọi thứ cục bộ trong trình duyệt của bạn — hình ảnh của bạn không bao giờ rời khỏi thiết bị của bạn. Trong vài giây, nó tạo ra gói tải xuống chứa favicon.ico, favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png và site.webmanifest, cùng với các thẻ liên kết HTML sẵn sàng dán.
Việc đặt các tập tin rất đơn giản. Thả tất cả các tệp đã tạo vào thư mục gốc công khai của trang web của bạn — cùng thư mục phục vụ index.html của bạn. Đối với các dự án Ứng dụng Vite và Tạo React, đây là thư mục /public. Đối với các dự án Next.js App Router, hãy đặt favicon.ico bên trong /app và các tệp PNG trong /public. Đối với các trang web tĩnh, hãy thả mọi thứ cùng với tệp HTML của bạn.
Thẻ liên kết HTML cho trình duyệt biết nên sử dụng tệp nào cho từng ngữ cảnh. Tối thiểu là một dòng: `<link rel='icon' href='/favicon.ico'>`. Bộ đề xuất đầy đủ sẽ thêm ba dòng nữa: một dòng cho biến thể SVG, một dòng cho apple-touch-icon và một dòng cho tệp kê khai web. Dán đoạn mã đã tạo vào bên trong phần tử `<head>` của bạn. Thứ tự thẻ không quan trọng miễn là chúng đứng trước `</head>`.
Bộ nhớ đệm của trình duyệt là nguyên nhân hàng đầu gây nhầm lẫn khi một favicon không xuất hiện để cập nhật. Bộ đệm của trình duyệt /favicon.ico trên mỗi nguồn gốc và có thể không tôn trọng các tiêu đề kiểm soát bộ đệm tiêu chuẩn theo cách chúng thực hiện đối với các nội dung khác. Nếu biểu tượng cũ của bạn vẫn còn, hãy mở một cửa sổ ẩn danh mới hoặc nối thêm chuỗi truy vấn chặn bộ nhớ đệm như `?v=2` vào href trong thẻ liên kết của bạn để buộc trình duyệt tìm nạp tệp đã cập nhật.
Các lỗi phổ biến bao gồm tải lên hình ảnh không vuông (tạo ra các biểu tượng bị kéo dài), sử dụng nguồn dưới 256×256 pixel (làm mờ ở kích thước màn hình lớn hơn) và bỏ qua apple-touch-icon (thay vào đó, các lượt cài đặt màn hình chính iOS sẽ hiển thị ảnh chụp màn hình trang). Cả ba đều được giải quyết bằng cách bắt đầu từ nguồn hình vuông 512×512 PNG hoặc SVG và để trình tạo xử lý mọi kích thước đầu ra.
Hỗ trợ chế độ tối đáng được xây dựng ngay từ đầu. Nhiều trình duyệt hiển thị thanh tab bằng chrome tối khi hệ thống của người dùng ở chế độ tối. Nếu biểu tượng của bạn là một vết tối trên nền trong suốt thì biểu tượng đó có thể biến mất trong tab tối. Gửi một favicon SVG có khối kiểu `@media (prefers-color-scheme: dark)` được nhúng để chuyển đổi màu tô — không cần thêm thẻ HTML, chỉ cần tệp SVG được cập nhật.
Xác minh favicon của bạn bằng live favicon tester sau khi triển khai. Trình kiểm tra mô phỏng các bối cảnh tab trình duyệt, dấu trang và lời nhắc cài đặt, đồng thời hiển thị cách biểu tượng của bạn hiển thị ở các độ phân giải 16, 32, 48, 128 và 512 pixel cạnh nhau. Đồng thời kiểm tra thủ công tab được ghim trong Chrome và Safari, đồng thời sử dụng 'Thêm vào Màn hình chính' trên iOS để xác nhận apple-touch-icon.
Để biết hướng dẫn dành riêng cho nền tảng, hãy tham khảo favicon for WordPress, favicon for Shopify, favicon for React và favicon for Next.js. Bộ tệp được tạo giống hệt nhau trên tất cả các nền tảng - điều khác nhau là nơi bạn tải tệp lên và cách nền tảng chèn hoặc ghi đè thẻ liên kết HTML.
Xem lại favicon của bạn bất cứ khi nào bạn đổi thương hiệu. Các biểu tượng yêu thích được lưu trong bộ nhớ đệm vẫn tồn tại trong dấu trang và màn hình chính trên thiết bị di động rất lâu sau khi thiết kế lại trang web được triển khai. Việc cập nhật chuỗi phiên bản trong thẻ liên kết href của bạn sẽ buộc các trình duyệt tìm nạp tệp mới trong lần truy cập tiếp theo, thay thế dần biểu tượng cũ trên tất cả các vị trí được lưu trong bộ nhớ đệm. Xem hướng dẫn best favicon format để biết thông tin chi tiết về sự cân bằng giữa kích thước tệp và khả năng tương thích theo từng định dạng.
Cách hoạt động
- 1
Chuẩn bị một hình ảnh nguồn vuông
Xuất biểu tượng hoặc biểu tượng của bạn dưới dạng PNG 512×512 với nền trong suốt hoặc dưới dạng SVG với viewBox hình vuông (ví dụ: `viewBox='0 0 512 512'`). Đơn giản hóa các chi tiết nhỏ sẽ không được nhìn thấy ở kích thước 16×16.
- 2
Tạo gói favicon của bạn
Tải nguồn lên [favicon generator](tool:favicon-generator). Công cụ này tạo ra favicon.ico (nhiều kích thước 16/32/48/64), favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png và site.webmanifest — tất cả chỉ trong một lần.
- 3
Sao chép tất cả các tập tin vào thư mục gốc của trang web của bạn
Đặt mọi tệp từ tệp zip tải xuống vào thư mục gốc chung của dự án của bạn — thư mục phục vụ index.html. Đối với Next.js App Router, favicon.ico có dạng /app; PNG có trong /public.
- 4
Dán thẻ liên kết HTML vào <head>
Sao chép đoạn mã HTML đã tạo và thêm đoạn mã đó vào bên trong phần tử `<head>` của bạn. Bộ đầy đủ bao gồm dự phòng .ico, biến thể SVG, apple-touch-icon và liên kết tệp kê khai — tổng cộng có sáu dòng.
- 5
Xác minh trên các trình duyệt và thiết bị
Mở trang web của bạn ở dạng Chrome, Safari, Firefox và Edge. Kiểm tra tab, thanh dấu trang và thanh địa chỉ. Trên iOS, hãy nhấn vào bảng Chia sẻ và 'Thêm vào Màn hình chính' để kiểm tra apple-touch-icon. Sử dụng [favicon tester](utility:favicon-tester) để mô phỏng nhanh.
- 6
Xóa bộ nhớ đệm khi cập nhật favicon hiện có
Nếu thay thế một biểu tượng yêu thích trực tiếp, hãy tăng chuỗi phiên bản trong thẻ liên kết href (`?v=2`, `?v=3`, v.v.). Điều này buộc tất cả các trình duyệt tìm nạp tệp đã cập nhật trong lần tải trang tiếp theo thay vì phân phối phiên bản được lưu trong bộ nhớ đệm.
Thử ngay
Tạo favicon của bạn bây giờ
Tạo FaviconCâu hỏi thường gặp
Cách dễ nhất để tạo một favicon là gì?+
Tải PNG hoặc SVG hình vuông có kích thước 512×512 lên trình tạo FetchFavicon. Nó tạo ra tất cả các tệp được yêu cầu — .ico, SVG, apple-touch-icon, PNG tệp kê khai — cùng với HTML sẵn sàng dán trong chưa đầy một giây mà không cần đăng ký và không cần tải lên máy chủ.
Hình ảnh nguồn của tôi nên có kích thước như thế nào?+
Ít nhất 512×512 pixel, lý tưởng nhất là SVG. Việc giảm kích thước nhỏ hơn có nguy cơ bị mờ ở kích thước 256×256 được Windows sử dụng và ở kích thước 512×512 được yêu cầu cho lời nhắc cài đặt PWA. Việc nâng cấp hình ảnh nhỏ sẽ làm giảm chất lượng ở mỗi bước thay đổi kích thước.
Tôi có cần XXH0XX không?+
Có, nếu bất kỳ khách truy cập nào sử dụng iPhone hoặc iPad. Nếu không có nó, các lượt cài đặt trên màn hình chính iOS sẽ hiển thị hình thu nhỏ ảnh chụp màn hình chất lượng thấp của trang thay vì nhãn hiệu của bạn. Một 180×180 PNG được liên kết với `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>` là tất cả những gì bạn cần.
Tại sao favicon của tôi không hiển thị trong tab trình duyệt?+
Thông thường nó là một vấn đề bộ nhớ đệm. Mở cửa sổ riêng tư/ẩn danh và điều hướng đến trang web của bạn. Nếu nó vẫn không xuất hiện, hãy xác minh rằng favicon.ico được cung cấp ở gốc tên miền của bạn và đường dẫn href của thẻ liên kết có giải quyết chính xác — kiểm tra lỗi chính tả và thiếu dấu gạch chéo ở đầu.
Tôi có cần cả .ico và SVG không?+
Có, để được bảo hiểm đầy đủ. Miền .ico xử lý các trình duyệt cũ, phím tắt Windows và các công cụ của bên thứ ba tìm nạp trực tiếp /favicon.ico. SVG xử lý kết xuất sắc nét trên Chrome, Firefox, Edge và Safari 15+ và hỗ trợ chuyển đổi màu ở chế độ tối. Kích thước tệp kết hợp thường dưới 30 KB.
Thay đổi favicon mất bao lâu để lan truyền?+
Bất cứ lúc nào từ vài giây đến vài ngày, tùy thuộc vào mức độ mạnh mẽ của trình duyệt đã lưu vào bộ nhớ đệm gốc. Cách khắc phục nhanh nhất là nối thêm chuỗi truy vấn mới (`?v=2`) vào favicon href của bạn. Điều này làm cho trình duyệt coi nó như một URL mới và tìm nạp bản sao mới ngay lập tức.
Tôi có thể sử dụng JPEG làm nguồn favicon của mình không?+
Bạn có thể tải JPEG lên trình tạo nhưng JPEG không hỗ trợ độ trong suốt. Nếu biểu tượng của bạn cần nền trong suốt — trông đẹp nhất trong tab trình duyệt — thay vào đó, hãy bắt đầu từ PNG-32 hoặc SVG. Trình tạo sẽ chuyển đổi chính xác thành .ico và PNG.