Trình Tạo Favicon Làm Gì
Trình tạo favicon cho phép bạn tạo một bộ biểu tượng favicon hoàn chỉnh cho trang web của mình từ một hình ảnh duy nhất và tự động tạo các tệp dành cho nhiều trình duyệt, thiết bị và nền tảng khác nhau.
Công cụ này giúp bạn:
tạo favicon từ PNG, JPG và các định dạng hình ảnh khác
tạo bộ biểu tượng với nhiều kích thước khác nhau
nhận mã HTML để triển khai
chuẩn bị favicon cho trình duyệt, Android và iOS
xem trước favicon sẽ hiển thị như thế nào
Phù hợp với website, ứng dụng web, landing page và PWA.
Favicon Là Gì
Favicon là một biểu tượng nhỏ của website được hiển thị trong:
tab trình duyệt
dấu trang (bookmark)
lịch sử trình duyệt
công cụ tìm kiếm
thiết bị di động
PWA và các lối tắt
Favicon giúp người dùng nhanh chóng nhận diện website và tăng khả năng nhận diện thương hiệu.
Các Định Dạng Và Kích Thước Được Tạo
Công cụ tự động tạo favicon với các kích thước và định dạng phổ biến.
Kích thước | Loại | Nơi sử dụng |
|---|
16×16 | favicon | Tab trình duyệt, dấu trang |
32×32 | favicon | Trình duyệt trên máy tính |
48×48 | biểu tượng ứng dụng | Windows, lối tắt trên màn hình |
96×96 | biểu tượng ứng dụng | Lối tắt Android, biểu tượng launcher |
128×128 | biểu tượng ứng dụng | Chrome Apps, PWA, launcher trên máy tính |
180×180 | apple-touch-icon | iPhone, iPad |
192×192 | biểu tượng manifest | Android, PWA |
512×512 | biểu tượng manifest | PWA, ứng dụng |
Các website hiện đại thường sử dụng nhiều kích thước favicon và biểu tượng ứng dụng khác nhau để đảm bảo hiển thị chính xác trên nhiều thiết bị và nền tảng.
Cách Chọn Hình Ảnh Phù Hợp
Những đặc điểm sau phù hợp nhất cho favicon:
hình dạng đơn giản
độ tương phản cao
ít chi tiết
các yếu tố trực quan lớn
hình ảnh vuông
Các chi tiết nhỏ và văn bản rất khó đọc ở kích thước 16×16 px.
Xem Trước Favicon
Công cụ hiển thị favicon của bạn sẽ trông như thế nào:
Điều này giúp bạn đánh giá khả năng đọc và hình thức hiển thị trước khi xuất bản.
Khuyến Nghị Thực Tế
Sử dụng hình ảnh vuông có kích thước tối thiểu 512×512 px
Kiểm tra favicon trong cả giao diện sáng và tối
Tránh sử dụng văn bản nhỏ và các đường nét mảnh
Đối với thương hiệu, nên sử dụng logo hoặc chữ lồng (monogram)
Sau khi cập nhật favicon, hãy kiểm tra cách hiển thị của nó trong Google Search Console và các trình duyệt phổ biến
Tại Sao Favicon Có Thể Trông Không Tốt
Thiết kế quá phức tạp: các chi tiết nhỏ trở nên khó nhận biết.
Sử dụng văn bản: văn bản hầu như sẽ biến mất ở kích thước nhỏ.
Độ tương phản thấp: favicon có màu sáng có thể khó nhìn thấy trong trình duyệt và giao diện tối.
Hình ảnh nguồn không phù hợp: hình ảnh mờ hoặc độ phân giải thấp làm giảm chất lượng favicon.
Lorem Ipsum