Tạo favicon cho website
Tạo favicon đủ mọi kích thước chỉ từ một ảnh.
Thả logo của bạn vào đây hoặc nhấp để chọn
PNG, SVG, JPG, WebP hoặc ICO. Logo vuông từ 512 × 512 px trở lên cho kết quả tốt nhất. Tệp được xử lý trong trình duyệt và không bao giờ được tải lên. Ảnh được giữ trong trình duyệt này cho đến khi bạn xóa.
Ctrl+OchọnCtrl+Vdán
Favicon là biểu tượng nhỏ mà trình duyệt hiển thị trên tab và dấu trang; điện thoại dùng bản lớn hơn khi ai đó thêm trang web của bạn vào màn hình chính. Thả một logo vào và công cụ này tạo mọi tệp một trang web cần — favicon.ico, favicon PNG, biểu tượng Apple Touch, biểu tượng Android và tệp web manifest — kèm bản xem trước trực tiếp và mã HTML để dán vào trang. Công cụ chạy trong trình duyệt nên logo của bạn không bao giờ rời khỏi thiết bị; miễn phí và không cần đăng ký.
Cách tạo favicon
- Thả logo của bạn (PNG, SVG, JPG hoặc WebP) vào bất kỳ đâu trên trang, dán bằng Ctrl+V, hoặc nhấp để chọn. Ảnh bạn đã thêm ở công cụ ảnh khác đã có sẵn trong danh sách, đúng như khi bạn để lại ở đó: bấm vào ảnh thu nhỏ của nó để dùng. Logo mẫu cho phép bạn dùng thử mà không cần tệp.
- Logo được đóng khung sẵn cho bạn: phần biểu tượng của logo ngang, hoặc logo đã bỏ các mép trống. Kéo ô vuông trên logo để thay đổi, hoặc chọn Toàn bộ logo. Chọn nền (màu của chính logo được đề xuất trước), khoảng đệm và hình dạng; bản xem trước cập nhật ngay khi bạn chỉnh.
- Bấm Tải tất cả (ZIP), đặt các tệp vào thư mục gốc của trang web, rồi bấm Sao chép HTML và dán các thẻ vào phần <head> của trang.
Tính năng
- favicon.ico với biểu tượng 16, 32 và 48 px, cùng favicon PNG 16 và 32 px
- apple-touch-icon.png (180 px) và biểu tượng Android Chrome (192 và 512 px)
- site.webmanifest với tên ứng dụng và màu chủ đề của bạn, cùng các thẻ HTML cho phần <head>
- Tự động tìm phần biểu tượng của logo ngang; kéo ô vuông để dùng phần khác, hoặc lấy toàn bộ logo
- Nền: trong suốt, màu của chính logo hoặc bất kỳ màu nào; khoảng đệm từ 0 đến 30%; hình vuông, bo góc hoặc hình tròn
- Xem trước trực tiếp mọi kích thước, tab trình duyệt và màn hình chính, ở chế độ sáng và tối
- Bắt đầu từ PNG, SVG, JPG, WebP hoặc ICO; mọi tệp trong một tệp ZIP
Có riêng tư không?
Có. Các biểu tượng được tạo ngay trong trình duyệt bằng bộ máy xử lý ảnh WebAssembly; logo và các tệp của bạn không bao giờ rời khỏi thiết bị. Logo ở lại trình duyệt này cho đến khi bạn xóa nó khỏi danh sách.
Câu hỏi thường gặp
Tôi cần những kích thước favicon nào?
Bốn tệp đáp ứng gần như mọi nhu cầu: favicon.ico với 16, 32 và 48 px cho tab trình duyệt, dấu trang và lối tắt Windows; apple-touch-icon.png 180 px cho màn hình chính của iPhone và iPad; và các tệp PNG 192 và 512 px, khai báo trong site.webmanifest, cho Android và ứng dụng web cài đặt được. Tệp ZIP chứa tất cả, cùng các tệp PNG 16 và 32 px cho trình duyệt ưu tiên PNG.
Làm sao thêm favicon vào HTML?
Đặt các tệp vào thư mục gốc của trang web, sao cho /favicon.ico mở được, rồi bấm Sao chép HTML và dán các thẻ vào phần <head> của mọi trang. Trình duyệt vẫn tìm /favicon.ico dù không có thẻ nào; các thẻ bổ sung những kích thước PNG, biểu tượng Apple và tệp manifest.
Vì sao apple-touch-icon.png có nền?
Vì iPhone và iPad hiển thị điểm ảnh trong suốt thành màu đen và tự bo góc, nên biểu tượng Apple luôn là một hình vuông đầy đủ, không trong suốt: màu nền của bạn, hoặc màu trắng khi nền trong suốt. Các biểu tượng khác giữ nguyên độ trong suốt và hình dạng.
Có dùng được logo SVG không?
Được. Trình duyệt vẽ SVG ở kích thước riêng của nó, hoặc ở 1024 px nếu nhỏ hơn, và mọi biểu tượng được tạo từ đó. SVG liên kết tới tệp khác (ảnh, phông chữ hoặc stylesheet) không thể được vẽ đầy đủ dưới dạng ảnh, nên công cụ sẽ báo cho bạn thay vì tạo biểu tượng thiếu sót; hãy xuất nó thành PNG, hoặc nhúng các ảnh của nó vào trước.
Tôi đã thay favicon nhưng trình duyệt vẫn hiện favicon cũ. Vì sao?
Trình duyệt lưu favicon trong bộ nhớ đệm rất lâu. Hãy tải lại trang bằng Ctrl+F5 (Cmd+Shift+R trên Mac), hoặc mở trang web trong cửa sổ ẩn danh, để thấy biểu tượng mới.