My Tool Studio
Image

Favicon Generator

This favicon generator turns a logo, a few letters or an emoji into a complete set of site icons in a single ZIP. You get favicon.ico (with 16, 32 and 48 pixel versions inside), a favicon.svg for text, emoji and SVG sources, PNG favicons from 16 x 16 to 512 x 512, a 180 pixel apple-touch-icon, 192 and 512 pixel Android icons, a maskable icon and a site.webmanifest. The page gives you HTML tags and a Next.js snippet with your own file path. Text mode offers system fonts and Google Fonts on a square, rounded or circle shape. Check the result in light and dark browser tabs, a Google result and home screens. Your logo is processed in your browser and is not uploaded.

Always freeNo sign upRuns in your browser
Make the favicon from

How to use

01

Choose the source

Upload a PNG, JPG, WebP or SVG logo, paste one with Ctrl+V, or switch to Text or Emoji and type the letters or pick an emoji, colours and shape.

02

Adjust and preview

Set padding and background, fill in the site name, colours, display mode and start URL for the manifest, and check the tab, Google result and home screen previews.

03

Download and install

Click Download favicon pack (ZIP), copy the files to your site, and paste the HTML tags or Next.js code shown on the page into your project.

Why Favicon Generator

Favicon files in the pack and where each is used

Every file in the ZIP has a job. You do not have to use all of them, but including the full set means each browser and device finds an icon it can use.

FileSizeUsed by
favicon.ico16, 32, 48 px in one fileOlder browsers, tools that request /favicon.ico directly
favicon.svgVectorModern browsers, sharp at any size (text, emoji and SVG sources)
favicon-16x16.png, favicon-32x32.png16 and 32 pxBrowser tabs on standard and high-density screens
favicon-48x48.png to favicon-512x512.png48 to 512 pxSearch results, shortcuts, bookmarks
apple-touch-icon.png180 x 180iPhone and iPad home screen
android-chrome-192x192.png, android-chrome-512x512.png192 and 512 pxAndroid home screen, web app install
maskable-icon-512x512.png512 x 512Android adaptive icon shapes
site.webmanifestJSONName, icons, colours, display mode and start URL

Adding the favicon to WordPress, Shopify or a static site

On a static site or a framework such as Next.js, copy the files into the folder that is served from the site root (often public), then paste the tags into your main layout's head, or use the Next.js tab. On WordPress, you can set a Site Icon under Appearance, Customize, Site Identity, which generates its own sizes, or upload the files with your host's file manager and add the tags through your theme or a header plugin. Shopify has a favicon setting in the theme editor that takes a single image.

After you deploy, open a new private window and visit your site. If the old icon still shows, it is almost always the browser cache, not your files. Search engines update the favicon in results on their own schedule, which can take days or weeks.

Common questions

What size should a favicon be?
Browsers mostly show favicons at 16 x 16 and 32 x 32 pixels, so those sizes matter most for tabs. Google search results use 48 pixels or larger, Apple devices use a 180 x 180 apple-touch-icon, and Android and installed web apps use 192 x 192 and 512 x 512 from the manifest. This generator makes all of them from one source.
Do I still need a favicon.ico file?
It is still worth including. Some browsers, RSS readers and tools request /favicon.ico directly without reading your HTML. The pack includes a favicon.ico with 16, 32 and 48 pixel images inside, next to the PNG and SVG versions modern browsers prefer.
How do I add a favicon to my website HTML?
Copy all files from the ZIP to the folder your site serves them from, usually the root. If you use a subfolder such as /icons, type it into Folder the files will live in first, so the paths match. Then paste the tags from the HTML tab into the head of every page, or into your site template.
How do I make a favicon from text or initials?
Choose Text or initials, type one to three letters, and pick a font, text colour, background colour and shape. One or two bold letters stay readable at 16 pixels. The pack includes a favicon.svg version of the text icon as well as all PNG sizes.
Can I use an emoji as a favicon?
Yes. Choose Emoji and type or pick one. It is drawn with your device's emoji font, so it takes the Apple, Windows or Google style of the device you use, and you can put it on a coloured shape or keep the background transparent.
How do I add the favicon in Next.js?
Copy the files into your public folder and open the Next.js tab. It gives you a metadata object with the icons and manifest, plus a viewport export with your theme colour, to paste into app/layout.tsx.
What is a maskable icon in the favicon pack?
Android crops home screen icons into circles, squircles or other shapes. maskable-icon-512x512.png has a solid background and extra padding so the important part stays inside the safe zone whatever shape the phone uses. The manifest marks it with purpose maskable.
Why is my new favicon not showing in the browser?
Browsers cache favicons aggressively. Open the icon's URL directly, for example yoursite.com/favicon.ico, do a hard refresh, or try a private window. Also check that the files sit at the paths used in the link tags and that your server returns them without a redirect.
What happens to a logo that is not square?
It is scaled to fit inside the square and centred, with the rest left transparent or filled with your background colour. Nothing is stretched or cropped. Add Padding if the logo touches the edges and looks cramped in the tab.
Why does the apple-touch-icon have a background colour?
iPhones and iPads fill transparent areas of a home screen icon with black, which rarely looks good. So the apple-touch-icon.png always gets a solid background: your chosen fill colour, or white if you left the background transparent.

More Image tools

View all

Screenshot Editor

Annotate, frame and redact screenshots

Image

Geotag Photos Online

Add or remove GPS in photos, batch

Image

Image Compressor

Compress images by quality or to a KB target

Image

Image Resizer

Resize in px, %, cm or inches, with KB limit

Image