Trình tạo favicon từ chữ cái và emoji
Tạo favicon đơn giản, dễ nhận biết mà không cần chuẩn bị hình ảnh. Nhập một hoặc hai chữ cái hay chọn một emoji, sau đó chỉnh hình dạng và màu nền. Với thiết kế dạng chữ, bạn còn có thể chọn màu ký tự và kiểu chữ; emoji giữ nguyên diện mạo gốc của trình duyệt. Bản xem trước 512 px cập nhật ngay trong trình duyệt. Gói tải xuống gồm biểu tượng nhỏ cho trình duyệt, biểu tượng di động và các tệp cấu hình cần thiết để thêm thiết kế vào trang web. Không có dữ liệu nào được tải lên và công cụ không dùng AI.
Cách tạo favicon
-
1
Chọn nội dung biểu tượng
Nhập một hoặc hai chữ cái để tạo dấu chữ gọn gàng, hoặc dùng một emoji làm thiết kế.
-
2
Tạo kiểu cho thiết kế
Chọn hình vuông, vuông bo góc hoặc hình tròn và đặt nền. Với chữ, hãy chọn thêm màu ký tự và kiểu chữ; emoji giữ nguyên diện mạo gốc.
-
3
Kiểm tra bản xem trước
Xem bản 512 px và cân nhắc liệu thiết kế còn rõ khi thu nhỏ thành biểu tượng tab 16 px hay không.
-
4
Tải xuống và cài đặt
Tải bộ favicon được tạo cục bộ, thêm các tệp vào trang web và dán hoặc điều chỉnh đoạn mã head đi kèm.
Các tệp có trong bộ favicon
Một thiết kế favicon phải phù hợp ở nhiều nơi, từ tab trình duyệt rất nhỏ đến màn hình chính của điện thoại. Trình tạo kết xuất cùng một thiết kế ở các kích thước thực tế dưới đây và đóng gói tệp ngay trong trình duyệt.
| Tệp | Kích thước hoặc nội dung | Công dụng chính |
|---|---|---|
favicon.ico |
Khung 16, 32 và 48 px | Tab trình duyệt, dấu trang và phần mềm vẫn yêu cầu tệp ICO |
favicon-16x16.png |
16 × 16 px | Favicon nhỏ cho trình duyệt |
favicon-32x32.png |
32 × 32 px | Favicon tiêu chuẩn cho trình duyệt |
apple-touch-icon.png |
180 × 180 px | Biểu tượng cảm ứng Apple |
android-chrome-192x192.png |
192 × 192 px | Biểu tượng ứng dụng web Android cỡ nhỏ |
android-chrome-512x512.png |
512 × 512 px | Biểu tượng ứng dụng web cỡ lớn |
mstile-150x150.png |
150 × 150 px | Hình ô Microsoft |
site.webmanifest |
Manifest JSON | Tham chiếu biểu tượng Android cho trình duyệt dùng manifest ứng dụng web |
browserconfig.xml |
Cấu hình XML | Tham chiếu hình và màu ô Microsoft |
favicon-head.html |
Đoạn mã HTML | Các tham chiếu biểu tượng, manifest và cấu hình trình duyệt sẵn để sao chép |
Tạo favicon vẫn rõ ở 16 px
Favicon không phải là áp phích thu nhỏ. Chi tiết mảnh, từ dài và chênh lệch màu nhẹ sẽ nhanh chóng biến mất ở kích thước tab trình duyệt. Một chữ cái đậm, dấu hai chữ ngắn hoặc emoji đơn giản thường dễ nhận ra hơn bố cục phức tạp.
- Tạo độ tương phản mạnh giữa màu chữ và màu nền.
- Chừa khoảng trống quanh chữ hoặc emoji để mặt nạ của nền tảng không làm thiết kế chật chội.
- So sánh hình vuông, vuông bo góc và hình tròn để chọn đường nét rõ nhất.
- Kiểm tra cả biểu tượng nhỏ đã xuất, không chỉ bản xem trước 512 px. Thiết kế đẹp ở kích thước lớn có thể khó nhìn ở 16 px.
- Thử favicon đã cài trên nhiều trình duyệt, với cả giao diện trình duyệt sáng và tối.
Thêm tệp đã tạo vào trang web
Giữ nguyên tên tệp và đặt chúng ở vị trí mà đoạn mã head đi kèm tham chiếu tới, thường là thư mục gốc của trang. Dán đoạn mã vào <head> của từng mẫu trang. Nếu hệ thống cung cấp tài nguyên tĩnh từ thư mục khác hoặc CDN, hãy sửa đường dẫn trong đoạn mã, manifest và cấu hình trình duyệt trước khi triển khai.
Các tệp đi kèm cung cấp tham chiếu biểu tượng nhưng không tự biến trang web thành ứng dụng web tiến bộ có thể cài đặt. Việc cài đặt có thể cần thêm trường manifest, dịch vụ lưu trữ an toàn và các tiêu chí riêng của trình duyệt.
Câu hỏi thường gặp
Có. Nhập một hoặc hai chữ cái, rồi chọn hình dạng, màu nền, màu chữ và kiểu chữ. Văn bản được giới hạn ngắn để dễ đọc hơn ở kích thước favicon nhỏ.
Có. Chọn một emoji, rồi đặt hình dạng bao quanh và màu nền. Emoji giữ nguyên diện mạo gốc của trình duyệt nên có thể trông khác nhau giữa các hệ điều hành và trình duyệt. Hãy kiểm tra bản xem trước trước khi tải xuống. Emoji phức tạp có thể không dùng được ở mọi nơi.
Có. Gói gồm một favicon.ico chứa khung 16, 32 và 48 px, các favicon PNG 16 và 32 px riêng, cùng biểu tượng lớn hơn cho Apple, Android và Microsoft.
Trình tạo Favicon tạo thiết kế mới từ chữ cái, đoạn chữ ngắn hoặc một emoji. Trình chuyển đổi Favicon là công cụ riêng để biến ảnh PNG, JPEG hoặc WebP có sẵn thành tệp favicon.
Không. Chữ hoặc emoji, quá trình kết xuất bản xem trước và tạo gói đều nằm trong trình duyệt. Công cụ không tải thiết kế lên và không truy xuất trang web.
Không. Công cụ chỉ áp dụng lựa chọn của bạn và không dùng AI. Công cụ cũng không thể xác định chữ cái, emoji, màu sắc hoặc thiết kế cuối có xung đột với nhãn hiệu hay quyền của người khác hay không. Hãy kiểm tra các quyền đó trước khi sử dụng favicon cho mục đích thương mại.
Trình duyệt thường lưu favicon trong bộ nhớ đệm. Hãy xác nhận tệp và tham chiếu trong head đã được triển khai đúng đường dẫn, rồi xóa bộ nhớ đệm hoặc thử trong cửa sổ riêng tư. Công cụ tìm kiếm và một số nền tảng cập nhật biểu tượng theo lịch riêng.
Công cụ liên quan
Trình đổi kích thước ảnh
Đổi kích thước ảnh theo số pixel chính xác hoặc theo phần trăm mà vẫn giữ tỷ lệ khung hình. Phù hợp để chuẩn bị nhiều ảnh, không cần tải lên.
Chuyển WebP sang JPG
Chuyển ảnh WebP sang JPG/JPEG trực tiếp trong trình duyệt. Chọn chất lượng, ghép vùng trong suốt vào màu nền và tải xuống mà không cần tải tệp lên.
Nén GIF
Giảm kích thước GIF động trong trình duyệt bằng cách thu nhỏ kích thước, giữ ít khung hình hơn và chỉnh chất lượng mã hóa. Xem trước vòng lặp trước khi tải xuống.
Trình thay đổi kích thước ảnh hàng loạt
Kéo thả nhiều ảnh, căn vừa hoặc kéo giãn theo kích thước mục tiêu, rồi xuất JPG, PNG hoặc WebP trong một file ZIP. Mọi xử lý ở lại trong trình duyệt.
Trình tạo mã vạch
Tạo mã vạch 1D quét được ở Code 128, Code 39, EAN-13, UPC-A, ITF-14 và Codabar. Xuất PNG, SVG hoặc PDF để in.
Trình tạo GIF
Chuyển chuỗi ảnh hoặc video ngắn thành GIF động. Điều chỉnh tốc độ khung hình, số vòng lặp và kích thước trước khi xuất.