日本語English

Icon Generator

From one image (or a letter or emoji), get favicon.ico, apple-touch-icon, Android/PWA icons, a maskable icon and an OGP image, plus the manifest and the <head> code to paste. Check blur at real size first — nothing leaves your browser.

On-device・No upload

Your files and input are processed only inside your browser on this device and are never uploaded to our servers.

1. Source image

Drop a file here

or

Images are processed in this browser and never sent to a server.Accepts: PNG / JPEG / WebP / SVG (detected by content)Up to 50 MB per filePaste (Ctrl+V) also works

How to use

  1. Choose “From an image” and drop a PNG, JPEG, WebP or SVG — or choose “From text or an emoji” and type one or two characters. “Try a sample” gets you started instantly.

  2. Adjust padding, background (transparent or colour), corner radius and how a non-square picture fits (fit whole / crop to centre). Previews update at once.

  3. Look at 16 px and 32 px at actual size and zoomed, the browser tab, the iOS/Android home screen, the maskable safe zone and the social card to catch blur or clipping.

  4. Enter the site name, short name, theme colour, the path where the files will live and the site URL (for OGP); add a title for the social image if you want one (Japanese works).

  5. Turn files on or off, then download the ZIP (icon_pack.zip) or each file on its own.

  6. Paste the HTML from “Code to paste” into your <head> and upload the files to the path you chose.

What it does

The whole set at once

favicon.ico (16, 32 and 48 px in one file), PNG favicons at 16/32/48/96, apple-touch-icon (180 px), android-chrome (192 and 512 px), maskable (512 px), mstile (150 px) with browserconfig.xml, site.webmanifest, og-image.png (1200×630) and the <head> HTML — in one ZIP.

See the blur at real size

16 px and 32 px shown at actual size and magnified, then in a browser tab, on iOS and Android home screens and in a social card. The previews are the very files you download. If a picture loses detail at 16 px you get a warning to use a simpler version.

Maskable safe zone respected

The maskable icon places artwork inside the circle covering 80% of the diameter (a square about 57% wide) and fills the whole background. A dashed-circle guide shows that it survives circular and rounded masks alike.

Quality-first downscaling

Large sources are halved step by step and finished with high-quality smoothing, so thin lines stay clean. SVGs are drawn into a 1024 px master first, then scaled to each size.

Code that matches your selection

The manifest icons and the <head> HTML only reference files that are in the ZIP, and follow your chosen path (for example /icons/) and the absolute URL for OGP.

Japanese-friendly OGP image

The social-image title supports Japanese and emoji, shrinks and wraps automatically (up to 3 lines), and picks white or dark navy text for the background you choose.

Use cases

  • Get the favicon, apple-touch-icon and OGP image a new site needs in one go
  • Rebuild ICO, PNG and SVG favicons and PWA icons from a logo SVG
  • Give a personal site or internal tool a simple one-letter or emoji icon
  • Make sure a PWA icon is not clipped by Android’s circular and rounded masks
  • Create a 1200×630 link-card image with a title for sharing on social apps and chat

Supported formats

Input

PNGJPEGWebPSVG (scripts etc. removed)Text or emoji (1–2 characters)

Output

ICO (PNG-embedded, 16/32/48 px)PNGSVG (SVG input only)site.webmanifest (JSON)browserconfig.xmlHTML snippetZIP (icon_pack.zip)

Capability matrix

FeatureSupportNotes
Favicon set (ICO, PNG, apple-touch-icon, android-chrome, mstile) from an image, SVG, letter or emojiSupported—
Maskable icon (inside the 80% safe-zone circle) with circular and rounded mask previewsSupported—
site.webmanifest, browserconfig.xml and <head> HTML (referencing only the selected files)Supported—
OGP image (1200×630: background colour + icon + optional Japanese title)Supported—
Actual-size and magnified 16/32 px previews; tab, home-screen and social-card previewsSupported—
favicon.svg outputPartialOnly for SVG input. Scripts, event attributes, foreignObject, references that point outside the document (external images, CSS @import / url()) and animation (SMIL and CSS animation) are removed; in-document <use> and gradient references are kept. Padding, background and radius are applied
Emoji text iconsPartialDrawn with your device’s emoji font, so they look different from device to device
Animated input (GIF, APNG, animated WebP), animated ICO or animated SVGNot supportedStill images only. Animated images are rejected and SVG animation is removed
Safari pinned-tab mask-icon (monochrome SVG)Not supportedMaking a one-colour version depends on the artwork, so it is not generated. Prepare a monochrome SVG yourself if you need it
Other ICO sizes such as 256 px, custom PNG sizes, iOS launch images (apple-touch-startup-image)Not supportedOutput sizes are the fixed set above
Input other than PNG/JPEG/WebP/SVG (HEIC, AVIF, GIF, BMP, ICO…)Not supportedConvert to PNG first with the image converter
Rotating, choosing the crop position or retouchingNot supportedCropping is the centre square only; use the crop tool for finer edits

Limits & notes

  • One image at a time, up to 50 MB and 100 megapixels. SVGs up to 5 MB.
  • The picture is placed at up to 512 px in android-chrome (at 0% padding), 180 px in apple-touch-icon, about 290 px in maskable and 300–360 px in the OGP icon, each reduced by the padding. If the source is smaller than that, those files are stretched and look soft (the warning names the files and the size needed).
  • browserconfig.xml points at mstile-150x150.png, so turning mstile off also drops browserconfig.xml.
  • favicon.ico contains three sizes: 16, 32 and 48 px. No other sizes are written.
  • The maskable icon keeps artwork within a square about 57% wide so no mask can cut it. Lowering the padding never makes it larger than that.
  • Windows tiles (mstile) keep at least 15% padding so the logo stays readable on the tile colour.
  • apple-touch-icon, maskable and the OGP image cannot be transparent, so they are filled with the chosen background colour even if the background is set to “Transparent”.
  • Text and emoji icons use fonts installed on your device; no web fonts are loaded.

Privacy & safety

Reading the image, rendering every size, building the ICO and creating the ZIP all happen inside your browser. Your image, the text you type and the site details are never sent to or stored on a server. SVGs are stripped of scripts and external references and then drawn as an image.

FAQ

Which favicon files do I actually need?
At minimum a favicon.ico at the site root plus an apple-touch-icon (180 px) for iOS. Add a favicon.svg (if you have an SVG) for sharp scaling, and for a PWA also site.webmanifest, android-chrome (192 and 512 px) and a maskable icon. That covers today’s main browsers and operating systems. This tool outputs the files and the <head> code together.
What happens if apple-touch-icon is transparent?
iOS may fill transparent areas with black or another colour, which is rarely what you want. So apple-touch-icon is always filled with your chosen background colour. iOS adds the rounded corners itself, so the file stays square.
What is a maskable icon?
An icon with a full-bleed (non-transparent) background that Android and others crop to a circle or rounded shape. To keep the artwork from being cut, important content stays inside the safe-zone circle covering 80% of the diameter. The dashed circle in the preview shows it. It is registered in the manifest as a separate icon with purpose "maskable".
My icon turns blurry or loses detail at 16 px. What should I do?
At 16 px thin lines, small text and subtle gradients basically disappear. The reliable fix is a simplified version: just the logo mark or an initial, bolder strokes, fewer elements. The warning here is based on how much the picture changes when reduced to 16 px — check the magnified preview too.
What size should an OGP image be?
Most social apps and chat tools recommend 1200×630 px (about 1.91:1). og-image.png uses exactly that. og:image must be an absolute URL (starting with https://), so enter your site URL and it is reflected in the <head> code.
Is my image uploaded?
No. Reading, rendering and zipping all happen in your browser, and nothing is stored.

Related tools

Batch Image Resizer

Drop a batch of images and resize them by width, longest edge, box crop and more. Make several sizes (say 320, 640 and 1280) from each image in one go, then copy ready-made srcset HTML. Your images are never uploaded.

Image Compressor

Drop images to shrink them in bulk while keeping them sharp. Convert to WebP or AVIF, resize, and compare before and after. Your images are never uploaded.

Image Converter

Choose the target format first, then drop images to convert them in bulk. Tune quality per format, use lossless WebP, set a background for transparency and name the output files — nothing is uploaded.

Crop, Pad & Canvas

Drag to crop, then rotate, straighten and add padding on one screen. Export straight to the recommended X header or Instagram size. Your image is never uploaded.

Image Editor

Annotate a screenshot or photo, reliably hide what must not be seen, tune the colours and export — on one screen. Made for how-to guides, bug reports and social posts. Your image is never uploaded and exports carry no metadata.

EXIF & GPS Remover

Remove the location (GPS), camera details and timestamps embedded in your photos without touching image quality. Inspect what was inside and verify the result — all in your browser.

Last updated: