Turn your logo into favicon.ico and a full icon set

Content last reviewed:2026-09-07

Upload a logo in PNG, JPG or SVG. The tool builds a favicon.ico that holds three sizes inside it, together with five separate PNG icons. Every file is created inside your browser and goes straight to your drive — download the whole set at once or one file at a time.

Preview and favicon files

Add an image on the left to generate favicon.ico and a set of PNG icons compliant with current guidelines.

favicon.ico

ICO 16x16 + 32x32 + 48x48

To be generated

favicon-16x16.png

PNG 16x16

To be generated

favicon-32x32.png

PNG 32x32

To be generated

apple-touch-icon.png

PNG 180x180

To be generated

android-chrome-192x192.png

PNG 192x192

To be generated

android-chrome-512x512.png

PNG 512x512

To be generated

This tool works on a larger screen

To use this tool comfortably, open it on a laptop, desktop computer, or tablet in landscape mode.

Tip

If you are using a tablet, switch it to landscape mode - when the window width is large enough, the tool will load automatically.

What is a favicon, and what is an apple-touch-icon?

A favicon is the site icon a browser draws on the tab next to the page title, on the bookmarks bar and in your history. The encyclopaedic definition describes it as the icon shown in the address bar or on the tab of an open page [1]. On a tab it gets a side of roughly a dozen pixels, which is less room than a single letter of this sentence takes up.

An apple-touch-icon is the same artwork prepared for the iPhone and the iPad. It lands on the home screen when someone saves your site as a shortcut. Its side is 180 pixels, because the system draws it at a size close to an ordinary app.

The two largest icons in the set, 192 and 512 pixels, serve web apps. Android reaches for them when a shortcut is created and during installation, and it finds them through the manifest file — the document in which a site declares its name, its colours and exactly this array of icons [2].

How do you make a favicon from your own logo?

Upload your logo into the Add base image field, click Generate favicon and download six files: favicon.ico plus PNG icons with sides of 16, 32, 180, 192 and 512 pixels. Your browser processes the image on your own machine and the finished files go straight to your drive.

The favicon.ico is more than a single picture. ICO is a container for several versions of the same artwork, and the generator puts three of them inside: 16, 32 and 48 pixels. The browser or the operating system then picks the version that fits the place where it is about to draw the icon. A browser tab reaches for the smallest one, a desktop shortcut for a larger one.

The file names match what site templates and documentation look for: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png and android-chrome-512x512.png. Upload them to your server exactly as they come out of the generator.

Which files do you get, and where does each one appear?

The generator always builds the complete set. Below is the size of every file and the place where a visitor actually sees it.

File name	Size	Where it appears
favicon.ico	16, 32 and 48 px in one file	Browser tab, bookmarks bar, desktop shortcut
favicon-16x16.png	16 × 16 px	Browser tab on a standard-density screen
favicon-32x32.png	32 × 32 px	Browser tab on a high-density screen
apple-touch-icon.png	180 × 180 px	iPhone and iPad home screen
android-chrome-192x192.png	192 × 192 px	Shortcut on the Android home screen
android-chrome-512x512.png	512 × 512 px	Splash screen and web app installation

What icon size do Google, Apple, Android and WordPress need?

Each of these places reads the icon on its own terms. One set from the generator covers all of them at once.

Where the icon appears	Side it needs	File format
Google search results	At least 8 px, above 48 px recommended	ICO, PNG, JPEG, GIF, BMP, TIFF or PPM
Browser tab	16 px, or 32 px on a dense screen	ICO or PNG
iPhone and iPad home screen	180 px	PNG
Shortcut on the Android home screen	192 px	PNG
Web app installation	512 px	PNG
Site Icon in WordPress	At least 512 px	PNG or JPG

Google's favicon requirements, including the square shape and the list of formats, are set out in the search documentation [3]. The 512 pixel threshold for the Site Icon comes from the WordPress documentation [4].

Where do you declare each downloaded file?

Four files go into the head section of your page, and the two largest ones are listed in the manifest file.

File from the generator	Where to declare it	rel attribute
favicon.ico	Head section of the page	icon
favicon-16x16.png	Head section of the page	icon
favicon-32x32.png	Head section of the page	icon
apple-touch-icon.png	Head section of the page	apple-touch-icon
android-chrome-192x192.png	Manifest file, icons array	Declared in the manifest
android-chrome-512x512.png	Manifest file, icons array	Declared in the manifest

The rel values Google recognises for a favicon are icon, apple-touch-icon and apple-touch-icon-precomposed [3]. The ready-made lines of code are further down, in the HTML tab.

How do you use the favicon generator?

Three steps stand between you and a full icon set on your drive:

1. Add your base image
Drag a file onto the Add base image field, or click it and pick artwork from your drive. The tool accepts PNG, JPG/JPEG and SVG, and it shows the name and weight of the chosen file underneath.
2. Set the background
The generator starts on a white background. Ticking Transparent background (PNG/ICO) leaves the area around your mark empty, and you can pick your own shade with the swatch next to Background color.
3. Generate and download
Click Generate favicon. Six files appear in the right-hand column a moment later, each with its weight and a total size above them. The Download button saves the whole set, and every row has its own Download button.

Transparent background (PNG/ICO)

Background color:

Icon background: transparent or a colour?

White works as the starting setting

When the page opens, the swatch sits on white and all six icons come out on that colour. It suits logos in dark shades, and anywhere the icon should look identical on a light and a dark tab strip.

Transparent background (PNG/ICO)

Ticking this box leaves the area around your mark empty, and the colour swatch goes inactive. Choose it when your logo has a shape of its own — a circle, a monogram, a letter — and you want it to sit on whatever colour is behind it.

A colour from your own identity

The swatch takes any shade, including the one from your brand guidelines. If you need the exact value from artwork you already have, pull it out with the image colour extractor and paste it here.

Which source image gives the best result?

The smallest icon in the set has a side of 16 pixels, so what you upload decides most of the outcome.

Go for a simple shape and one strong mark
At a side of 16 pixels, monograms, single letters and compact symbols stay readable. The same mechanism is at work on wayfinding signs: a pictogram carries its meaning in a few strokes, because it has to land from a distance and at a small size.
Upload a logo in SVG
An SVG file describes shapes through curves and geometry, so the generator draws every size from the full description. In our measurement the edge of a circle in a 512 pixel icon came out clean: not one pixel of an intermediate shade fell on a line through its centre. The same file goes further than icons: a bitmap of that mark for a deck or an email signature comes out of the SVG to PNG converter.
Pick a file with a side of at least 512 pixels
That is the side of the largest icon in the set. With a raster file that size, every smaller icon is produced by scaling down, and that keeps the edges crisp.
Upload an image of any proportions
The tool fits it into the square whole: it scales the image to the longer side, centres it, and fills the free strips with the chosen background. Take a horizontal logo of 400 × 100 pixels. In a 64 pixel icon it comes out as a band 16 pixels tall, with background above and below it. If you would rather the mark filled the whole square, crop the logo to a square in the image editor first and upload it here afterwards.
Choose contrast that survives both themes
The icon sits on a light tab strip one moment and a dark one the next. Shades that differ clearly from both white and black hold up in either case.
Leave a margin at the edges for Android
Android may crop an icon to a circle or to a rounded square. The specification guarantees visibility inside a circle whose radius is two fifths of the shorter side, measured from the centre [2], so a centred mark survives any such crop.
Start from PNG if your logo is in another format
The Add base image field works on PNG, JPG/JPEG and SVG files. A mark saved differently just needs one pass through a converter first. A photo from an iPhone opens in the HEIC to PNG converter. Artwork pulled off a website goes through the WEBP to PNG converter or the AVIF to PNG converter. A logo that came in a brand book as a PDF comes out of the PDF to PNG converter.

Is an SVG file enough on its own as a site icon?

An SVG icon works in desktop browsers today — Chrome and Edge read it from version 80, Firefox from 41. On the iPhone and the iPad, Safari does so from version 26 [5]. That makes SVG a good addition to the set, alongside the ICO and PNG files.

Google reads the favicon for its search results from ICO, PNG, JPEG, GIF, BMP, TIFF and PPM files [3]. The set from this generator lands in that list twice: once through favicon.ico, once through the PNG icons. If you already have an SVG of your own, keep it in the head section alongside them — then every one of these places finds a format it can read.

Where do you upload the generated files?

Four routes, depending on what your site runs on:

WordPress
In today's WordPress you set the icon in the dashboard, under Settings › General. The field is called Site Icon. Classic themes also offer the same option in the Customizer, in the site identity section.
Upload android-chrome-512x512.png there. The documentation asks for a square image of at least 512 pixels [4], and WordPress prepares the smaller variants itself.
Want full control over every file? Upload the whole set over FTP to your site's root directory and add the links exactly as the HTML card shows.
Shopify
In your store admin go to Online Store, find your theme and click Edit theme. Under Theme settings open the logo section, and inside it the Favicon image field.
Shopify gives 32 × 32 pixels as the recommended size and scales larger images down to it [6]. So upload android-chrome-512x512.png — that leaves you quality in reserve for high-density screens.
HTML
Copy the files into your site's root directory, the one holding index.html. Browsers check the /favicon.ico address on their own, and they find the remaining icons through the links in the <head> section:
```
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
```
The two largest icons go into the manifest file, in the icons array, together with their dimensions and the image/png type.
An icon can also be embedded straight into the code as a string of characters — the image to Base64 converter prepares one. That comes in handy for single-file pages and prototypes; keep an ordinary file at /favicon.ico alongside it, because that is what the Google crawler reaches for [3].
Next.js
Next.js with the App Router recognises icons by file name and adds the links to the head section for you [7]:
- app/favicon.ico — only in the app/ directory and only with the .ico extension
- app/icon.png — the PNG icon; this name also takes .jpg and .svg, and further variants are numbered icon1.png, icon2.png
- app/apple-icon.png — the counterpart of apple-touch-icon.png; this name accepts .png, .jpg and .jpeg
Keep the 192 and 512 pixel icons in the public/ directory and point to them from the manifest. You can also describe the whole set in layout.tsx, through the metadata.icons object.

How does a favicon behave in Google search results?

Google shows the site icon next to the site name in its results, on phones and on desktop. To fetch it, it needs access to two things: Googlebot Image has to be able to crawl the icon file itself, and ordinary Googlebot has to be able to crawl the home page [3]. So keep the directory holding the icon outside any blocking rules in robots.txt.

After you swap the file, expect a wait: the documentation states plainly that re-crawling takes anywhere from several days to several weeks [3]. Google also notes that a favicon is not guaranteed to appear in results even when every guideline is met.

The icon itself belongs to the presentation layer of a result, and the search documentation describes it in exactly those terms. What it really moves is recognition: in a column of results, and among a dozen open tabs, it is often the only splash of colour that tells your site apart from the rest.

Sources

Favicon — Wikipedia
Web Application Manifest — W3C
Define Website Favicon for Search Results — Google Search Central
Customizer — Site Identity — WordPress
SVG favicons — Can I use
Theme settings — favicon image — Shopify Help Center
favicon, icon and apple-icon — Next.js

Every figure in the tables was computed from the unit definitions and checked arithmetically before publication. Historical values and the names of local units come from the sources listed above.

Content last reviewed: September 7, 2026 · written and checked by the Arteon team

Common questions about the favicon generator

How many files does an ordinary business site need?

Three: favicon.ico, favicon-32x32.png and apple-touch-icon.png. The first covers the browser tab and the search results, the second covers high-density screens, the third covers the iPhone home screen. The two largest icons come into play the moment you want to offer the site as a web app.

Does a favicon have to be square?

Google requires a 1:1 ratio [3], and WordPress expects a square for the Site Icon as well [4]. The generator handles that for you: an image of any proportions is fitted into the square whole and completed with the chosen background, so all six files come out square.

Why does the browser still show the old icon?

A browser keeps icons in its cache for longer than the rest of a page. Open the file address itself, for example /favicon.ico, and reload it bypassing the cache with Ctrl + F5. You can also add a version number to the link, for example /favicon.ico?v=2 — as far as the browser is concerned, that is a new address.

Does a favicon affect a site's position in Google?

The search documentation describes a favicon as part of how a result looks [3]. Its effect on position is indirect and comes down to how quickly a searcher recognises your brand in a column of results.

What exactly is inside the favicon.ico from this generator?

Three images of the same artwork: 16 × 16, 32 × 32 and 48 × 48 pixels, each stored as PNG inside the ICO container. The browser and the operating system pick the version that fits the place where they draw the icon.

What is a maskable icon, and which area of it is safe?

It is an icon prepared for Android's system masks, which crop it to a circle, a rounded square or a teardrop. The manifest specification guarantees visibility inside a circle whose radius is two fifths of the shorter side, measured from the centre of the image [2]. A mark placed inside that area survives any mask shape.

Where on the server should the downloaded files go?

In your site's root directory, next to the start file. Browsers check the /favicon.ico address on their own, even without a link in the code, and they find the remaining icons through the head section lines shown above in the HTML tab.

Can I download just one file from the set?

Yes. Every row in the results list has its own Download button, so you can save a single icon when you are updating only one size on your site. The Download button above the list saves the whole set at once.

What images does the generator take, and what happens to my file?

The Add base image field takes PNG, JPG/JPEG and SVG files. All the work happens inside your browser: the image is read into the tab's memory, every icon is built there, and from there they go to your drive. The Clear button removes the image and the results straight away, and closing the tab does the same.

Help us improve our tools

Have an idea for a new feature, found a bug, or want to suggest another tool that would make your work easier? Write to us – we reply within 24 hours.