Trình tạo apple-touch-icon

Tạo apple-touch-icon 180×180 mà iOS dùng cho dấu trang trên màn hình chính — cùng trọn bộ favicon — cục bộ trong trình duyệt của bạn. Không có gì được tải lên.

Quyền riêng tư là trên hết: mỗi hình ảnh được xử lý cục bộ trong trình duyệt của bạn. Không có gì được tải lên, lưu trữ hay truyền đến bất kỳ máy chủ nào.

Biểu tượng iOS đặt lên màn hình chính

Khi ai đó thêm trang của bạn vào màn hình chính iPhone hay iPad, iOS tìm một apple-touch-icon 180×180; không có nó, hệ thống lùi về một ảnh chụp màn hình mờ nhòe. Trình tạo này kết xuất đúng kích thước đó từ ảnh của bạn — với nền đơn sắc, vì apple-touch-icon không nên trong suốt — và đưa nó vào bản tải xuống cùng favicon.ico và các biểu tượng Android.

Một lần xuất, mọi nền tảng

Thay vì cắt tay từng tệp riêng cho mỗi thiết bị, hãy tạo trọn bộ cùng lúc: apple-touch-icon cho iOS, ảnh PNG 192 và 512px cho Android và PWA, và favicon.ico cho trình duyệt máy tính, kèm một đoạn mã HTML để tham chiếu chúng. Tất cả chạy trong trình duyệt của bạn, nên tác phẩm thương hiệu không bao giờ rời khỏi thiết bị.

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

Ảnh của tôi có bị tải lên để tạo favicon không?
Không. Tệp favicon.ico, các biểu tượng PNG và tệp manifest đều được tạo cục bộ trong trình duyệt bằng Canvas API. Ảnh của bạn không bao giờ rời khỏi thiết bị.
Tôi nhận được những kích thước và tệp nào?
Một tệp favicon.ico đa độ phân giải (16, 32 và 48px), các biểu tượng PNG ở 16, 32, 48, 180 (apple-touch-icon), 192 và 512px, một tệp site.webmanifest, cùng một đoạn HTML để dán vào <head> của bạn.
Tôi có thể chuyển PNG hoặc SVG sang ICO không?
Có. Thả vào một tệp PNG, JPG, SVG hoặc WebP và tải xuống một tệp favicon.ico thực thụ. Logo SVG được raster hóa cục bộ ở độ phân giải cao trước.
Ảnh nào cho kết quả tốt nhất?
Một ảnh vuông với logo đơn giản, tương phản cao. Ảnh không vuông sẽ được cắt theo tâm cho vừa; hãy dùng các tùy chọn khoảng đệm và hình dạng để căn khung theo ý bạn.
Tôi cài đặt favicon như thế nào?
Giải nén gói vào thư mục gốc của trang web và dán đoạn HTML được cung cấp vào <head> của các trang. Tệp favicon.ico được hầu hết trình duyệt tự động nhận ra.