Tạo favicon
Nhập một ảnh, xuất đủ bộ favicon — có bản xem trước 16px thật trước khi bạn quyết định
Thả logo ở đây
hoặc nhấn để chọn tệp — PNG, JPG hoặc WebP. Ảnh vuông từ 512 px trở lên phù hợp nhất.
Không có gì được tải lên. Mọi tệp được vẽ và mã hóa trong trình duyệt của bạn.
Trước khi bắt đầu với Tạo favicon
Tạo bộ favicon nhiều kích thước, Apple touch, biểu tượng Android và đoạn HTML sẵn chép từ một ảnh trong trình duyệt.
Phù hợp nhất cho
- Tạo các tệp favicon và biểu tượng di động phổ biến cho trang
- Kiểm tra logo ở kích thước trình duyệt thực 16 px
- Chép đoạn head và manifest có sẵn vào trang
Biết trước bắt đầu
- Bộ tạo bắt đầu một nguồn raster, không thiết kế lại logo
- Các biểu trưng rất chi tiết có thể không còn dễ đọc ở 16px
- Favicon đã thay đổi có thể vẫn nằm trong bộ nhớ đệm trình duyệt sau khi triển khai
Tiếp tục quy trình
Cách sử dụng
1. Tải biểu trưng của bạn
Thả PNG, JPG hoặc WebP: ảnh vuông ít nhất 512 px tốt nhất vì 512 là tệp lớn nhất tạo ra và phóng không phát minh thông tin. Ảnh không vuông có khung cắt vuông kéo được theo cạnh dài hoặc chọn Vừa khung để thêm dải. Không cách nào kéo méo. Bảng báo kích thước, có trong suốt không và cảnh báo nguồn dưới 512 px vì tệp 512 px sẽ phóng và mềm. Vừa khung là lựa chọn trung thực nếu không cắt được, nhưng có giá: logo rộng thành dấu nhỏ với dải trống trên dưới, nhiều không gian chết trong thẻ 16 px.
2. Kiểm tra bản xem trước đúng kích thước
Ba ô được vẽ 16, 32, 180 pixel thật trên nền sáng và tối; tab giả dưới đặt bản 16 px cạnh tiêu đề như thường. Đa số bộ tạo bỏ bước này, nhưng nó cứu bạn: nếu 16 px là vệt, xuất không sửa được, cần dấu đơn giản hơn. Thanh cỡ và bán kính dùng cùng preview nên thấy đệm/bo trước tải.
Hai điểm cần biết. Viền đứt quanh ô là phạm vi thật; không có, biểu tượng thêm lề hay giảm cỡ không khác biểu tượng nhỏ vì trống mang màu mẫu. Mẫu sáng/tối hiện phần trong suốt còn sau chọn nền, giúp quầng nhạt thấy trên tối và ngược lại. Tab giả là CSS quanh canvas 16 px, không browser thật; cần vì 16 px một mình cảm giác lớn hơn cạnh tiêu đề.
3. Chọn bộ và tải xuống
Chọn bộ tối thiểu hoặc bộ tương thích cũ, nhấn Tạo rồi tải riêng hoặc ZIP. Chép đoạn head và manifest từ bảng dưới: cả hai liệt kê đúng các tệp đã tạo, không thêm. Khối manifest là đối tượng JSON đầy đủ có thể lưu trực tiếp vào site.webmanifest; nó vẫn cần một theme_color và một background_color, do bạn tự chọn. Điền tên ứng dụng và tên đó xuất hiện dưới dạng apple-mobile-web-app-title trong head và dưới dạng name trong manifest. Để trống thì cả hai dòng đều không được xuất, nên iOS dùng tiêu đề trang — thường là lựa chọn đúng.
Bạn thực sự cần những kích thước nào?
| Kích thước | Tệp | Được dùng cho |
|---|---|---|
| 16 × 16 | favicon.ico | Tab và danh sách dấu trang ở màn hình mật độ chuẩn. |
| 32 × 32 | favicon.ico | Tab màn hình mật độ cao, taskbar và shortcut Windows. 48 gộp cùng vì lý do đó. |
| 180 × 180 | apple-touch-icon.png | Ô màn hình chính iOS khi lưu trang. Phải đục. |
| 192 × 192 | android-chrome-192x192.png | Màn hình chính Android và biểu tượng nhỏ trong manifest ứng dụng web. |
| 512 × 512 | android-chrome-512x512.png | Màn khởi động ứng dụng đã cài và biểu tượng manifest lớn cần cho lời mời cài. |
Phần .ico định dạng chứa giúp danh sách này ngắn: nó chứa nhiều ảnh trong một tệp, nên 16, 32 và 48 đi cùng nhau và trình duyệt chọn ảnh cần dùng. Đó là lý do chỉ một favicon.ico ở thư mục gốc bao phủ mọi trường hợp tab mà không cần thẻ thêm. PNG 16 và 32 riêng chỉ cần cho trình duyệt cũ bỏ qua ICO, đó là mục đích của bộ cũ.
Hai bộ tệp nơi khác cố ý không có. Windows Metro tiles — browserconfig.xml và mstile-*.png ảnh — thuộc màn hình Start của Windows 8 và tính năng ghim trang đi kèm; Edge đã ngừng đọc chúng nhiều năm trước. Favicon Touch Bar của MacBook cũng biến mất cùng phần cứng. Tạo một trong hai loại ngày nay chỉ thêm tệp không ai yêu cầu và thẻ không ai phân tích, chính là sự lộn xộn mà bộ Tối thiểu muốn tránh.
Vì sao logo của bạn có thể không phù hợp ở 16px
Biểu tượng 16 × 16 có tổng cộng 256 pixel. Logo chữ đọc rõ trên danh thiếp không còn đủ không gian để hiển thị ở tỷ lệ đó, và phản xạ thông thường là làm chữ lớn hơn cũng không giúp ích, vì giới hạn không phải cỡ chữ. Đó là mật độ nét: bạn yêu cầu trình kết xuất đưa bao nhiêu nét và khoảng cách riêng biệt vào mười sáu pixel. Mỗi nét cần ít nhất một pixel, khoảng trống cạnh nó cũng cần một, nên bất cứ thứ gì có hơn một vài chi tiết trên mỗi cạnh đều biến thành màu xám.
Thứ còn rõ là một hình đơn với một hoặc hai màu và khoảng trống bên trong rộng rãi: một chữ cái thay vì một từ, hình bóng thay vì đường viền, hình khối đặc thay vì nét mảnh. Chuyển sắc tinh tế bị phẳng đi, nét cực mảnh biến mất hoặc bị răng cưa thành đường chấm, và chi tiết sát mép là thứ mất đầu tiên. Hãy vẽ một phiên bản đơn giản hóa của biểu trưng để dùng làm biểu tượng và kiểm tra trong bản xem trước phía trên — so sánh ô vuông 16 px với ô 180 px thường khiến lựa chọn trở nên rõ ràng. Nếu biểu trưng không đọc được trong ô đầu tiên, nó cũng không đọc được trên tab, và không thiết lập xuất nào cứu được nó.
Thanh cỡ ảnh cũng thuộc đánh đổi đó. Đệm quanh dấu chạm mép đẹp hơn ở 180 px, nhưng ở 16 px mỗi phần trăm lề lấy từ 256 pixel để vẽ; xuống 80% thì chỉ khoảng 164. Dùng khi dấu thật sự chạm khung, kiểm tra ô 16 px sau, đừng tin bản lớn.
Câu hỏi
Ảnh có tải máy chủ không?
Không. Trình duyệt giải mã ảnh, vẽ canvas, mã hóa PNG bằng Canvas API. ICO ghép từ PNG bằng JavaScript. Trang tĩnh không endpoint tải hoặc tài khoản; tải trang rồi ngắt mạng vẫn tạo.
Vì sao apple-touch-icon không trong suốt?
iOS không giữ độ trong suốt trong biểu tượng màn hình chính: nó ghép mọi alpha lên nền đen, nên logo trong suốt thành ô tối. Trình tạo lấp toàn bộ canvas 180 × 180 bằng màu bạn chọn trước khi vẽ — kể cả góc, ngay cả khi đặt bán kính góc, vì iOS áp dụng mặt nạ riêng. Các tệp khác theo điều khiển Nền và giữ alpha khi đặt Trong suốt, vì tab và trình khởi chạy Android xử lý được.
Bán kính góc tác động thế nào đến màu nền?
Bán kính cắt vuông nên góc biểu tượng bo bị bỏ và trong suốt; màu nền lấp bên trong đường cong, không góc ngoài. Đúng cho tab và launcher Android vẽ trên bề mặt riêng. apple-touch-icon ngoại lệ: tô từ mép tới mép cả góc trước cắt vì iOS áp mặt nạ riêng, bo sẵn gây khe bốn góc.
Tôi còn cần favicon-16x16.png không?
Thường là không. Mọi trình duyệt hiện nay đều đọc các ảnh 16 và 32 px từ favicon.ico, nên các PNG độc lập là bản trùng. Chúng chỉ quan trọng với trình duyệt cũ bỏ qua tệp ICO, và đó chính là phần bộ tương thích cũ bổ sung. Nếu không chắc, bộ tối thiểu là mặc định an toàn hơn: ít tệp hơn và đoạn mã head ngắn gọn.
Còn favicon SVG thì sao?
Nguồn raster không thể thành SVG thực sự. Đồ lại PNG tạo bản xấp xỉ có cạnh khác, không phải đồ họa gốc, nên công cụ này không giả vờ cung cấp chức năng đó. Nếu muốn favicon SVG, xuất từ tệp vector dùng để vẽ logo và thêm cạnh ICO: trình duyệt hỗ trợ dùng SVG, các trình duyệt còn lại dùng phương án dự phòng. Vẫn giữ ICO; SVG chưa được hỗ trợ ở mọi nơi.
Liên quan
Để biết đầy đủ từng kích thước, thẻ head, manifest và bẫy cache khiến favicon đổi trông chưa đổi, đọc hướng dẫn kích thước favicon — hướng dẫn đầy đủ cho công cụ này. Nếu nguồn sai định dạng hoặc cần làm phẳng lên nền trước, Chuyển đổi ảnh xử lý điều đó hàng loạt.