OpenTools

Bộ tạo favicon — favicon.ico·bộ icon ứng dụng

Tạo icon hiển thị trên tab trình duyệt, màn hình chính điện thoại, kết quả tìm kiếm theo mọi kích thước và tải về trong một file ZIP.

File không được gửi lên máy chủ — chỉ xử lý trong trình duyệt của thiết bị này

Độ đậm
Hình dạng
Thông tin ứng dụng (site.webmanifest)
Trang của tôi
Tab mới
16
32
48
180 · iPhone
192 · Android
512
Mã HTML để dán vào trong <head> 
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<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" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#3182f6">

Áp dụng khi các file trong ZIP được tải lên đường dẫn gốc (/) của trang web. Mã tương tự cũng có trong head.html.

Quảng cáo

Cách dùng Tạo favicon

  1. 1Tải ảnh lên hoặc chọn chữ·emoji và màu sắc.
  2. 2Dùng bản xem trước để kiểm tra hình dạng theo từng kích thước.
  3. 3Nhấn [Tải ZIP], sau đó dán đoạn mã HTML được hướng dẫn vào <head>.

Câu hỏi thường gặp

Ảnh gốc như thế nào là tốt?

Tốt nhất là PNG·SVG hình vuông từ 512×512 trở lên. Ở kích thước nhỏ, hình dạng đơn giản sẽ hiển thị rõ hơn.

Chỉ cần một file favicon.ico thôi không được sao?

Đủ dùng cho trình duyệt cũ, nhưng với màn hình chính iPhone (180px) và Android (192·512px) cần có PNG riêng.

Quảng cáo