Công cụ tạo favicon

Chào mừng bạn đến với Công cụ tạo Favicon, một công cụ toàn diện để tạo các favicon và biểu tượng ứng dụng chuyên nghiệp từ bất kỳ hình ảnh nào. Cho dù bạn cần một tệp .ico đơn giản cho các tab trình duyệt hay một bộ biểu tượng đầy đủ để hỗ trợ PWA (Progressive Web App), công cụ này sẽ tạo ra tất cả các kích thước bạn cần chỉ trong một lần nhấp chuột.

Favicon là gì?

Favicon (viết tắt của "favorite icon") là một biểu tượng nhỏ gắn liền với trang web của bạn. Nó xuất hiện ở nhiều nơi:

• Tab trình duyệt: Biểu tượng nhỏ bên cạnh tiêu đề trang của bạn
• Thanh dấu trang: Khi người dùng đánh dấu trang web của bạn
• Lịch sử trình duyệt: Trong menu thả xuống của lịch sử
• Thanh địa chỉ: Bên cạnh URL trong một số trình duyệt
• Màn hình chính: Khi người dùng thêm trang web của bạn vào màn hình chính di động
• Kết quả tìm kiếm: Một số công cụ tìm kiếm hiển thị favicon trong kết quả

Một favicon được thiết kế tốt giúp cải thiện nhận diện thương hiệu, làm cho trang web của bạn trở nên chuyên nghiệp hơn và giúp người dùng nhanh chóng nhận ra trang web của bạn trong số nhiều tab đang mở.

Giải thích về các kích thước biểu tượng

Kích thước tệp ICO (favicon.ico)

Định dạng .ico truyền thống có thể chứa nhiều kích thước trong một tệp duy nhất. Công cụ của chúng tôi tạo ra:

Apple Touch Icon (180x180)

Khi người dùng iOS thêm trang web của bạn vào màn hình chính, biểu tượng này sẽ được sử dụng. Apple khuyên dùng 180x180 pixel để hiển thị tối ưu trên các thiết bị Retina. Biểu tượng này tách biệt với tệp .ico và nên được lưu dưới tên apple-touch-icon.png.

Biểu tượng Android Chrome (192x192 và 512x512)

Các thiết bị Android hiện đại và Chrome hỗ trợ Progressive Web Apps (PWA). Biểu tượng 192x192 được sử dụng cho các lối tắt trên màn hình chính, trong khi 512x512 được sử dụng cho màn hình chờ khi ứng dụng khởi chạy. Những biểu tượng này được tham chiếu trong tệp site.webmanifest.

Cách sử dụng công cụ này

1. Tải lên hình ảnh của bạn: Kéo và thả hoặc nhấp để chọn hình ảnh PNG, JPG hoặc WebP. Để có kết quả tốt nhất, hãy sử dụng hình ảnh hình vuông có kích thước ít nhất 512x512 pixel. Hình ảnh PNG với nền trong suốt là lý tưởng nhất.
2. Chọn kích thước: Chọn kích thước biểu tượng cần tạo. Chúng tôi khuyên bạn nên chọn ít nhất 16x16, 32x32, 48x48 cho tệp ICO, cộng với 180x180 cho các thiết bị Apple.
3. Đặt màu nền: Nếu hình ảnh của bạn có độ trong suốt và bạn muốn có nền màu đồng nhất, hãy chọn một màu. Nếu không, hãy để nó trong suốt.
4. Tạo: Nhấp vào nút để tạo tất cả các favicon của bạn. Xem trước từng kích thước để đảm bảo chất lượng.
5. Tải xuống: Tải xuống từng tệp riêng lẻ hoặc gói ZIP hoàn chỉnh với tất cả các biểu tượng và đoạn mã.

Các phương pháp thiết kế Favicon tốt nhất

• Giữ cho đơn giản: Favicon rất nhỏ - các logo phức tạp với nhiều chi tiết nhỏ sẽ không thể đọc được ở kích thước 16x16 pixel. Hãy sử dụng các phiên bản rút gọn của logo hoặc một biểu tượng đặc trưng.
• Sử dụng độ tương phản: Đảm bảo biểu tượng của bạn nổi bật trên cả nền sáng và tối (các chủ đề trình duyệt khác nhau).
• Kiểm tra ở kích thước nhỏ: Luôn xem trước favicon ở kích thước 16x16 để đảm bảo nó vẫn dễ nhận diện.
• Cân nhắc tính trong suốt: Favicon PNG có thể có nền trong suốt, giúp giao diện trông sạch sẽ hơn trong các trình duyệt hiện đại.
• Định dạng hình vuông: Luôn bắt đầu với một hình ảnh nguồn hoàn toàn vuông để tránh bị biến dạng.

Hướng dẫn triển khai

Triển khai HTML cơ bản

Sau khi tạo favicon, hãy thêm mã này vào phần <head> trong tệp HTML của bạn:

<!-- Favicon -->
<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">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android Chrome -->
<link rel="manifest" href="/site.webmanifest">

Tệp Manifest PWA

Để hỗ trợ Progressive Web App, hãy bao gồm tệp site.webmanifest tham chiếu đến các biểu tượng Android của bạn.

Câu hỏi thường gặp

Favicon là gì và tại sao tôi cần nó?

Favicon (biểu tượng yêu thích) là biểu tượng nhỏ xuất hiện trong các tab trình duyệt, dấu trang và thanh địa chỉ. Nó giúp người dùng nhanh chóng nhận diện trang web của bạn trong số nhiều tab đang mở. Một favicon chuyên nghiệp giúp tăng cường nhận diện thương hiệu và trải nghiệm người dùng. Các trang web hiện đại cần nhiều kích thước favicon cho các thiết bị và trình duyệt khác nhau.

Tôi có thể sử dụng định dạng hình ảnh nào để tạo favicon?

Bạn có thể tải lên các hình ảnh định dạng PNG, JPG, JPEG, GIF hoặc WebP. Để có kết quả tốt nhất, hãy sử dụng hình ảnh PNG với nền trong suốt có kích thước 512x512 pixel hoặc lớn hơn. Công cụ sẽ tự động thay đổi kích thước hình ảnh của bạn sang tất cả các kích thước favicon đã chọn trong khi vẫn duy trì chất lượng.

Tôi nên tạo những kích thước favicon nào?

Để phủ sóng đầy đủ các trình duyệt, chúng tôi khuyên dùng: 16x16 (tab trình duyệt), 32x32 (thanh tác vụ Windows), 48x48 (màn hình chính Windows), 180x180 (Apple Touch Icon cho iOS), 192x192 và 512x512 (Android Chrome). Các kích thước 64x64, 128x128 và 256x256 là tùy chọn nhưng hữu ích cho màn hình độ phân giải cao (DPI).

Hình ảnh tải lên của tôi có được lưu trữ trên máy chủ không?

Tất cả quá trình xử lý hình ảnh diễn ra an toàn trên máy chủ của chúng tôi trong khi tạo favicon, nhưng chúng tôi không lưu trữ hình ảnh của bạn vĩnh viễn. Sau khi xử lý, hình ảnh gốc sẽ bị xóa. Chỉ các tệp favicon được tạo mới được gửi lại cho bạn để tải xuống.

Làm cách nào để thêm favicon đã tạo vào trang web của tôi?

Sau khi tạo favicon của bạn: 1) Tải xuống tệp ZIP chứa tất cả các tệp biểu tượng, 2) Tải các tệp lên thư mục gốc của trang web, 3) Sao chép đoạn mã HTML được cung cấp vào phần <head> của trang web. Để hỗ trợ PWA, hãy bao gồm cả tệp site.webmanifest.

Tài nguyên bổ sung

• Web App Manifest - MDN
• Apple Touch Icons - Apple Developer
• Favicon - Wikipedia