Tạo favicon
Biến logo hoặc ảnh thành bộ favicon hoàn chỉnh: favicon.ico cho trình duyệt cũ, biểu tượng PNG từ 16 đến 512 pixel, apple-touch-icon, manifest ứng dụng web
Kéo thả tệp ảnh vào đây
hoặc bấm để chọn tệp
Biến logo hoặc bất kỳ ảnh vuông nào thành bộ biểu tượng đầy đủ mà một website hiện đại cần: favicon.ico cho trình duyệt cũ, biểu tượng PNG từ 16 đến 512 pixel, apple-touch-icon cho màn hình chính iOS, manifest ứng dụng web và đoạn mã HTML tham chiếu tất cả những tệp đó.
Bạn nhận được cả tệp lẫn đoạn mã chỉ trong một bước, nên không phải nhớ cần xuất những kích thước nào hay viết những thẻ link nào. Ảnh nguồn được xử lý cục bộ, điều này rất quan trọng nếu logo chưa được công bố.
Cách tạo bộ favicon
Chọn một logo hoặc ảnh vuông
Tạo bộ biểu tượng
Tải các tệp về và sao chép đoạn mã HTML
Câu hỏi thường gặp
Những kích thước nào được tạo ra?
16x16 và 32x32 cho thẻ trình duyệt, 96x96 cho lối tắt, 180x180 làm apple-touch-icon, 192x192 và 512x512 cho Android và cài đặt PWA, cùng một tệp favicon.ico nhiều kích thước cho trình duyệt cũ.
Nên bắt đầu từ ảnh nào?
Một tệp PNG hoặc SVG vuông được kết xuất ở 512x512 trở lên với nền trong suốt. Logo nằm ngang sẽ bị thêm viền đen hai bên, còn ảnh nguồn nhỏ hoặc mờ sẽ cho ra favicon nhoè ở kích thước 512 pixel.
Tôi có cần tất cả các tệp đó không?
Với một website hiện đại, tệp .ico cùng hai tệp PNG 192 và 512 và manifest là gần đủ mọi thứ. Hãy tải lên cả bộ nếu bạn muốn tương thích tối đa - chúng chỉ nặng vài kilobyte.
Các tệp cần đặt ở đâu?
Hãy tải chúng lên thư mục gốc của website để /favicon.ico và /icon-192.png truy cập được, rồi dán đoạn mã HTML vào <head> của mọi trang, hoặc liên kết tới manifest và để nó lo phần còn lại.
Công cụ có dùng được cho ứng dụng web / PWA không?
Có - manifest cùng các biểu tượng 192/512 chính là những gì một ứng dụng web cài đặt được cần. Hãy nhớ tới biểu tượng maskable nếu logo của bạn phải chịu được các hình cắt thích ứng của Android.
Ảnh của tôi có bị tải lên không?
Không, mọi biểu tượng đều được tạo trong trình duyệt của bạn.
Tổng quan nhanh
| Đầu vào | ảnh |
|---|---|
| Nhiều tệp cùng lúc | Không |
| Chạy ở đâu | Ngay trong trình duyệt - tệp không bao giờ bị tải lên |
| Dùng được ngoại tuyến | Có — sau khi trang đã tải xong |
| Giá | Miễn phí, không đăng ký, không hình mờ |
Chọn giữa JPG, PNG, WebP và AVIF
Các định dạng này giải quyết những bài toán khác nhau, và chọn sai sẽ khiến bạn mất hoặc chất lượng, hoặc dung lượng. JPG là lựa chọn an toàn nhất cho ảnh chụp và cho mọi thứ bạn cần gửi cho người khác, vì thiết bị và phần mềm nào cũng mở được - nhưng nó nén mất dữ liệu và không có độ trong suốt. PNG không mất dữ liệu và hỗ trợ độ trong suốt, nên rất phù hợp cho logo, ảnh chụp màn hình, sơ đồ và mọi thứ có cạnh sắc hay chữ, đổi lại tệp lớn hơn nhiều. WebP thường vượt JPG 25-35% ở cùng chất lượng hiển thị và có hỗ trợ độ trong suốt, nhưng một số phần mềm cũ vẫn không mở được. AVIF còn nén mạnh hơn nữa, đặc biệt ở mức chất lượng thấp, nhưng mã hoá chậm hơn và đây là định dạng mới nhất trong bốn định dạng. Một quy tắc thực tế: JPG để gửi, PNG để chỉnh sửa, WebP cho website của chính bạn, AVIF khi từng kilobyte đều quan trọng và bạn đã kiểm tra rằng người xem mở được nó.
Đưa một tệp xuống dưới giới hạn dung lượng
Các biểu mẫu tải lên thường đòi những giới hạn như "dưới 2 MB" hay "dưới 500 KB", và cách nhanh nhất để đạt được là làm theo đúng thứ tự: cắt bỏ phần bạn không cần, rồi giảm số pixel xuống mức mà mục đích sử dụng cuối cùng yêu cầu (rộng 1920 px là quá đủ cho một ảnh toàn màn hình trên web, 1000 px cho một bài blog), và chỉ sau đó mới hạ chất lượng. Chuyển sang WebP hoặc AVIF có thể là khoản tiết kiệm lớn nhất nếu biểu mẫu tải lên chấp nhận định dạng đó. Xoá siêu dữ liệu không ảnh hưởng gì đến dung lượng và có thể quan trọng về quyền riêng tư, vì ảnh chụp thường mang theo toạ độ GPS, đúng model máy ảnh và ngày chụp. Nếu biểu mẫu vẫn từ chối tệp, hãy kiểm tra xem nó có áp giới hạn số pixel chứ không chỉ giới hạn dung lượng hay không - điều này khiến người ta bị mắc kẹt thường xuyên hơn cả số megabyte thực tế.