Tạo favicon online
Tải logo lên và nhận về trong một tệp ZIP các biểu tượng mà trang web cần: favicon.ico chứa ảnh 16, 32 và 48 pixel, PNG 48 pixel cho Google, Apple Touch Icon nền đục cho iPhone, biểu tượng 192 và 512 pixel cho Android, biểu tượng maskable đã tính sẵn vùng an toàn, và site.webmanifest. Nếu bạn tải lên SVG, icon.svg cũng được đưa vào. Bạn xem trước tab, kết quả Google và màn hình chính, rồi sao chép đoạn mã <head> làm sẵn; mọi thứ chạy trong trình duyệt.
- Miễn phí, không cần đăng ký
- Tệp không bao giờ rời khỏi thiết bị của bạn
- Tối đa 50 MB mỗi tệp
Hãy thêm hình ảnh logo hoặc biểu tượng của bạn để bắt đầu. PNG, SVG, JPG và WebP đều dùng được; kết quả tốt nhất đến từ hình vuông tối thiểu 512 × 512 pixel.
Tệp của bạn không bao giờ rời khỏi thiết bị; hình ảnh được xử lý ngay trong trình duyệt. Dữ liệu EXIF và vị trí không được thêm vào kết quả.
Cách tạo favicon
Thêm logo của bạn
Tải lên logo PNG, SVG, JPG hoặc WebP. Kết quả tốt nhất đến từ hình vuông tối thiểu 512 × 512 pixel; SVG cũng dùng được.
Đặt tên, màu sắc và khoảng đệm
Nhập tên trang web và tên ngắn, chọn màu chủ đề và màu nền, rồi thêm khoảng đệm nếu cần. Phần xem trước cho thấy biểu tượng sẽ hiển thị thế nào trên tab, trên Google và trên màn hình chính.
Tải gói xuống và đặt vào trang web
Tải ZIP xuống, tải các tệp lên thư mục gốc của trang web và thêm đoạn <head> được hiển thị vào các trang của bạn.
Những gì được giữ lại?
Được giữ lại
- Tỷ lệ của logo: ảnh không vuông được đặt vừa trong hình vuông, không bao giờ bị kéo giãn
- Độ trong suốt (ở các biểu tượng tiêu chuẩn; nếu bạn chọn màu nền thì màu đó được tô vào)
- Nếu bạn tải lên SVG, icon.svg được đưa vào nguyên vẹn
Thay đổi
- Mỗi biểu tượng được lấy mẫu lại theo kích thước riêng với chất lượng cao
- Apple Touch Icon và biểu tượng maskable luôn có nền đục: màu bạn chọn, hoặc trắng khi chọn “Trong suốt”
- Trong biểu tượng maskable, nội dung nằm trong vùng an toàn 80%
Không được mang theo
- Không tạo vector (SVG) từ PNG hoặc JPG; icon.svg chỉ có khi đầu vào là SVG
- EXIF và các siêu dữ liệu khác không được thêm vào biểu tượng
Khi nào nên dùng
Bộ biểu tượng đầy đủ cho trang web mới
Một favicon.ico duy nhất không còn đủ: màn hình chính iPhone, Android và kết quả tìm kiếm Google cần các tệp khác nhau. Chỉ một lần tải lên là bạn có tất cả, với tên và kích thước đúng.
Đưa biểu tượng lên kết quả tìm kiếm Google
Google hiển thị biểu tượng của trang web trong kết quả tìm kiếm từ một tệp vuông có kích thước là bội số của 48 pixel, và tệp đó phải cho phép thu thập dữ liệu. Gói này đã có sẵn tệp đó cùng liên kết <head> tương ứng.
Trang web có thể thêm vào như một ứng dụng (PWA)
Nếu muốn trang web thêm được vào màn hình chính, bạn cần manifest và biểu tượng 192/512 pixel. Biểu tượng maskable giúp logo không bị cắt khi Android bo biểu tượng thành hình tròn hoặc hình vuông bo góc.
Những giới hạn cần biết
- Kết quả tốt nhất đến từ hình vuông tối thiểu 512 × 512 pixel; biểu tượng lớn tạo từ nguồn nhỏ hơn sẽ bị mờ.
- Nét mảnh và chữ nhỏ trở nên khó đọc ở biểu tượng 16 và 32 pixel; logo đậm, tương phản cao sẽ phù hợp hơn.
- Màu chủ đề chỉ được áp dụng ở thanh địa chỉ của trình duyệt di động và phụ thuộc vào cài đặt trình duyệt.
- Google có thể mất nhiều ngày, thậm chí vài tuần, để cập nhật biểu tượng trong kết quả tìm kiếm, và trình duyệt cũng lưu đệm biểu tượng.
Câu hỏi thường gặp
Một trang web cần những tệp favicon nào?
Cách làm hiện nay: favicon.ico ở thư mục gốc, PNG 48 pixel cho Google, icon.svg nếu có thể, apple-touch-icon.png 180 pixel cho iPhone, biểu tượng 192 và 512 pixel cho Android và một site.webmanifest. Công cụ này tạo tất cả và đưa cho bạn các liên kết <head>.
Biểu tượng maskable là gì?
Biểu tượng maskable giữ nội dung trong vùng an toàn và có nền tô kín, để Android có thể cắt nó thành hình tròn, hình vuông bo góc hoặc hình dạng khác tùy thiết bị. Ở đây nội dung được đặt trong vùng giữa 80% của ảnh 512 pixel.
Vì sao Apple Touch Icon có nền đục và góc vuông?
iOS hiển thị vùng trong suốt thành màu đen và tự bo tròn góc. Vì vậy biểu tượng được tạo tô kín hoàn toàn và không bo góc, theo màu nền bạn chọn (trắng nếu chọn trong suốt).
Vì sao biểu tượng của tôi không hiện trong kết quả Google?
Tệp biểu tượng không được bị robots.txt chặn, phải được liên kết trong <head> của trang chủ và phải là hình vuông có kích thước là bội số của 48 pixel. Sau khi sửa, bạn có thể yêu cầu lập chỉ mục lại trang chủ trong Search Console; việc cập nhật vẫn có thể mất nhiều ngày hoặc vài tuần.
Điều gì xảy ra nếu tôi tải lên ảnh không vuông?
Các biểu tượng được đặt vừa trong hình vuông mà không bị méo, nên hai bên còn khoảng trống. Nếu muốn khung ảnh lấp đầy hình vuông, hãy cắt nó về tỷ lệ 1:1 bằng công cụ cắt trước.
Công cụ này có tạo favicon SVG từ PNG không?
Không. Tự động biến pixel thành vector có thể âm thầm làm thay đổi diện mạo của biểu tượng, nên icon.svg chỉ được đưa vào khi chính bạn tải lên SVG.
Công cụ này có miễn phí không?
Có, hoàn toàn miễn phí. Không cần tài khoản, gói đăng ký hay watermark.
Tệp của tôi có được tải lên đâu đó không?
Không. Hình ảnh được xử lý ngay trong trình duyệt và không bao giờ rời khỏi thiết bị. Dữ liệu EXIF và vị trí không được thêm vào kết quả.