This page was machine-translated. Spotted a mistake?Help improve it.
Skip to content

Trình tạo Favicon

Tạo một bộ đầy đủ các tệp favicon và icon ứng dụng từ một ảnh nguồn. Tạo ra tất cả các kích thước tiêu chuẩn cần thiết cho trình duyệt, thiết bị Apple và Android, cùng với một web manifest và một đoạn HTML.

Điểm cuối API

POST /api/v1/tools/image/favicon

Chấp nhận dữ liệu biểu mẫu multipart với một hoặc nhiều tệp ảnh và một trường JSON settings tùy chọn.

Tham số

Tham sốKiểuBắt buộcMặc địnhMô tả
backgroundstringKhông-Màu nền dạng hex (ví dụ "#ffffff"). Khi được đặt, icon sẽ được làm phẳng lên màu này.
paddingintegerKhông0Phần trăm khoảng đệm quanh nội dung icon (0 đến 40)
radiusintegerKhông0Phần trăm bán kính bo góc cho icon bo tròn (0 đến 50)
sizesinteger[]Không-Giới hạn đầu ra ở các kích thước pixel cụ thể (ví dụ [16, 32, 180]). Bỏ qua để tạo tất cả các kích thước tiêu chuẩn.
themeColorstringKhông"#ffffff"Màu chủ đề dạng hex cho web manifest

Các tệp được tạo

Với mỗi ảnh đầu vào, các tệp sau được tạo ra:

TệpKích thướcMục đích
favicon-16x16.png16x16Icon tab trình duyệt
favicon-32x32.png32x32Icon tab trình duyệt (HiDPI)
favicon-48x48.png48x48Lối tắt trên màn hình nền
apple-touch-icon.png180x180Màn hình chính iOS
android-chrome-192x192.png192x192Màn hình chính Android
android-chrome-512x512.png512x512Màn hình chờ Android
favicon.ico32x32Định dạng ICO cũ
manifest.json-Web app manifest có tham chiếu icon
favicon-snippet.html-Các thẻ link HTML sẵn sàng dùng

Ví dụ yêu cầu

Một ảnh nguồn đơn với góc bo tròn và khoảng đệm:

bash
curl -X POST http://localhost:1349/api/v1/tools/image/favicon \
  -H "Authorization: Bearer si_your-api-key" \
  -F "[email protected]" \
  -F 'settings={"padding": 10, "radius": 20, "themeColor": "#0a0a0a"}'

Nhiều ảnh nguồn (mỗi ảnh có bộ riêng trong một thư mục con):

bash
curl -X POST http://localhost:1349/api/v1/tools/image/favicon \
  -H "Authorization: Bearer si_your-api-key" \
  -F "[email protected]" \
  -F "[email protected]"

Ví dụ phản hồi

Phản hồi là một tệp ZIP được truyền trực tiếp. Các header của phản hồi là:

Content-Type: application/zip
Content-Disposition: attachment; filename="favicons-a1b2c3d4.zip"

Đoạn HTML đi kèm

Tệp ZIP bao gồm một tệp favicon-snippet.html mà bạn có thể dán vào <head> HTML của mình:

html
<!-- Favicons -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

Ghi chú

  • Ảnh nguồn được thay đổi kích thước bằng chế độ fit cover, nghĩa là chúng bị cắt để lấp đầy mỗi kích thước vuông. Để có kết quả tốt nhất, hãy dùng ảnh nguồn hình vuông.
  • Khi nhiều tệp được tải lên, mỗi tệp có thư mục con riêng trong ZIP (đặt tên theo tệp nguồn).
  • Với việc tải lên một tệp đơn, tất cả đầu ra nằm ở gốc của ZIP mà không có thư mục con.
  • Các tệp không vượt qua bước xác thực hoặc giải mã sẽ bị bỏ qua, và một skipped-files.txt được thêm vào ZIP để giải thích các vấn đề.
  • Các định dạng đầu vào được hỗ trợ: JPEG, PNG, WebP, AVIF, TIFF, GIF, HEIC, SVG, RAW, PSD và nhiều định dạng khác.
  • Hướng EXIF được áp dụng tự động trước khi thay đổi kích thước.