Công cụ của tôi

Tạo Favicon

Thả logo, xem ở mọi kích thước thật, và mang về favicon.ico, bộ PNG và HTML.

PNG / JPEG / WebP / GIF / SVG — hoặc thả một tệp vào thẻ này

Thêm ảnh (hoặc chuyển sang chữ) và mọi kích thước hiện ở đây — không có nút "tạo".favicon.ico 16/32/48 · PNG 16 · 32 · 48 · 180 · 192 · 512 · site.webmanifest · HTML

Cách sử dụng

  1. Chọn một ảnh, hoặc kéo ảnh vào thẻ: mọi kích thước hiện ra ngay. Không có nút tạo — bạn thấy gì thì tải xuống đúng như vậy.
  2. Chưa có logo? Chuyển sang "Chữ / emoji" và nhập một hai ký tự. Bộ chọn màu đặt nền, và chữ chuyển đen hoặc trắng theo độ tương phản.
  3. Tải bộ tệp, giải nén vào thư mục gốc trang web, dán các thẻ <link> đã sao chép vào <head>, rồi tải lại trang — biểu tượng tab sẽ xuất hiện.

Ví dụ

Nguồn

logo.png · 512×512, hình dạng "Bo góc"

Bộ tệp (9 tệp)

favicon.ico (16/32/48)
favicon-16x16.png
favicon-32x32.png
favicon-48x48.png
apple-touch-icon.png (180)
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest
snippet.html

Cùng nguồn với cùng tùy chọn cho PNG và ZIP giống hệt từng byte (dấu thời gian lưu trữ cố định 1980-01-01), nên bộ tệp có thể commit và diff. Đổi hình dạng chỉ cắt góc; không bao giờ vẽ lại tác phẩm.

Phạm vi, giới hạn và câu hỏi thường gặp

  • Không xuất SVG. Một SVG còn rõ ở 16 px cần đường dẫn được đơn giản hóa thủ công; bọc bitmap trong SVG hay vẽ chữ bằng phông hệ thống chỉ trông giống vector. Hãy giữ tệp .svg riêng bên cạnh bộ PNG này nếu cần.
  • Hình ảnh được thu vừa, không bao giờ bị cắt. Logo không vuông giữ lề trong suốt — hãy cắt hoặc bố cục trước (công cụ đổi kích thước / chuyển đổi ảnh ở đây có thể giúp).
  • Biểu tượng trong suốt nhận nền từ nền tảng: iOS vẽ nền phía sau apple-touch-icon, và một số launcher Android cũng vậy. Muốn kiểm soát nền, hãy dùng "Chữ / emoji", hoặc thêm nền vào ảnh nguồn.
  • site.webmanifest chỉ liệt kê biểu tượng — không có name hay short_name. Đó là tên trang của bạn, công cụ này không thể biết; hãy thêm cả hai khóa sau khi giải nén (name là tùy chọn và trình duyệt sẽ dùng tiêu đề trang).
  • favicon.ico chứa 16, 32 và 48 px, không có 64 hay 128. Như vậy đủ cho trình duyệt hiện đại và Windows; hãy thêm kích thước khác dạng PNG nếu cần.
  • GIF / WebP động: chỉ khung đầu được dùng. Favicon vốn không chuyển động.
  • Biểu tượng chữ được vẽ bằng phông hệ thống, nên khác nhau trên macOS, Windows, Linux và điện thoại. PNG đóng băng những gì thiết bị bạn hiển thị — cũng là lý do không có bộ chọn phông.
  • Không tải URL và không kiểm tra trực tiếp: công cụ này không nhận địa chỉ trang web và không xác minh favicon đã triển khai. Sau khi triển khai, hãy mở trang và xem tab.
  • Giới hạn: 20 MB mỗi tệp và 8000 px mỗi cạnh. Nguồn dưới 180 px được phóng to cho biểu tượng lớn và có thể trông mờ.
  • Không cắt, không gỡ nền, không xử lý hàng loạt và không có lịch sử: tải lại là bắt đầu từ trạng thái trống (không lưu gì, không đưa gì vào URL).

Những gì mọi người thường cần tiếp theo khi đã có biểu tượng.

Đổi kích thước ảnh

Chuyển đổi định dạng ảnh