Tạo favicon cho website
Mọi biểu tượng website cần, tạo từ logo của bạn và sẵn sàng tải lên.
Tạo bộ favicon đầy đủ cho website từ logo của bạn: biểu tượng trên tab trình duyệt, biểu tượng màn hình chính trên iPhone và Android, manifest và mã HTML liên kết tới chúng. Tải lên ảnh PNG, JPG, WebP hoặc SVG và tải xuống một tệp ZIP chứa tất cả, không cần tài khoản và không có hình mờ.
Cách tạo favicon
- Chọn logo hoặc biểu tượng dạng PNG, JPG, WebP hoặc SVG; tốt nhất là hình vuông và tối thiểu 512 pixel.
- Chọn hiển thị trọn ảnh hay lấp đầy khung vuông, và màu nền cho biểu tượng Apple.
- Nhấn “Tạo favicon” và tải tệp ZIP xuống.
- Tải các tệp lên thư mục gốc của website, rồi dán mã trong head.html vào thẻ head của các trang.
Gói tải về gồm những gì
| Tệp | Dùng để làm gì |
|---|---|
favicon.ico |
Biểu tượng tab kinh điển, gồm các cỡ 16, 32 và 48 pixel trong một tệp. Trình duyệt vẫn tìm nó dù bạn không liên kết. |
favicon-16x16.png và favicon-32x32.png |
Biểu tượng cho tab và dấu trang trên trình duyệt hiện đại. |
apple-touch-icon.png |
Biểu tượng 180 pixel mà iPhone và iPad dùng khi website được thêm vào màn hình chính. |
android-chrome-192x192.png và android-chrome-512x512.png |
Biểu tượng cho Android và ứng dụng web cài đặt được. |
site.webmanifest |
Manifest khai báo biểu tượng Android và màu của website. |
head.html |
Các thẻ liên kết tới biểu tượng từ các trang của bạn. |
Cách cài lên website
- Giải nén tệp và tải tất cả các tệp, trừ
head.html, lên thư mục gốc của website (nơi đặt trang chủ). - Sao chép các thẻ sau, cũng có trong
head.html, vào thẻheadcủa các trang:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
- Nếu muốn, hãy điền tên website vào
namevàshort_nametrongsite.webmanifest.
Trình duyệt lưu favicon trong bộ nhớ đệm: nếu chưa thấy favicon mới ngay, hãy tải lại hoàn toàn trang hoặc đợi một lúc.
Vừa khít hay lấp đầy
Mọi biểu tượng đều vuông. Nếu ảnh của bạn không vuông, bạn có thể vừa khít để ảnh hiện trọn với lề trong suốt, hoặc để ảnh lấp đầy khung vuông và cắt phần thừa ở hai bên. Với logo nằm ngang có chữ, thường đẹp hơn khi chỉ dùng phần biểu tượng của logo, cắt thành hình vuông.
Biểu tượng Apple không thể trong suốt: iOS sẽ tô nền đen. Vì vậy chúng tôi tạo nó với màu nền bạn chọn, màu này cũng được dùng làm màu website trên Android. Các biểu tượng khác giữ nền trong suốt.
Mẹo để có kết quả đẹp
- Bắt đầu từ ảnh lớn, tối thiểu 512 × 512 pixel, hoặc tốt hơn là SVG: các biểu tượng nhỏ được tính từ ảnh này.
- Giữ đơn giản: ở 16 pixel không đọc được chữ hay thấy chi tiết nhỏ. Một ký hiệu hoặc chữ cái đầu với màu tương phản hiệu quả hơn nhiều.
Nếu chỉ cần tệp .ico, bạn có thể chuyển PNG sang ICO.
Giới hạn
- Mỗi lần một ảnh, tối đa 20 MB và 100 megapixel.
- Chúng tôi không sửa website của bạn: bạn tự tải tệp lên và thêm thẻ, hoặc nhờ người quản lý website làm.
Câu hỏi thường gặp
Ảnh cần lớn bao nhiêu để tạo favicon?
Càng lớn càng tốt: tối thiểu 512 × 512 pixel hoặc SVG. Mọi biểu tượng, từ 512 xuống 16 pixel, đều được tính từ ảnh này.
Tôi tải các tệp favicon lên đâu?
Lên thư mục gốc của website, cùng thư mục với trang chủ. Sau đó dán các thẻ trong head.html vào thẻ head của các trang.
Vì sao tôi không thấy favicon mới trên trình duyệt?
Vì trình duyệt lưu favicon trong bộ nhớ đệm. Hãy tải lại hoàn toàn trang, mở trong cửa sổ ẩn danh, hoặc đợi một lúc để favicon cập nhật.
Vì sao biểu tượng Apple có nền màu?
Vì iOS không hỗ trợ nền trong suốt cho biểu tượng màn hình chính và sẽ tô nền đen. Chúng tôi tạo biểu tượng với màu nền bạn chọn để trông đẹp.
Tôi có tạo favicon cho website WordPress được không?
WordPress có tùy chọn riêng là biểu tượng trang web (Site Icon), trong phần Tùy biến giao diện hoặc phần cài đặt chung tùy phiên bản và giao diện: bạn tải lên một ảnh vuông và các kích thước được tạo tự động. Gói của công cụ này dành cho website mà bạn tải tệp lên và sửa mã được.