T
Tooltastic
Try now

Favicon Generator

Create favicons in all formats – free & right in your browser

PNG, JPG, SVG, GIF, WebP 100% local in browser ZIP download

Source Image

Upload or paste an image to get started

Drop image here

or click to select

Ctrl+V to paste from clipboard
PNG, JPG, SVG, GIF, WebP | Recommended: 512×512 px or larger, square

Current image

Popular Emojis

Configuration

0% 25% 50%
0% 10% 20%

Select which favicon sizes to generate

Preview

Browser tab
tooltastic.eu
Bookmark
Tooltastic
Example
Site
Home screen
Tooltastic
Search results

tooltastic.eu

Tooltastic – Free Online Tools

Free online tools for developers and designers...

Download

Download your favicons and integration code

Sent! Check your inbox.

HTML Code

Add this to the section of your HTML

Web App Manifest

Copy favicon files to the public/ folder, then add to index.html:

Copy favicon files to the app/ folder or use the Metadata API:

Via the Customizer or with code in functions.php:

How to Use Your Favicons

1

Extract the ZIP file

Unzip the downloaded file into the root directory of your website.

2

Add HTML code

Copy the HTML code above and paste it into the section of every page.

3

Add manifest

Copy the manifest code into your site.webmanifest or manifest.json file.

4

Test

Open your site in different browsers and check that the favicon displays correctly.

Included Files

favicon.ico – Classic favicon for all browsers
favicon-16x16.png – Small favicon
favicon-32x32.png – Standard favicon
apple-touch-icon.png – Apple devices
android-chrome-192x192.png – Android home screen
android-chrome-512x512.png – Android splash screen
site.webmanifest – Web app manifest
favicon.svg – Scalable vector favicon
Tutorial
Step-by-step guide
FAQ
Answers to frequently asked questions

What Is a Favicon?

A favicon (short for "favorite icon") is a small icon associated with a website. It appears in browser tabs, bookmarks, history, and search results. A well-designed favicon helps users quickly identify your site and enhances brand recognition.

Why Do You Need a Favicon Generator?

Modern websites need favicons in many different sizes and formats to look good on all devices and browsers. Manually creating all these variants is time-consuming. Our Favicon Generator automatically produces every required format from a single source image.

How Does the Favicon Generator Work?

Upload any image (PNG, JPG, SVG, GIF, or WebP), configure your preferred settings like background color and border radius, preview the results in real-time, and download all favicon files as a ready-to-use ZIP package – including HTML code and web app manifest.

What You Get

The Favicon Generator produces all the files you need: ICO format for legacy browsers, PNG files in multiple sizes for modern browsers and devices, Apple Touch Icon for iOS, Android Chrome icons, SVG for scalable vector support, and a web app manifest for progressive web apps.

Favicon Generator – FAQ

Answers to the most common questions about favicons

A favicon (favorite icon) is a small icon that represents your website. It appears in browser tabs, bookmarks, browser history, and search results. It's an essential part of your website's branding and helps users identify your site quickly.

For best results, use a square image with a minimum resolution of 512×512 pixels. The generator will automatically create all required sizes from your source image. Higher resolution sources produce better quality favicons.

The generator creates ICO files (16×16 and 32×32 combined), PNG files in various sizes (48, 64, 96, 128, 180, 192, 512), SVG for scalable vector support, and a web app manifest file.

The Apple Touch Icon is a 180×180 pixel PNG image used by iOS devices when users add your website to their home screen. It also appears in Safari's bookmarks and tab overview.

A web app manifest (site.webmanifest) is a JSON file that tells the browser about your web application. It includes the name, icons, and display preferences. It's required for Progressive Web Apps (PWAs) and Android home screen icons.

For maximum compatibility, yes. Different browsers and devices request different sizes. At minimum, you should have favicon.ico (16×16 and 32×32), a 180×180 Apple Touch Icon, and 192×192 and 512×512 PNGs for Android.

No. All processing happens locally in your browser using JavaScript. Your images never leave your computer – no data is sent to any server.

Common reasons: browser caching (try hard refresh with Ctrl+Shift+R), incorrect file path in HTML, missing files on server, or the HTML code not being in the <head> section. Clear your browser cache and verify the file paths.

Yes! PNG and SVG favicons support transparency. ICO files also support transparency. Transparent backgrounds work well for most favicon designs and adapt to both light and dark browser themes.

An SVG favicon is a scalable vector graphic that looks sharp at any size. Modern browsers support SVG favicons, which can also include CSS media queries for dark mode support. It's the most future-proof favicon format.

Upload the generated files to your website's root directory, then add the provided HTML link tags to the <head> section of your HTML. The generator provides ready-to-use code that you just need to copy and paste.

While you can upload a JPG as your source image, favicons are generated as ICO, PNG, and SVG. JPG is not ideal for favicons because it doesn't support transparency and uses lossy compression that reduces quality at small sizes.

ICO is the traditional favicon format that can contain multiple sizes in one file – it's supported by all browsers including very old ones. PNG favicons are individual image files that offer better quality and transparency. Modern websites should include both.

WordPress has a built-in Site Icon feature under Appearance > Customize > Site Identity. Alternatively, you can generate favicons here and upload them to your theme's root directory, then add the HTML code to your header.php or use a plugin.

Blurry favicons usually result from using a source image that's too small or too detailed. Use a simple design with bold lines and high contrast. Make sure your source image is at least 512×512 pixels for best results.

Yes, with SVG favicons! SVG files can include CSS media queries like @media (prefers-color-scheme: dark) to show a different design in dark mode. This is one of the key advantages of using SVG favicons.

Google uses a 48×48 pixel favicon (displayed as 16×16) in search results. They recommend providing a favicon that's a multiple of 48 pixels (48×48, 96×96, 144×144). Our generator includes these sizes by default.

Update your favicon whenever you rebrand or significantly change your logo. Browsers cache favicons aggressively, so users may see the old one for a while. Adding a version query parameter (favicon.ico?v=2) can help force updates.

Yes! The Favicon Generator is fully responsive and works on smartphones and tablets. You can upload images, configure settings, and download the generated favicons on any device.

Yes, the Favicon Generator is completely free to use. There are no hidden costs, no registration required, and no watermarks on your favicons. Everything runs locally in your browser.

Create favicons in every format

The favicon generator turns a single image into all the icons a modern website needs: the classic ICO, PNGs in several sizes, the Apple touch icon and icons for Android and progressive web apps. Instead of exporting each format separately in an image editor, you upload one design and receive a complete package – all in the browser, without any upload.

Common use cases

  • Launch a new website: Create every favicon file and the matching HTML code for a fresh project in a single step.
  • Brand relaunch: Update the browser icon consistently across all devices and platforms after a logo change.
  • PWA and mobile: Deliver high-resolution icons for the iOS and Android home screen as well as for the web app manifest.
  • Icons for light and dark tabs: Create variants of your icon that stay legible on both light and dark browser tabs.

How to create your favicon

  1. 1 Drag and drop a square image, ideally at least 512 by 512 pixels.
  2. 2 The tool instantly renders a preview in the different sizes.
  3. 3 Download the finished favicon package.
  4. 4 Copy the provided HTML tags into the head section of your site.

What matters with favicons

A good favicon stays recognisable even at 16 pixels, which is why clear, high-contrast designs work best. Because different browsers and operating systems expect different formats, the tool covers the full spectrum from ICO to SVG. All processing runs locally through the browser canvas functions, so your original image is never uploaded anywhere. Also place the favicon in the root directory so that older browsers find it reliably.

Related tools

Free tools that pair well with this one – right in your browser, no sign-up.

QR Code Generator Generate QR codes for URLs, WiFi & more OG Meta Generator Generate Open Graph & Twitter tags SVG Placeholder Create custom placeholder images Email Signature Design email signatures