Favicon là gì?
Favicon (viết tắt của "favorite icon") là biểu tượng nhỏ được hiển thị trong các tab trình duyệt, dấu trang và thanh địa chỉ bên cạnh tên trang web của bạn. Nó giúp người dùng nhanh chóng xác định trang web của bạn giữa nhiều tab mở và tăng cường nhận diện thương hiệu.
Các trang web hiện đại cần favicon ở nhiều kích thước và định dạng khác nhau để đảm bảo tương thích trên các trình duyệt, thiết bị và nền tảng khác nhau — từ trình duyệt máy tính để bàn đến màn hình chính iOS và trình khởi chạy ứng dụng Android.
Tại sao bạn cần nhiều kích thước Favicon
Trình duyệt máy tính để bàn
- 16×16 & 32×32 — Biểu tượng tab trình duyệt tiêu chuẩn
- 48×48 — Thanh tác vụ Windows và phím tắt trang web
Thiết bị di động & PWA
- 180×180 — Apple Touch Icon cho màn hình chính iOS
- 192×192 & 512×512 — Biểu tượng Android và Progressive Web App
Công cụ này tạo tất cả các kích thước này từ một hình ảnh duy nhất, giúp bạn tiết kiệm công sức thay đổi kích thước và chuyển đổi từng hình ảnh theo cách thủ công.
- 1. Favicon là gì?
- 2. Cách sử dụng Trình Tạo Favicon
- 3. Tính năng
- 4. Các câu hỏi thường gặp
- 4.1. Tôi nên sử dụng kích thước hình ảnh nào để có kết quả tốt nhất?
- 4.2. Sự khác biệt giữa favicon ICO và PNG là gì?
- 4.3. Tôi có cần tất cả các kích thước favicon không?
- 4.4. Làm cách nào để thêm favicon vào trang web của tôi?
- 4.5. Tôi nên chọn hình dạng nào?
- 4.6. Tôi có thể sử dụng nền trong suốt không?
Cách sử dụng Trình Tạo Favicon
Tải lên hình ảnh của bạn
Nhấp vào khu vực tải lên hoặc kéo và thả tệp hình ảnh. Các định dạng được hỗ trợ bao gồm PNG, JPG, SVG, WebP và GIF. Để có kết quả tốt nhất, hãy sử dụng hình ảnh vuông với kích thước tối thiểu 512×512 pixel.
Tùy chỉnh cài đặt
- Hình dạng — Chọn giữa Vuông (favicon tiêu chuẩn), Góc bo tròn (giao diện hiện đại) hoặc Tròn (biểu tượng kiểu ứng dụng)
- Nền — Giữ nó trong suốt hoặc đặt màu đặc phía sau biểu tượng của bạn
- Khoảng cách — Điều chỉnh khoảng cách xung quanh biểu tượng của bạn (0% đến 40%) để tạo không gian thở
Xem trước
Xem favicon của bạn trông như thế nào ở tất cả các kích thước tiêu chuẩn trong lưới xem trước. Mô phỏng tab trình duyệt cho thấy chính xác cách nó sẽ xuất hiện trong tab trình duyệt thực tế.
Tải xuống
- ICO — Tải xuống favicon.ico chứa các kích thước 16×16, 32×32 và 48×48
- PNG — Tải xuống tệp PNG 32×32 duy nhất
- Apple Touch — Tải xuống apple-touch-icon.png ở kích thước 180×180
- Tải Xuống Tất Cả — Lấy tệp ZIP với tất cả các kích thước (ICO + 8 PNG), mã HTML sẵn sàng sử dụng và tệp site.webmanifest
Tính năng
Nhiều định dạng đầu ra
Tạo favicon ở định dạng ICO (tệp biểu tượng đa kích thước truyền thống được sử dụng bởi trình duyệt) và các tệp PNG riêng lẻ ở mọi kích thước tiêu chuẩn.
- Tệp ICO với 16×16, 32×32 và 48×48 được nhúng
- Các tệp PNG riêng lẻ cho tất cả các kích thước
- Tương thích trình duyệt tối đa
Tùy chỉnh hình dạng
Chọn từ ba tùy chọn hình dạng để phù hợp với phong cách thương hiệu của bạn.
- Vuông — Giao diện favicon cổ điển
- Bo tròn — Mềm mại hiện đại với các góc tỷ lệ
- Tròn — Biểu tượng kiểu ứng dụng sạch sẽ cho PWA
Kiểm soát nền & khoảng cách
Đặt màu nền tùy chỉnh cho logo có độ trong suốt hoặc giữ nó trong suốt để có giao diện sạch sẽ.
- Màu nền tùy chỉnh
- Hỗ trợ nền trong suốt
- Khoảng cách có thể điều chỉnh (0% đến 40%)
Xem trước tab trình duyệt trực tiếp
Xem chính xác cách favicon của bạn sẽ xuất hiện trong tab trình duyệt thực tế trước khi tải xuống.
- Cập nhật xem trước theo thời gian thực
- Mô phỏng tab trình duyệt chính xác
- Tinh chỉnh với sự tự tin
Gói Favicon hoàn chỉnh
Tùy chọn "Tải Xuống Tất Cả" cung cấp mọi thứ bạn cần trong một tệp ZIP.
- favicon.ico + tất cả 8 kích thước PNG
- Thẻ liên kết HTML sẵn sàng sử dụng
- site.webmanifest cho hỗ trợ PWA
Dữ liệu của bạn vẫn riêng tư
Tất cả xử lý diễn ra trong trình duyệt của bạn:
- Không tải lên — Hình ảnh không bao giờ rời khỏi thiết bị của bạn
- Không theo dõi — Chúng tôi không thu thập dữ liệu sử dụng
- Xử lý 100% phía máy khách
Các câu hỏi thường gặp
Tôi nên sử dụng kích thước hình ảnh nào để có kết quả tốt nhất?
Sử dụng hình ảnh vuông có kích thước ít nhất 512×512 pixel. Điều này đảm bảo kích thước đầu ra lớn nhất (512×512 cho PWA) vẫn sắc nét. Các hình ảnh không vuông được tự động điều chỉnh và căn giữa trong ranh giới favicon trong khi vẫn giữ tỷ lệ khung hình của chúng.
Sự khác biệt giữa favicon ICO và PNG là gì?
Tệp đa kích thước truyền thống
- Chứa nhiều kích thước trong một tệp
- Được hỗ trợ bởi tất cả các trình duyệt một cách tự nhiên
- Tệp duy nhất cho 16×16, 32×32, 48×48
- Tốt nhất cho hỗ trợ trình duyệt cũ
Các tệp riêng lẻ hiện đại
- Các tệp hình ảnh riêng lẻ cho mỗi kích thước
- Được chỉ định bằng cách sử dụng các thẻ liên kết HTML
- Chất lượng và độ trong suốt tốt hơn
- Được ưa thích bởi các trình duyệt hiện đại
Để tương thích tối đa, hãy sử dụng cả hai: tệp ICO làm dự phòng và tệp PNG cho các trình duyệt hiện đại.
Tôi có cần tất cả các kích thước favicon không?
Yêu cầu tối thiểu:
- favicon.ico (16/32/48) cho trình duyệt máy tính để bàn
- apple-touch-icon.png (180×180) cho iOS
Phạm vi đầy đủ (được khuyến nghị):
- Tất cả các kích thước tối thiểu ở trên
- 192×192 và 512×512 cho Android và PWA
- Tệp site.webmanifest cho Progressive Web Apps
Làm cách nào để thêm favicon vào trang web của tôi?
Tải lên tệp
Đặt các tệp favicon trong thư mục gốc của trang web (nơi index.html của bạn nằm).
Thêm mã HTML
Sao chép các thẻ liên kết HTML từ tệp favicon-usage.html đi kèm và dán chúng vào phần <head> của trang của bạn.
Kiểm tra
Xóa bộ nhớ cache trình duyệt và tải lại trang web của bạn để xem favicon mới.
Tôi nên chọn hình dạng nào?
Vuông
Lựa chọn tiêu chuẩn cho các trang web truyền thống và thương hiệu chuyên nghiệp.
Phổ biến nhấtBo tròn
Hoạt động tốt cho các thương hiệu hiện đại, thân thiện với thẩm mỹ mềm mại hơn.
Hiện đạiTròn
Lý tưởng cho các biểu tượng kiểu ứng dụng, đặc biệt là cho PWA hoặc màn hình chính di động.
Kiểu ứng dụngXem trước từng tùy chọn để xem cái nào trông tốt nhất với logo của bạn.
Tôi có thể sử dụng nền trong suốt không?
Có, nền trong suốt được hỗ trợ và được chọn theo mặc định. Điều này hoạt động tốt cho logo được đặt trên nền trang web đa dạng.
Thực hành tốt nhất:
- Sử dụng nền trong suốt cho favicon máy tính để bàn
- Cân nhắc nền đặc cho biểu tượng màn hình chính di động
- Kiểm tra favicon của bạn trên cả chủ đề trình duyệt sáng và tối
Chưa có bình luận nào. Hãy là người đầu tiên!