Tạo favicon: favicon.ico, PNG và Apple touch icon
Tạo favicon.ico, favicon PNG, Apple touch icon và web app manifest từ ảnh hoặc chữ ngay trên trình duyệt, kèm các thẻ HTML để sao chép.
Thả ảnh vào đây hoặc chọn một ảnh
PNG, JPG, WebP, GIF (khung hình đầu tiên), BMP hoặc SVG. Ảnh vuông từ 512 × 512 pixel trở lên cho kết quả tốt nhất.
Chữ được vẽ bằng phông chữ cài trên thiết bị này, nên chữ cái và emoji có thể trông khác trên máy tính hoặc điện thoại khác. Tệp PNG và ICO tải xuống giữ nguyên hình thức bạn thấy ở đây.
Xem trước
16, 32 và 48 hiển thị ở kích thước thật; các biểu tượng lớn hơn được hiển thị nhỏ lại. Họa tiết ô caro đánh dấu vùng trong suốt.
Trên thẻ trình duyệt
Thanh thẻ mô phỏng đơn giản ở giao diện sáng và tối. Hãy kiểm tra để biểu tượng hiển thị rõ trên cả hai: logo tối màu trên nền trong suốt có thể biến mất trên thanh thẻ tối.
Tệp
Một số thiết bị Apple hiển thị phần trong suốt của biểu tượng trên màn hình chính thành màu đen, nên apple-touch-icon.png được lưu không có độ trong suốt: vùng trong suốt được tô bằng màu này. Cài đặt hình dạng không áp dụng cho tệp này, vì iPhone và iPad tự bo góc biểu tượng trên màn hình chính.
Dùng trong các thẻ HTML và manifest. "/" là thư mục gốc của trang web.
Các cài đặt nền, hình dạng, khoảng đệm và cắt ảnh không áp dụng cho favicon.svg.
Trình duyệt có thể dùng màu chủ đề để tô màu thanh địa chỉ hoặc thanh tiêu đề cửa sổ. Màu nền ứng dụng hiển thị trong lúc một ứng dụng web đã cài đặt khởi động.
Chọn một ảnh hoặc chuyển sang chữ để bắt đầu.
Nội dung của site.webmanifest
Lưu ý
- Hãy tải các tệp lên thư mục gốc của trang web (thư mục chứa trang chủ), hoặc nhập thư mục khác ở trên để đường dẫn trong HTML và manifest khớp với nơi lưu tệp.
- favicon.ico chứa các ảnh 16 × 16, 32 × 32 và 48 × 48 được lưu ở dạng dữ liệu PNG. Các trình duyệt hiện nay và Windows Vista trở lên đọc được tệp này; một số chương trình rất cũ chỉ đọc được ảnh biểu tượng không nén.
- Ảnh nguồn nhỏ, như ảnh 64 × 64, được phóng to cho các biểu tượng lớn hơn và trông mờ. Hãy dùng ảnh từ 512 × 512 pixel trở lên hoặc tệp SVG nếu có thể.
- Biểu tượng chữ dùng phông chữ cài trên thiết bị bạn dùng để tạo biểu tượng. Tệp PNG và ICO giữ nguyên hình thức đó, nhưng tạo lại biểu tượng trên thiết bị khác có thể cho kết quả khác.
- Tệp SVG được trình duyệt của bạn vẽ. Ảnh, phông chữ hoặc kiểu định dạng mà tệp SVG tải từ tệp hoặc trang web khác sẽ không được tải và có thể bị thiếu trong biểu tượng.
- Trình duyệt giữ favicon trong bộ nhớ đệm trong thời gian dài. Sau khi bạn thay favicon, biểu tượng cũ có thể vẫn hiện thêm một thời gian; tải lại hoàn toàn trang (hard refresh), dùng cửa sổ riêng tư hoặc đổi tên tệp trong HTML có thể giúp ích.
- Ảnh và chữ được xử lý trên trình duyệt của bạn và không được tải lên LeedyBox.
Cách sử dụng
- Chọn Ảnh rồi chọn hoặc thả logo của bạn, hoặc chọn Chữ hoặc emoji và nhập tối đa ba ký tự.
- Đặt nền, hình dạng và khoảng đệm, rồi kiểm tra bản xem trước và thẻ trình duyệt ở giao diện sáng và tối.
- Nếu muốn, hãy nhập tên trang web, tên ngắn, màu chủ đề và thư mục sẽ lưu các tệp.
- Nhấn "Tạo tệp favicon", rồi tải từng tệp xuống hoặc tải tất cả cùng lúc dưới dạng favicon-package.zip.
- Tải các tệp lên trang web của bạn và dán các thẻ HTML đã sao chép vào phần head của các trang.
Câu hỏi thường gặp
Ảnh của tôi có bị tải lên máy chủ không?
Không. Ảnh hoặc chữ được vẽ và chuyển đổi trên trình duyệt của bạn, và các tệp được tạo trên thiết bị của bạn. Không có gì được gửi tới LeedyBox. Khi trang được tải, chỉ thư viện ZIP được tải về, trực tiếp từ leedybox.com.
Tôi có thể dùng những ảnh nào, và có giới hạn không?
Tệp PNG, JPG, WebP, GIF (khung hình đầu tiên), BMP và SVG. Tệp SVG có thể lớn tới 10 MB. Ảnh chụp rất lớn (trên khoảng 50 megapixel) có thể bị lỗi trên điện thoại vì cần nhiều bộ nhớ. Ảnh vuông từ 512 × 512 pixel trở lên, hoặc tệp SVG, cho kết quả sắc nét nhất.
Vì sao favicon của tôi trông mờ hoặc khó đọc?
Biểu tượng 16 pixel có rất ít không gian. Hình dạng đơn giản, độ tương phản mạnh và một hoặc hai chữ cái hiệu quả hơn logo nhiều chi tiết hoặc chữ dài. Ảnh nguồn nhỏ được phóng to cho các kích thước lớn hơn và trông mờ. Hãy kiểm tra bản xem trước và thử giảm khoảng đệm hoặc dùng phiên bản đơn giản hơn của logo.
Tôi cần những tệp nào trong số này?
favicon.ico và các tệp PNG 16 và 32 pixel được trình duyệt trên máy tính sử dụng, còn apple-touch-icon.png được iPhone và iPad sử dụng. Các biểu tượng 192 và 512 pixel cùng site.webmanifest được dùng khi trang web được thêm vào màn hình chính hoặc cài đặt như một ứng dụng web. Dùng tất cả các tệp này cùng các thẻ HTML sẽ đáp ứng các trường hợp phổ biến.
Vì sao apple-touch-icon.png không có độ trong suốt?
Một số thiết bị Apple hiển thị phần trong suốt của biểu tượng trên màn hình chính thành màu đen. Vì vậy, công cụ tô vùng trong suốt bằng màu bạn chọn (mặc định là trắng) và để góc vuông, vì iPhone và iPad tự bo góc.