TanodTools
VI

Tạo favicon

Biến một ảnh hoặc một chữ cái thành bộ tệp favicon đầy đủ, kèm HTML để sử dụng chúng.

Tệp của bạn không bao giờ rời khỏi thiết bị

Thả ảnh vào đây

PNG, JPEG, WebP, GIF, BMP hoặc AVIF. Hoặc chuyển sang biểu tượng chữ cái bên dưới.

Mở ngay trên thiết bị này. Không có gì được tải lên.

Tạo biểu tượng từ

Cách vừa khung

Từng ảnh một, tối đa 50 MB và khoảng 100 megapixel. Biểu tượng chữ cái dùng 1 hoặc 2 ký tự.

Cách tạo favicon

  1. Chọn một ảnh, hoặc chuyển sang Chữ cái và nhập một hoặc hai ký tự với màu của bạn.
  2. Với ảnh, chọn cắt hình vuông ở giữa hoặc đặt vừa có đệm. Kiểm tra bản xem trước ở 16, 32, 48 và 180 pixel.
  3. Bấm Tạo tệp favicon, tải xuống tệp .zip và dán HTML vào các trang của bạn.

Một bộ favicon gồm những gì

Favicon là biểu tượng nhỏ trong thẻ trình duyệt, danh sách dấu trang hoặc kết quả tìm kiếm. Trình duyệt tìm một vài tệp khác nhau: favicon.ico cho các trình duyệt cũ và dùng chung, biểu tượng PNG 16 và 32 pixel cho thẻ, biểu tượng Apple touch 180 pixel cho màn hình chính iPhone và iPad, và biểu tượng 192 và 512 pixel cho Android và ứng dụng web có thể cài đặt. Một tệp site.webmanifest nhỏ liệt kê các biểu tượng Android.

Công cụ này vẽ riêng từng kích thước từ ảnh gốc của bạn, nên các kích thước nhỏ được thu nhỏ từ ảnh đầy đủ chứ không phải phóng to từ một ảnh bé tí. Tệp .ico được ghi như một vùng chứa ba ảnh PNG ở 16, 32 và 48 pixel. Biểu tượng chữ cái được vẽ trực tiếp ở từng kích thước, nên các cạnh vẫn sắc nét.

Mẹo

  • Dùng các hình đậm, đơn giản và độ tương phản mạnh. Chi tiết nhỏ biến mất ở 16 pixel.
  • Muốn có ảnh vuông từ một phần của bức ảnh? Hãy dùng Cắt ảnh với tỷ lệ 1:1 trước.
  • Cần kích thước khác? Đổi kích thước ảnh cho bạn mọi chiều rộng và chiều cao.

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

Ảnh của tôi có bị tải lên không?

Không. Các biểu tượng được vẽ trong trình duyệt trên thiết bị của bạn, và tệp zip cũng được tạo ở đó. Không có gì được gửi đến máy chủ.

Tôi nhận được những tệp nào?

favicon.ico (các phiên bản 16, 32 và 48 pixel), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 pixel), android-chrome-192x192.png, android-chrome-512x512.png và site.webmanifest, trong một tệp .zip.

Tôi đặt các tệp ở đâu?

Trong thư mục gốc của website, để chúng được phục vụ tại các địa chỉ như /favicon.ico. Sau đó dán đoạn HTML hiển thị sau khi bạn tạo tệp vào phần head của các trang.

Tôi nên bắt đầu với ảnh nào?

Một ảnh vuông ít nhất 512 × 512 pixel cho kết quả sạch nhất, vì biểu tượng lớn nhất là 512 pixel. Các hình đơn giản giữ được tốt hơn nhiều khi thu nhỏ xuống 16 pixel so với hình nhiều chi tiết. Hãy kiểm tra bản xem trước 16 và 32 pixel.

Khác nhau giữa cắt và đệm là gì?

Cắt lấy một hình vuông ở giữa ảnh và bỏ phần còn lại. Đặt vừa có đệm giữ toàn bộ ảnh, căn giữa với một lề nhỏ, và lấp khoảng trống bằng màu nền của bạn hoặc để trong suốt.

Tệp .ico có hợp lệ không?

Có. Nó chứa ba ảnh mã hóa PNG ở 16, 32 và 48 pixel, mà mọi trình duyệt hiện nay đều đọc được.