Tạo favicon

Công cụ này làm gì

Công cụ tạo favicon biến một chữ cái, một emoji hoặc logo của bạn thành mọi biểu tượng mà một website hiện đại cần. Nó vẽ biểu tượng ở từng kích thước, đóng gói favicon.ico, viết web app manifest, và đưa cho bạn các thẻ <link> để dán vào <head> của trang. Tải tất cả xuống trong một tệp ZIP.

Bắt đầu từ chữ là cách nhanh nhất để có một biểu tượng gọn gàng: gõ một đến ba ký tự hoặc một emoji, chọn màu, phông chữ và hình dạng (vuông, bo góc hoặc tròn). Biểu tượng từ chữ còn có thêm favicon.svg co giãn được, luôn sắc nét ở mọi kích thước và trên màn hình mật độ điểm ảnh cao.

Cách sử dụng

1. Chọn Chữ hoặc Ảnh làm nguồn. Với ảnh, nhấn Chọn ảnh… và chọn một ảnh PNG, SVG hoặc JPG hình vuông.
2. Đặt Hình dạng, và bật Tô nền để đặt biểu tượng trên một ô màu, hoặc tắt để giữ nền trong suốt.
3. Nhập Tên trang web: đây là nhãn hiển thị dưới biểu tượng khi ai đó thêm trang của bạn vào màn hình chính của điện thoại, được ghi vào site.webmanifest (Android) và thẻ apple-mobile-web-app-title (iOS). Sau đó đặt Thư mục biểu tượng nơi bạn sẽ tải các tệp lên, thường là /.
4. Kiểm tra bản xem trước: biểu tượng 16 px là thứ mọi người thấy trên tab trình duyệt.
5. Nhấn Tải ZIP, tải các tệp lên trang web, và dán HTML vào <head>.

Ví dụ

Cài đặt mặc định tạo ra các thẻ sau:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="apple-mobile-web-app-title" content="My Site">

Mẹo

• Trình duyệt lưu cache favicon rất lâu. Sau khi thay biểu tượng, hãy mở trang trong cửa sổ ẩn danh để thấy thay đổi.
• iOS bỏ qua độ trong suốt của Apple touch icon và tô nó bằng màu đen, vì vậy hãy giữ nền được tô để có biểu tượng màn hình chính gọn gàng.