Trả lời nhanh
Để tạo favicon, chọn ảnh logo (PNG, JPG, WebP, SVG) hoặc nhập 1–2 chữ cái / emoji, chọn hình vuông, bo góc hay tròn và màu nền, bấm “Tạo bộ favicon” rồi tải ZIP. Bộ gồm favicon.ico (16, 32, 48 px), apple-touch-icon.png 180 px, icon 192 và 512 px, site.webmanifest và đoạn mã HTML để dán vào thẻ <head>.
Favicon là gì?
Favicon là biểu tượng nhỏ hiện trên tab trình duyệt, thanh dấu trang, lịch sử, kết quả tìm kiếm và màn hình chính khi người dùng thêm website vào điện thoại. Mỗi nơi cần một cỡ và định dạng khác nhau; công cụ tạo đủ bộ tệp từ một ảnh hoặc vài chữ cái, ngay trên trình duyệt.
Cách tạo favicon
- 1
Chọn “Ảnh / logo” rồi thả ảnh vào khung (nên dùng ảnh vuông, nền trong suốt, từ 512 px), hoặc chọn “Chữ / emoji” và nhập tối đa 2 ký tự.
- 2
Chọn hình dạng (vuông, bo góc, tròn), màu nền hoặc nền trong suốt, cách đặt ảnh (vừa khung / lấp đầy), lề trong; với chữ thì chọn màu chữ, cỡ chữ, chữ đậm.
- 3
Xem trước trên thanh tab sáng và tối cùng các cỡ sẽ tạo. Nhập tên website và màu chủ đạo cho tệp manifest.
- 4
Bấm “Tạo bộ favicon”, tải ZIP, chép mọi tệp vào thư mục gốc của website rồi dán đoạn mã vào thẻ <head>.
Các tệp trong bộ favicon
| Tệp | Cỡ | Dùng ở đâu |
|---|---|---|
| favicon.ico | 16, 32, 48 px trong một tệp | Tab trình duyệt, dấu trang; trình duyệt tự tìm /favicon.ico kể cả khi không khai báo |
| favicon.svg | Vector (khi tạo từ chữ hoặc logo SVG) | Trình duyệt hỗ trợ SVG ưu tiên dùng, nét ở mọi cỡ |
| apple-touch-icon.png | 180 × 180 px, có nền | Biểu tượng khi thêm website vào màn hình chính iPhone, iPad |
| icon-192.png | 192 × 192 px | Biểu tượng ứng dụng web trên Android (khai trong manifest) |
| icon-512.png | 512 × 512 px | Màn hình khởi động và cửa hàng ứng dụng web (khai trong manifest) |
| site.webmanifest | Tệp JSON | Tên website, màu chủ đạo, danh sách icon cho ứng dụng web |
Đoạn mã HTML
| Thẻ | Ý nghĩa |
|---|---|
| <link rel="icon" href="/favicon.ico" sizes="48x48"> | Favicon chính cho mọi trình duyệt |
| <link rel="icon" href="/favicon.svg" type="image/svg+xml"> | Bản vector (chỉ có khi bộ có favicon.svg) |
| <link rel="apple-touch-icon" href="/apple-touch-icon.png"> | Biểu tượng màn hình chính iOS |
| <link rel="manifest" href="/site.webmanifest"> | Khai báo ứng dụng web |
| <meta name="theme-color" content="…"> | Màu thanh địa chỉ trên một số trình duyệt di động |
Ví dụ thực tế
Website công ty đã có logo
Thả logo SVG hoặc PNG 512 px, chọn “Vừa khung”, lề 10%, nền trong suốt. Logo dài nên dùng riêng biểu tượng (không kèm chữ) để còn đọc được ở 16 px.
Blog cá nhân chưa có logo
Chọn “Chữ / emoji”, nhập chữ cái đầu tên, nền màu thương hiệu, hình bo góc, chữ đậm. Có ngay favicon gọn và bản SVG nét.
Trang sự kiện cần làm nhanh
Nhập một emoji như 🎉, nền trong suốt. Lưu ý emoji hiện theo phông của máy người xem trong bản SVG.
Lỗi thường gặp và cách xử lý
- Đã chép tệp mà tab vẫn hiện favicon cũ.
- Trình duyệt giữ favicon trong bộ nhớ đệm rất lâu. Mở trang ở cửa sổ ẩn danh hoặc tải lại mạnh (Ctrl + F5) để kiểm tra.
- Favicon mờ, không nhận ra ở cỡ 16 px.
- Dùng biểu tượng đơn giản, ít chi tiết, bỏ phần chữ dài của logo, giảm lề trong và chọn “Lấp đầy”.
- Icon trên iPhone có nền đen.
- iOS không hiện nền trong suốt cho apple-touch-icon. Công cụ luôn tô nền cho tệp này (màu nền đã chọn, hoặc trắng nếu chọn trong suốt).
- Website đặt trong thư mục con, không phải thư mục gốc.
- Sửa đường dẫn trong đoạn mã và trong site.webmanifest cho khớp, ví dụ “/blog/favicon.ico”.
Vì sao vẫn cần favicon.ico?
Định dạng ICO chứa nhiều cỡ ảnh trong một tệp, và trình duyệt tự tìm /favicon.ico ở thư mục gốc kể cả khi trang không khai báo. Công cụ lưu từng cỡ 16, 32, 48 px dưới dạng PNG bên trong ICO, cách được mọi trình duyệt hiện nay hỗ trợ và giữ nền trong suốt.
Biểu tượng 192 và 512 px trong manifest là hai cỡ mà Android và Chrome dùng khi người dùng cài website như ứng dụng. Mọi ảnh được vẽ lại trên trình duyệt của bạn; không có tệp nào tải lên máy chủ.
Thuật ngữ
- Favicon
- Biểu tượng nhỏ đại diện cho website, hiện trên tab, dấu trang và lịch sử trình duyệt.
- ICO
- Định dạng biểu tượng của Windows, chứa nhiều cỡ ảnh trong một tệp.
- apple-touch-icon
- Biểu tượng iOS dùng khi thêm website vào màn hình chính.
- Web app manifest
- Tệp JSON mô tả tên, màu và biểu tượng để cài website như một ứng dụng.
Câu hỏi thường gặp
Ảnh có bị tải lên máy chủ không?
Không. Ảnh được đọc và vẽ lại thành các cỡ ngay trên trình duyệt của bạn.
Nên dùng ảnh cỡ nào?
Ảnh vuông từ 512 × 512 px, hoặc tệp SVG. Ảnh nhỏ hơn vẫn dùng được nhưng icon 512 px sẽ mờ.
Có tạo favicon từ chữ được không?
Được. Chọn “Chữ / emoji”, nhập tối đa 2 ký tự; bộ tệp có thêm favicon.svg sắc nét ở mọi cỡ.
Đặt tệp ở đâu trên website?
Chép mọi tệp vào thư mục gốc (cùng chỗ với trang chủ), rồi dán đoạn mã vào thẻ <head> của mọi trang hoặc của mẫu giao diện chung.
WordPress có cần làm vậy không?
WordPress có mục Biểu tượng trang web (Site Icon) trong phần Tuỳ biến; tải icon-512.png lên đó là đủ, WordPress tự tạo các cỡ.
Có tạo favicon nền trong suốt được không?
Được, trừ apple-touch-icon luôn cần nền vì iOS hiện nền trong suốt thành màu đen.
Đánh giá và bình luận
Đang tải…