Favicon Generator

Choose what your icon is made from, set the shape and background, and press Download favicon package (ZIP). A few seconds later you have every file a modern website needs: favicon.ico, PNG icons in several sizes, an Apple touch icon, Android and app icons, a Windows tile, a web manifest and the HTML tags to paste into your pages.

This favicon generator works three ways. Type up to three letters or numbers and pick one of six fonts, add a picture of your logo, or tap an emoji. The live preview shows how the result looks in a light and a dark browser tab, at real pixel sizes, on a phone home screen and next to a search result, so you can judge it before you download anything.

Everything is drawn inside your browser. Your logo is not sent to a server, there is no account to create, and the package is yours to use on any site, shop or app.

There is no sign-up, no watermark, no limit on how many packages you make and no paid version hiding the useful parts. Every option you see on the page is open to everyone, and the files you download contain only your own artwork.

Because it is a favicon generator free of strings, you can use the icons on personal blogs, client websites, online shops and commercial apps alike. The only rights you need to think about are the rights to the logo or picture you put in, which stay with you.

Many icon sites upload your logo, build the files on their server and send a download link back. Here the drawing, resizing and zipping all happen in your browser with the canvas and file features every modern browser has. Nothing about your artwork leaves your device, and there is no copy left behind on someone else's computer.

That makes it a good favicon generator online for work laptops, school computers and client projects where you cannot install software or should not hand logos to unknown services. It runs the same way in Chrome, Edge, Firefox and Safari on Windows, macOS, Linux, ChromeOS, Android and iPhone.

Choose Image / logo under Make it from and click Select image. The tool accepts PNG, JPG, WebP and SVG files. Your picture is fitted inside the square without cropping or stretching, centred, and the space left over is filled with the background you choose, or left clear.

With this favicon generator from image files you keep the brand mark you already use. A square logo, or the symbol part of a wider logo, works best. A long wordmark becomes a thin strip at 16 pixels that nobody can read, so crop it first with Crop Image or Circle Crop and then add the cropped file here.

If your logo sits on a white box and you want it clear instead, run it through Remove Background first. If it arrives in a format the picker does not list, convert it with JPG to PNG or WebP to PNG and try again.

PNG is the best picture format to start from. It is lossless, so edges stay crisp, and it supports transparency, so the clear area around a logo stays clear in every icon. Export your logo as a square PNG of 512 pixels or more and the tool has plenty of detail to work with for every size.

Using the favicon generator from PNG artwork also keeps soft edges and shadows intact, because partial transparency is carried through to the icons. JPG works too, but it has no transparency and may show faint blocky marks around sharp edges, so pick a Colour or Gradient background that matches the JPG's own background.

SVG is a vector format, so it stays sharp at any size. When you choose an SVG under Image / logo, the tool draws it on a large 1024 pixel canvas and makes every PNG and ICO size from that, so even the 512 pixel Android icon is crisp.

The favicon generator from SVG files does one more thing: it puts your original SVG into the package as favicon.svg and adds a matching link tag to the HTML. Modern browsers that support SVG favicons use it at any size and any screen density, while older browsers fall back to favicon.ico.

Keep in mind that favicon.svg is your SVG exactly as you added it, without the shape, padding or background you chose for the PNG icons. If you want those in the SVG too, add them in your design program, or leave the SVG tag out and rely on the PNG and ICO files. To get a PNG from an SVG for other uses, SVG to PNG does that in one step.

Choose Text or initials and type up to three characters into the small box. One letter is drawn largest, two letters a little smaller, and three letters smaller again, and the tool shrinks the text further if it would run past the padding. The characters are centred both ways using the real height of the letters, so they sit in the middle rather than riding high.

The font menu offers Inter, Poppins, Montserrat, Playfair, Pacifico and Mono. Inter and Poppins are clean and modern, Montserrat is heavy and wide, Playfair has a classic serif look, Pacifico is a rounded script and Mono gives a coder-style monospaced letter. The colour box next to the menu sets the text colour.

A favicon generator from text is the quickest way to get a tidy icon when you have no logo yet, or when your logo is too detailed to survive small sizes. One bold letter on a strong colour is what many well-known sites use in their tabs, because it stays readable at 16 pixels.

Pick one letter if you can. Two letters still read well at 32 pixels, but at 16 pixels each letter gets only about six pixels of width. Three characters suit short codes like a version number or a year, and look best on the larger icons such as the home screen one.

Give the text strong contrast against the background: white on a dark colour, or a dark colour on a light one. Thin letter shapes in Playfair or Pacifico look elegant at 180 pixels but can fade at 16, so check the 16px preview before you download.

Choose Emoji and tap one of the sixteen ready picks, from a rocket and a star to a book, a house, a pizza slice, a music note and a camera. To use any other emoji, type or paste it into the box at the end of the row.

Emoji are drawn with the emoji font of the device you are using, so an emoji made on an iPhone looks like the Apple design, and one made on Windows looks like the Microsoft design. Whatever you see in the preview is exactly what goes into the files, and the files then look the same everywhere because they are pictures, not text.

Shape sets the outline of the icon: Square fills the whole space, Rounded cuts the corners with a radius of about a fifth of the width, and Circle makes a round icon. Everything outside the shape is transparent, so a rounded or round icon sits cleanly on any tab colour.

The Apple touch icon and the maskable icon are always made as full squares, whatever shape you pick. iPhones and Android phones cut their own rounded or round mask, and a pre-rounded picture would end up with a coloured ring around it.

The Padding slider runs from 0 to 30 percent and sets the empty space on every side of your text, emoji or image. At 0 the artwork touches the edges; at 30 it fills only the middle 40 percent of the icon.

The maskable icon automatically gets an extra 10 percent on every side on top of your own padding, so the important part stays inside the safe zone that Android keeps when it applies its mask.

Background has three choices. Transparent leaves the area behind your artwork clear. Colour fills the shape with one colour from the colour box. Gradient blends two colours from the top left corner to the bottom right, using the first and second colour boxes.

A solid colour gives the strongest, most recognisable icon, because the shape reads clearly against both light and dark tabs. A gradient adds depth on the larger icons; at 16 pixels it looks almost like a single colour, so choose two shades that work together. Pick colours that match your brand with Color Picker, or build a set with Color Palette Generator.

Choose Transparent under Background and the area around your artwork stays clear in favicon.ico, in all the favicon PNG files, in the Android icons and in the Windows tile. On a tab, only your letter, emoji or logo shows, on whatever colour the browser uses.

A favicon generator with transparent background output needs one honest caveat. Apple home screens and Android maskable icons do not allow transparency well: iOS fills clear areas with black, and Android masks need a full square. So the tool gives apple-touch-icon.png and maskable-icon-512x512.png a white background when you choose Transparent, and the hint under the Background card says so.

Transparent icons need artwork that works on both light and dark tabs. Black text disappears on a dark tab, and white text disappears on a light one. The two tab previews show both cases side by side, so you can see the problem before your visitors do.

Many people now use their browser in dark mode. A dark logo with no background can vanish against a dark grey tab, and a light logo can vanish against a white one. Adding a coloured background, even a small rounded square, fixes both at once.

If you want to keep a transparent icon, give the artwork a thin outline or a colour in the middle range, such as a strong blue, red or green, which reads on both. Then check the Light tab and Dark tab previews before you download.

The Preview panel shows your icon the way people meet it. The two tab strips show it in a light and a dark browser tab next to your site name. The 16px, 32px and 64px images show the icon at true pixel size on a checkerboard, so you can see exactly which pixels are clear. The phone home screen tile shows the Apple touch icon with rounded corners, and the search result card shows a small round icon next to your site name and address, much like a search engine list.

Trust the 16px preview most. It is the size a normal screen uses for tabs, and it is where thin lines, small text and busy pictures fall apart. If the icon looks clear there, it will look clear everywhere else.

The App details (manifest) card has three fields. Name is the full name of your site or app, Short name is the label shown under the icon on a phone home screen where space is tight, and Theme colour is the colour some browsers use for the address bar and the app's title bar.

These values go into site.webmanifest, together with the three Android icons, a background colour (your Colour background, or white otherwise), display set to standalone and start_url set to the front page. The theme colour is also used as the tile colour in browserconfig.xml and in the theme-color meta tag. Keep the short name to about 12 characters so it is not cut off under the icon.

The download is a single file called favicon-package.zip. It holds 13 files, or 14 when you started from an SVG. Here is what each file is and where it is used.

That list is why this is a favicon generator for all devices rather than just a tab icon maker. Desktop browsers take the ICO and small PNG files, iPhones and iPads take the Apple touch icon, Android phones and installed web apps take the manifest icons, and older Windows versions take the tile. One download covers them all, all drawn from the same settings so they match.

You do not have to use every file. A simple blog can live with favicon.ico, the two small PNG files and the Apple touch icon. Add the manifest and Android icons when you want visitors to install your site as an app or add it to their home screen.

Lots of icon lists online include dozens of sizes, such as 57, 60, 72, 76, 114, 120, 144 and 152 for every old iPhone and iPad. Today's Apple devices scale the single 180 pixel icon for all of those spots, and Android reads the manifest, so a long list of extra files adds clutter without any visible gain.

The tags below are exactly what the HTML tab shows and what html-tags.txt contains. Press Copy HTML tags in the tool and they land on your clipboard with your own theme colour filled in. Paste them inside the head section of every page, or into the shared header template your site uses.

WordPress has its own place for the site icon. In the dashboard go to Appearance, then Customize, then Site Identity, and click Site Icon. Upload android-chrome-512x512.png from the package, crop if asked, and publish. WordPress then makes the smaller sizes and adds the tags for you.

On block themes, where Customize is hidden, the same Site Icon setting is in Settings, then General, or in the Site Identity block options of the site editor, depending on your WordPress version. Both paths lead to the same setting.

If you want the exact files from this favicon generator for WordPress sites, including favicon.ico, the manifest and the colours you chose, upload the files to the root folder of your site with your host's file manager or FTP, then add the HTML tags with a header and footer plugin or your child theme's header file. Do not use both methods at once, or you will end up with two sets of tags.

In Shopify admin open Online Store, then Themes, and click Customize on your live theme. Open Theme settings, find Logo or Favicon (the name depends on the theme), upload android-chrome-512x512.png and save. Shopify resizes it for browsers on its own.

Shopify does not let you upload files to the root of your store domain, so the full package with favicon.ico and the manifest is not used there. The 512 pixel PNG is all the theme needs. Squarespace, Wix and similar site builders work the same way: look for a favicon or site icon setting and upload the 512 pixel PNG.

In a Next.js project with the App Router, the framework writes the icon tags for you when files with special names sit in the app folder. Put favicon.ico in app/, rename apple-touch-icon.png to apple-icon.png and android-chrome-512x512.png to icon.png and put both in app/ as well. Next.js reads them at build time and adds the right link tags to every page.

For the manifest, put site.webmanifest and the Android icons in the public folder and point to it with the manifest field in your root layout metadata. If you use the older Pages Router, copy all files to public/ and paste the HTML tags into the Head of your custom document instead.

For Vite and Create React App, copy every file from the package into the public folder. Files there are served from the root of your site exactly as they are. Then open index.html, which sits in the project root for Vite and in public/ for Create React App, and paste the HTML tags inside the head section, replacing any old favicon line.

Create React App also understands paths written as %PUBLIC_URL%/favicon.ico, which helps when the app is served from a subfolder. Vue, Svelte, Astro and most other front-end tools follow the same public folder idea, so the same steps work there too.

Google can show your favicon next to your site name in search results, which helps your page stand out in a list. Google sets a few rules for that. The favicon must be square and a multiple of 48 pixels, so 48 × 48, 96 × 96 or 144 × 144 are good. The file must have a stable address, and Google's crawler must be allowed to fetch both the icon and your home page.

The package meets the size rule: favicon.ico includes a 48 pixel image and the tag says sizes 48x48, and favicon-48x48.png and favicon-96x96.png are included as extra files. If you want to point Google at the 96 pixel file directly, add one more link line with sizes 96x96 and the path /favicon-96x96.png.

Then make sure the tags are on your home page, that robots.txt does not block the icon files or the folder they live in, and that the icon is not something Google would see as inappropriate. Google decides when and whether to show it, and a new favicon can take days or weeks to appear after the next crawl. No favicon generator can force that, but getting these basics right removes the usual reasons it is skipped.

When someone adds your site to the home screen of an iPhone or iPad, iOS looks for the apple-touch-icon link and uses that picture. The package makes it at 180 by 180 pixels, the size current Apple devices use, and iOS scales it for older or smaller screens.

This icon is always a full square with a solid background, because iOS rounds the corners itself and fills any transparent area with black. If you chose a Colour or Gradient background, that is used. If you chose Transparent, the icon gets white behind your artwork, so it never ends up on a black square by accident.

Android phones and Chrome on desktop use the web manifest to find icons when someone installs your site or adds it to the home screen. The package lists three: a 192 pixel icon for the home screen, a 512 pixel icon for the splash screen while the app starts, and a 512 pixel maskable icon.

Maskable icons solve a real problem. Android launchers cut icons into circles, rounded squares, teardrops and other shapes, and a normal icon can get its edges cut off. The maskable icon is a full square with a solid background and extra safe-zone padding, so the launcher can cut any shape and your artwork still sits fully inside it.

browserconfig.xml and mstile-150x150.png are for pinned sites in Internet Explorer 11 and the old version of Edge on Windows 8 and 10. Those browsers look for /browserconfig.xml in the root of your site, read the tile image and colour from it, and show a tile in the Start menu. Your theme colour is used as the tile colour.

Current Edge and Chrome on Windows use the normal favicon and the manifest instead, so these two files matter only for older setups. They are small and harmless to keep, but you can leave them out if you do not care about older Windows browsers.

favicon.ico is a small container that holds the same icon at 16, 32 and 48 pixels, each stored as a PNG inside the file. A browser or program reads the list inside and picks the size it needs. All modern browsers support this kind of ICO, and it is the one file worth keeping even on the most minimal site.

If you only need a plain icon file, not a whole website package, use PNG to ICO or JPG to ICO instead. Those tools turn a picture into a single .ico with more sizes, up to 256 pixels, and extra format options for Windows folders, shortcuts and programs.

Think of a favicon as a road sign rather than a poster. At 16 pixels you have 256 dots to work with, so one bold shape or letter beats a detailed scene every time. If your logo has a symbol and a name, use only the symbol.

Strong contrast matters more than exact brand colours. A mid-grey letter on a light grey square will blur into nothing in a busy row of tabs, while white on a strong colour stays visible. Test the icon among other tabs: it should be easy to find at a glance.

After uploading the files, open your site in a new private window, which ignores the old cached favicon. Check the tab in light and dark mode, add a bookmark, and if you can, add the site to a phone home screen to see the Apple or Android icon.

You can also open the files directly, for example yoursite.com/favicon.ico and yoursite.com/site.webmanifest, to confirm they load from the root and are not blocked or redirected. A browser's developer tools show the manifest and its icons under the Application tab, with warnings if a file is missing.

Browsers keep favicons in a cache for a long time, sometimes weeks, and they do not always check for a new one. When you change your icon, a hard reload (Ctrl+F5 or Cmd+Shift+R) or a private window shows the new one at once on your own computer, but visitors may see the old icon for a while.

To push the change faster, add a version to the file paths in your tags, such as /favicon.ico?v=2, and update the number each time you change the icon. Content delivery networks and site caches may need a purge too. Phones that already saved your site to the home screen keep the old icon until the shortcut is removed and added again.

Your logo, text and settings stay on your device. The picture is opened by your browser, drawn on a canvas in memory, saved as PNG and ICO files, and zipped, all with code that is already on the page. No part of your artwork is uploaded, and closing the tab clears it from memory.

Your choices, such as the text, font, colours, padding and app details, are saved in your browser's local storage so they are there next time. That data stays in your own browser too. Clear your site data if you want the tool to start fresh.

This favicon generator limits text to three characters, and only one image can be used at a time. The tool does not trace bitmaps into vectors, so favicon.svg is only made when you start from an SVG, and it is your file unchanged. There is no separate dark mode icon; choose colours that work on both tab colours instead.

Very small or blurry source pictures cannot be made sharp at large sizes. Emoji follow the look of your device's emoji font. Some site builders accept only one uploaded PNG, so the rest of the package is only useful where you can place files in your site root.

Before you publish, run through this short list. Is the 16px preview readable? Does the icon show on both the Light tab and Dark tab previews? Are the files in the root folder of your site, or do the tag paths match the folder you used? Are the tags in the head of every page, or in the shared header? Does the manifest name and short name read well? Does /favicon.ico open in the browser? If all six answers are yes, your icons are ready.