Skip to content
SPCXTools

Favicon Generator

Turn a logo, a letter or an emoji into a complete favicon package with the HTML to use it.

Runs locally — files never leave your device

Loading tool…

How to use Favicon Generator

  1. 1Choose From image and select your logo (a square PNG or SVG works best), or choose From text and type a letter, initials or an emoji.
  2. 2Adjust the corner radius, padding and colors. Previews show the icon at real sizes.
  3. 3Click Download favicon package to get a ZIP with all files.
  4. 4Upload the files to the root of your website and paste the HTML snippet into the <head> of your pages.

Make a favicon in seconds

A favicon is the small icon that appears in browser tabs, bookmarks, history, search results on mobile and on the home screen when someone saves your site. It helps visitors find your tab among dozens and makes even a small website look finished. This favicon generator creates every file you need from a single image — or from a letter or emoji if you don't have a logo yet — and gives you the HTML to add them to your site.

Features

  • From an image: PNG, JPG, SVG, WebP and more.
  • From text or emoji: initials or an emoji on a colored background.
  • Rounded corners and padding to fit the icon nicely in tabs and home screens.
  • Live previews at 16, 32, 64 and 128 pixels.
  • Complete package: multi-size favicon.ico, PNG icons, Apple touch icon, Android icons and web manifest.
  • Copy-ready HTML link tags.
  • Private: generated entirely in your browser.

Favicon sizes explained

File Size Used by
favicon.ico 16, 32, 48 px All browsers, Windows shortcuts, legacy fallback
favicon-16x16.png 16 px Browser tabs
favicon-32x32.png 32 px Tabs on high-DPI screens, taskbar
apple-touch-icon.png 180 px iPhone and iPad home screen
android-chrome-192x192.png 192 px Android home screen
android-chrome-512x512.png 512 px Android splash screen, PWA install

Design tips

  • Simplify. Use your logo's symbol, not the full logo with the company name.
  • Use contrast. The icon must stand out on both light and dark browser themes.
  • Test at 16 px. If you can't recognise it in the smallest preview, simplify further.
  • Fill the square. Icons with lots of empty space look tiny in tabs; reduce the padding.

Related tools

Convert a vector logo to a high-resolution PNG first with SVG to PNG, change the size of an existing image with Resize Image, or convert between image formats with the Image Converter.

Frequently asked questions

What files are included?
favicon.ico (16, 32 and 48 px in one file), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), android-chrome-192x192.png, android-chrome-512x512.png, a site.webmanifest and an HTML snippet with the matching link tags.
What image works best for a favicon?
A simple, square image with bold shapes and few details. Favicons are often shown at just 16×16 pixels, so text and thin lines disappear. A logo mark without its wordmark, or a single letter, works much better than a full logo. Use a source image at least 512 px wide.
Where do I put the files?
Upload them to the root folder of your website so they're available at addresses like /favicon.ico. Then paste the HTML snippet inside the <head> section. Many browsers also look for /favicon.ico automatically even without the tag.
Why doesn't my new favicon show up?
Browsers cache favicons aggressively. Open the icon's address directly, force-refresh the page, or try a private window. It can take a while for bookmarks and tabs to update.
Should I use a transparent background?
Transparency looks good in browser tabs, but iOS fills transparent areas of the Apple touch icon with black. If your icon doesn't look good on both light and dark backgrounds, turn off transparency and choose a background color.
Is my image uploaded?
No. All icons are drawn and packaged in your browser. Nothing is sent to a server.