Cách tạo biểu tượng yêu thích

Favicon hiện đại không chỉ là hình ảnh 16×16. Đây là toàn bộ quy trình làm việc để thiết lập trông sắc nét trên mọi trình duyệt, hệ điều hành và thiết bị.

6 phút đọc

Favicon là gì?

Favicon là biểu tượng nhỏ mà trình duyệt hiển thị trong tab, thanh dấu trang và danh sách lịch sử. Trên thiết bị di động, đó là biểu tượng màn hình chính. Trên Windows đó là biểu tượng phím tắt.

Các trang web hiện đại cung cấp nhiều độ phân giải và định dạng để mọi bề mặt đều có được kết xuất sắc nét.

Chuẩn bị hình ảnh nguồn của bạn

Bắt đầu từ hình ảnh vuông tối thiểu 512×512 — lý tưởng nhất là SVG với viewBox vuông. Mọi thứ nhỏ hơn sẽ mờ khi thu nhỏ.

Tránh các dòng mỏng và văn bản nhỏ. Chúng biến mất ở kích thước 16×16.

Tạo tệp .ico nhiều kích thước

Gói 16, 32, 48, 64, 128 và 256 bên trong một favicon.ico duy nhất. Trình duyệt tự động chọn kích thước phù hợp.

Trình tạo favicon của chúng tôi thực hiện việc này ở phía máy khách trong chưa đầy một giây.

Thêm thẻ HTML

Thả favicon.ico vào thư mục gốc của trang web của bạn. Sau đó, thêm các biểu tượng SVG, apple-touch-icon và tệp kê khai trong <head> để thiết lập hoàn chỉnh.

Xác minh trong mọi trình duyệt

Làm mới cứng ở Chrome, Safari, Firefox và Edge. Kiểm tra thanh dấu trang, tab và cài đặt màn hình chính.

Thử các công cụ

Đọc tiếp

Khám phá FetchFavicon

Thể loại

Bộ chuyển đổi

Tiện ích

Hướng dẫn

Hướng dẫn