Icon Workshop
Web nhỏ gọn hơn,
tươi sáng hơn.

Một ảnh. Mọi màn hình.

Tạo favicon từ chữ

Biểu tượng nhỏ. Ấn tượng lâu dài.

Tạo favicon từ chữ hoặc chữ cái đầu. Chọn phông và màu, xem ở kích thước nhỏ rồi tải bộ biểu tượng.

PNG ICO PWA

Tạo gói biểu tượng

Biến ảnh thành favicon, biểu tượng ứng dụng và hơn thế nữa.

  1. 1Tải lên
  2. 2Điều chỉnh
  3. 3Tải xuống
Đang chờ một hình ảnh

Đang xử lý…

16 × 16
32 × 32
48 × 48
180 × 180
192 × 192
512 × 512

Điều chỉnh biểu tượng

Tinh chỉnh diện mạo cho từng màn hình.

6%
0%

Xem khi sử dụng thực tế(tải ảnh lên để xem trước biểu tượng)

Thẻ trình duyệt

×
https://example.com

Màn hình chính iOS

Biểu tượng của bạn ở đây

PWA / Android

Biểu tượng của bạn ở đây

Tạo favicon trong 3 bước

Từ một hình ảnh đến một bộ biểu tượng đầy đủ.

1Chữ hoặc chữ cái đầu

Tạo favicon từ chữ hoặc chữ cái đầu. Chọn phông và màu, xem ở kích thước nhỏ rồi tải bộ biểu tượng.

2Điều chỉnh và xem trước

Chọn cách đặt ảnh, nền và khoảng đệm. Kiểm tra kết quả ở kích thước nhỏ.

3Tải xuống và thêm vào trang web của bạn

Xuất gói biểu tượng, tải tệp lên và thêm liên kết biểu tượng vào HTML.

Một logo, sẵn sàng cho mỗi màn hình

Xem nơi các tập tin được tạo được sử dụng.

Favicon trang web

Trang web của tôi×
Ví dụ favicon trang web 16 × 1616 × 16
Ví dụ biểu tượng thẻ trình duyệt 32 × 3232 × 32

Biểu tượng 16 × 16 và 32 × 32 giúp khách nhận diện trang web trong thẻ và dấu trang.

iPhone & iPad

Trang web của tôi
iPhone & iPad · 180 × 180180 × 180

Dùng biểu tượng apple-touch 180 × 180 khi trang web được thêm vào màn hình chính.

PWA & Android

Cài đặt ứng dụng
PWA & Android · 192 × 192192 × 192
PWA & Android · 512 × 512512 × 512

192 × 192 và 512 × 512 là kích thước ảnh phổ biến trong tệp kê khai ứng dụng web.

Gói biểu tượng có những gì?

Một bộ biểu tượng sẵn sàng để sử dụng cho tất cả các nền tảng.

  • favicon.ico16 × 16, 32 × 32, 48 × 48, 256 × 256
  • apple-touch-icon.png180 × 180
  • icon-192.png192 × 192
  • icon-512.png512 × 512
  • site.webmanifestTệp kê khai ứng dụng web

Thêm biểu tượng vào trang web của bạn

Đặt các liên kết này trong HTML <head> của bạn.

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Tạo favicon từ chữ

Tạo favicon từ chữ hoặc chữ cái đầu. Chọn phông và màu, xem ở kích thước nhỏ rồi tải bộ biểu tượng.

Chọn cách đặt ảnh, nền và khoảng đệm. Kiểm tra kết quả ở kích thước nhỏ.

Xuất gói biểu tượng, tải tệp lên và thêm liên kết biểu tượng vào HTML.

Bắt đầu tạo

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

Favicon là gì?

Ảnh nhỏ đại diện cho trang web trong thẻ trình duyệt và dấu trang.

Tôi nên sử dụng định dạng hình ảnh nào?

PNG phù hợp với logo trong suốt. JPG, WebP và SVG an toàn cũng dùng được.

Tôi có thể sử dụng hình ảnh không vuông không?

Có. Chọn 'Vừa khung', 'Cắt ảnh' hoặc 'Kéo giãn' để tạo biểu tượng vuông.

Vì sao có nhiều kích thước biểu tượng?

Trình duyệt và màn hình chính dùng kích thước khác nhau. Biểu tượng nhỏ rõ nét trong thẻ; biểu tượng lớn phù hợp với lối tắt ứng dụng.