ArrayKit

Favicon Generator

Turn a logo, a few letters or an emoji into a complete favicon set — favicon.ico, PNG sizes, an Apple touch icon, Android icons and the HTML tags — made in your browser.

Favicon Generator

Turn a logo, a few letters or an emoji into a complete favicon set — favicon.ico, PNG sizes, an Apple touch icon, Android icons and the HTML tags — made in your browser.

Your logo or text is drawn on a canvas in this tab and packed into the ZIP on your device. Nothing is uploaded, so unreleased branding stays private.

Open the App Icon Generator

About Favicon Generator

The Favicon Generator builds the whole set of site icons from one source. Start with an image such as a logo, type one to three characters, or pick an emoji. Each icon is drawn at its own pixel size instead of being shrunk from a single large file: 16, 32 and 48 px go into one favicon.ico as PNG images, beside separate 16 and 32 px PNGs, a 180 px Apple touch icon and the 192 and 512 px icons Android uses. A web manifest and a block of link tags come with them, and text or emoji sources also produce a genuine SVG favicon. Previews show every size pixel by pixel and inside light and dark browser tabs before anything is downloaded. All of it is rendered on your device, and your picture is never uploaded.

Features

  • Image, text or emoji as the source, with live previews before you download
  • favicon.ico holding 16, 32 and 48 px images, plus separate 16 and 32 px PNGs
  • A 180 px Apple touch icon, filled and square so iOS can round it itself
  • 192 and 512 px Android icons with a matching site.webmanifest
  • A genuine favicon.svg for text and emoji sources, sharp at any size
  • Fit, padding, corner radius and background controls for image sources
  • Pixel-exact previews from 16 to 180 px and mock browser tabs in light and dark
  • One ZIP of every file, with the link tags ready to paste into your head

How to use the Favicon Generator

  1. Choose Image, Text or Emoji, then drop a logo, type up to three characters or pick an emoji
  2. Adjust fit, padding, colours and corner shape while the previews and the browser tabs update
  3. Enter your app name and theme colour, and the folder the icons will be served from
  4. Download the ZIP, upload the files to your site, and paste the link tags into your head

Example

Input

Source: emoji 🚀 on a rounded tile · theme colour #4f46e5 · icons in the site root

Output

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#4f46e5">

The tags written for a text or emoji source; an image source leaves out the SVG line.

Common errors & troubleshooting

  • The old favicon still shows after the new files are uploaded. — Browsers keep favicons for a long time. Open the icon's address directly, reload it with Ctrl+Shift+R (⌘⇧R on a Mac), then reload the page. A private window shows the current icon straight away.
  • The icon looks blurry or muddy in the browser tab. — Start from a square picture of at least 512 px and keep the artwork simple, because fine detail disappears at 16 px. A wide logo often works better with more padding or the Cover fit.
  • The Apple touch icon has black corners or a black background. — iOS paints transparent pixels black. The 180 px icon is filled with your icon's background colour, or the manifest background colour when the icon is transparent, and its corners stay square for iOS to round.
  • There is no favicon.svg in the list of files. — A real SVG only exists for Text and Emoji sources, where the character stays live text. A photo or logo file would only be a bitmap in an SVG wrapper, so the PNG and ICO files cover it.

Frequently asked questions

Which favicon sizes do I need in 2026?
A favicon.ico with 16, 32 and 48 px images, a 180 px apple-touch-icon, and 192 and 512 px icons for the manifest cover almost every browser and phone. Separate 16 and 32 px PNGs and an SVG are worthwhile extras, and the Favicon Generator makes all of them together.
What is the difference between ICO, PNG and SVG favicons?
ICO is the original container and is still requested automatically from a site's root, so it covers old browsers and bookmarks. PNG is the safe choice for tabs and phone icons. SVG is a single vector file that stays sharp at any size, but not every browser supports it, which is why the set includes all three.
Where do I put the favicon files and the link tags?
Upload the files to the folder your site is served from, normally the root next to the home page. Then paste the generated tags inside the head element of every page. If the icons live in a subfolder, enter that folder in the tool first so the paths in the tags and the manifest are right.
Why does my favicon not change after I replace the files?
Browsers cache favicons separately from the page and may hold an old one for days. Reload the icon's own address with Ctrl+Shift+R, clear the site's cached images, or test in a private window. Renaming the files and updating the tags also forces a fresh download.
Can I use an emoji as a favicon?
Yes. Pick the Emoji tab, type or paste one emoji, and choose a size and an optional background. The PNG and ICO files are drawn with this device's emoji font, so they look the same everywhere. The SVG uses live text, so each visitor's system draws its own version of the emoji.
What do the Android and manifest icons do?
The 192 and 512 px PNGs are listed in site.webmanifest. Android uses them for the home-screen shortcut and the splash screen, and installable web apps need them. The manifest also stores your app name, short name and colours, which you can set in the tool.

Related tools

  • App Icon Generator — Turn one image into every iOS, macOS and Android app icon size — downloaded as a ZIP, in your browser.
  • SVG to PNG Converter — Convert SVG to PNG or JPG at any scale, with a transparent or solid background, in your browser.
  • Image Format Converter — Convert images between PNG, JPEG and WebP entirely in your browser.
  • Open Graph Generator — Generate Open Graph & Twitter meta tags with a live social-card preview.
  • Meta Tag Generator — Generate SEO, Open Graph and Twitter Card meta tags for your page from a simple form.
  • Image Resizer — Resize photos by pixels, percentage, preset or longest side — in batches, with a ZIP download.
  • Base64 Image Encoder / Decoder — Convert images to Base64 Data URIs with ready-made HTML and CSS snippets, or decode a Data URI back to a downloadable image.

More Images tools

  • Image Optimizer — Re-encode and shrink images (JPEG/WebP/PNG), optionally resizing.
  • Image Format Converter — Convert images between PNG, JPEG and WebP entirely in your browser.
  • EXIF Viewer & Remover — View and strip EXIF metadata (including GPS) from photos — nothing is uploaded.
  • Base64 Image Encoder / Decoder — Convert images to Base64 Data URIs with ready-made HTML and CSS snippets, or decode a Data URI back to a downloadable image.
  • App Icon Generator — Turn one image into every iOS, macOS and Android app icon size — downloaded as a ZIP, in your browser.
  • Sprite Sheet CSS Animation Generator — Turn a sprite sheet into a copy-paste CSS @keyframes animation using steps(), with a live preview.
  • SVG to PNG Converter — Convert SVG to PNG or JPG at any scale, with a transparent or solid background, in your browser.
  • Image Color Picker — Upload an image and pick colors from any pixel to get HEX, RGB and HSL values, in your browser.
  • Color Format Converter — Convert a color across HEX, RGB, HSL, HWB, LAB, LCH and OKLCH with a live swatch.
  • Barcode Generator — Generate EAN, UPC, Code 128 and Code 39 barcodes and download them as SVG or PNG.
  • Image Color Palette Extractor — Extract a dominant color palette from an image as HEX, RGB and HSL with CSS variables.
  • Flip & Rotate Image — Rotate by 90° and flip images horizontally or vertically, then download — in your browser.
  • Image Cropper — Crop an image to any area or fixed aspect ratio and download it, in your browser.
  • Image Watermark — Add a text or logo watermark to an image, anchored or tiled, with opacity and rotation.
  • Blur & Redact Image — Permanently blur, pixelate or black out parts of a screenshot before sharing it.
  • Round Image Corners — Clip photos to rounded rectangles or circles and export PNGs with transparent corners.
  • Color Blindness Simulator — See any image the way people with protanopia, deuteranopia or tritanopia see it.
  • Image DPI Changer — Set a PNG or JPEG’s DPI for print without recompressing a single pixel.
  • BlurHash Generator — Turn an image into a BlurHash string, and decode any hash back to a preview.
  • Placeholder Image Generator — Make placeholder images at any size, as SVG, PNG or a data URI.
  • ASCII Art Generator — Convert any image into ASCII art, with character sets, contrast and invert.
  • Image Filters — Apply grayscale, sepia, contrast, blur and more, then export the PNG and the CSS.
  • Image Splitter — Cut a picture into a grid of tiles and download them as a ZIP.
  • Image Merger — Combine images side by side, stacked or in a grid, with gaps and a background.

See all Images tools (35) · All tools