Cách tạo favicon.

Mở Favicon / ICO Generator và chọn Image. Tải lên PNG, JPG, JPEG, WebP hoặc GIF, hoặc chọn Try a sample. Ví dụ đã thực hiện sử dụng favicon-orbit.png, một dấu quỹ đạo màu tím 512 × 512 pixel với các góc trong suốt. Đầu vào là 202,491 byte.

Đối với thương hiệu chưa có logo hoàn chỉnh, hãy chọn Text trên trang công cụ. Nhập một hoặc hai chữ cái và chọn Continue. Trình chỉnh sửa cung cấp các phông chữ Modern sans, Classic serif và Monospace, cộng với màu văn bản và nền riêng biệt. Chấp nhận tối đa ba ký tự, nhưng các ký tự bổ sung có thể trở nên khó nhận biết ở kích thước nhỏ.

Giữ lại tác phẩm nghệ thuật gốc. Trình tạo tạo ra các tệp biểu tượng mới và không ghi đè lên nguồn. Đầu vào GIF trở thành biểu tượng tĩnh thay vì favicon động.

Đối với chữ lồng, menu Font bắt đầu với ba kiểu đi kèm. Chọn Use system fonts trên trình duyệt máy tính để bàn được hỗ trợ và cho phép truy cập để thêm các phông chữ đã cài đặt trên thiết bị của bạn. Sử dụng các dấu ngoặc nhọn trước và sau để so sánh các phông chữ liền kề, hoặc chọn một họ phông chữ và kiểm tra bản xem trước trực tiếp, đặc biệt là ở 16 pixel. Phông chữ vẫn nằm trên thiết bị của bạn; các kiểu đi kèm hoạt động mà không cần quyền.

Trình chỉnh sửa hiển thị các tab trình duyệt sáng và tối cùng với các bản xem trước ở các kích thước biểu tượng phổ biến. Kiểm tra ví dụ 16 pixel trước; đây là bài kiểm tra nghiêm ngặt nhất về việc liệu dấu ấn có còn dễ nhận biết hay không. Bản xem trước Apple Touch đại diện cho bản xuất 180 pixel và được hiển thị nhỏ hơn trong không gian làm việc.

Trên điện thoại, mở Settings. Để Create from được đặt thành Uploaded image và Image fit được đặt thành Show the whole image. Đối với mẫu này, đặt Space around content thành 0 và bật Transparent background. Nguồn đã chứa hình dạng màu tím tròn và lề rõ ràng của riêng nó, vì vậy nó không cần thêm nền màu.

Với nguồn khác, Show the whole image giữ lại các cạnh của nó, trong khi Fill the icon có thể cắt chúng. Rounded square, Square và Circle xác định hình dạng bên ngoài. Transparent background bảo toàn các vùng rõ ràng nhưng không thể xóa nền mờ đục đã được vẽ vào ảnh. Xem lại bản xem trước nhỏ nhất sau mỗi lần thay đổi khung hình.

Trong phần Tải xuống, hãy chọn Gói biểu tượng trang web (ZIP) cho ví dụ này. Để Tên trang web là My website cho bản mẫu, hoặc thay thế bằng tên thương hiệu thực tế cho dự án của riêng bạn. Tên này được sử dụng trong site.webmanifest; nó không được thêm dưới dạng văn bản đè lên hình ảnh.

Chọn Bắt đầu. Trình duyệt tạo ra một favicon.ico bảy khung hình với các hình ảnh vuông ở kích thước 16, 24, 32, 48, 64, 128 và 256 pixel. Nó cũng tạo ra các biểu tượng PNG ở kích thước 16, 32, 48, 180, 192 và 512 pixel, một tệp manifest và hướng dẫn cài đặt. Kết quả là một tệp ZIP thay vì một nút tải xuống riêng biệt cho mỗi biểu tượng.

Nếu bạn chỉ cần một favicon.ico cổ điển, hãy chọn Multi-size ICO thay thế. Điều này hữu ích khi nền tảng trang web chấp nhận tải lên ICO và không cần một gói riêng biệt.

Tải xuống sẽ lưu website-icons.zip. Ví dụ thực tế đã làm chứa chín tệp và có dung lượng 304,351 byte. So sánh ở trên cho thấy nguồn 512 pixel bên cạnh khung hình 256 pixel thực tế được trích xuất từ ICO đã xuất, thay vì ảnh chụp màn hình trình duyệt mô phỏng.

Giải nén tệp ZIP, tải các tệp biểu tượng lên thư mục gốc trang web của bạn và đọc INSTALL.txt. Nó bao gồm các thẻ liên kết HTML cho ICO, biểu tượng PNG, biểu tượng Apple Touch và web manifest. Nếu bạn đặt các tệp trong một thư mục con, hãy cập nhật cả đường dẫn HTML và đường dẫn biểu tượng bên trong site.webmanifest.

Kiểm tra trang web của bạn trong một tab trình duyệt mới và trên các thiết bị bạn quan tâm. Trình duyệt có thể lưu bộ nhớ đệm favicon, vì vậy một biểu tượng cũ không chứng minh ngay lập tức rằng việc cài đặt đã thất bại. Hãy giữ hình ảnh nguồn và gói đã tải xuống trước khi làm mới trình chỉnh sửa, vì làm mới sẽ quay lại trang công cụ chính.