Favicon Generator Online

Turn a PNG, JPEG or SVG logo, or a letter, into a full favicon set: favicon.ico, PNG and maskable icons, apple-touch-icon, site.webmanifest and HTML.

Result

Press “Run” to see the result.

Send a logo as an image (PNG, JPEG or SVG via multipart file, raw body, file_base64 or url), as SVG markup in svg, or just text (1–3 characters, e.g. your initial) with background, color and shape (square, rounded, circle) to draw a letter icon. You get the files a website needs today: favicon.ico with 16, 32 and 48 px images (32-bit BMP inside, read by every browser and Windows), favicon-96x96.png, favicon.svg when the source is vector (sanitised and optimised), apple-touch-icon.png 180 px on an opaque background, android-chrome-192x192.png and -512x512.png, a maskable-icon-512x512.png with the logo inside the 80% safe zone, site.webmanifest, and the <link> / <meta> tags to paste into <head>.

Non-square images are centred (fit=contain) or centre-cropped (fit=cover); padding (percent) adds a margin. SVG sources are drawn at every size by our renderer, so small icons stay sharp. name, short_name, theme_color, background_color, display and the URL path of the files go into the manifest and the HTML.

The JSON response holds every file as a data URI; format=zip returns a ZIP with all files and favicon-snippet.html. Nothing is stored.

Use this in your code

curl -X POST "https://apibox.io.vn/v1/favicon" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"text":"A","background":"#2563eb","name":"APIBox Demo","short_name":"Demo","theme_color":"#2563eb"}'

const res = await fetch('https://apibox.io.vn/v1/favicon', {
  method: 'POST',
  headers: {
    Authorization: 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    "text": "A",
    "background": "#2563eb",
    "name": "APIBox Demo",
    "short_name": "Demo",
    "theme_color": "#2563eb"
  }),
});
const data = await res.json();
console.log(data);

import requests

res = requests.post(
    "https://apibox.io.vn/v1/favicon",
    headers={"Authorization": "Bearer YOUR_API_KEY"},
    json={"text": "A", "background": "#2563eb", "name": "APIBox Demo", "short_name": "Demo", "theme_color": "#2563eb"},
    timeout=30,
)
print(res.json())

<?php
$ch = curl_init('https://apibox.io.vn/v1/favicon');
curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_CUSTOMREQUEST => 'POST',
    CURLOPT_HTTPHEADER => ['Authorization: Bearer YOUR_API_KEY', 'Content-Type: application/json'],
    CURLOPT_POSTFIELDS => '{"text":"A","background":"#2563eb","name":"APIBox Demo","short_name":"Demo","theme_color":"#2563eb"}',
]);
$response = curl_exec($ch);
print_r(json_decode($response, true));

API documentation → Get a free API key

FAQ

Which files do I really need?

favicon.ico at the site root, the SVG or 96 px PNG for modern browsers, apple-touch-icon.png for iOS and the manifest with 192 / 512 px icons for Android and PWAs. The returned HTML references all of them.

What size should the source be?

A square SVG is best. For PNG / JPEG use at least 512×512 px; smaller sources work but the large icons will look soft, and a warning is returned.

What is the maskable icon?

Android crops app icons to a circle or squircle. The maskable icon keeps the logo within the central 80% on a solid background so nothing important is cut off.