Favicon Generator - Make a Favicon from Image or Text

🔗 Related Tools

What is a Favicon Generator?

A favicon is the small icon that represents your website. You see it in the browser tab next to the page title, in bookmarks and in the history list. On phones, a larger version of it is used when someone adds your site to the home screen. A favicon generator turns your logo, a picture, a letter or an emoji into the icon files that browsers and devices ask for, so you do not have to resize them one by one.

This tool creates the icons in the standard sizes, shows you how the favicon looks in a browser tab before you download, and gives you the HTML code to add to your site.

How to Make a Favicon

1. Upload a PNG, JPG or SVG image, or type a short text or an emoji.
2. Look at the live preview in the browser tab mock-up. If your image is wide or tall, use the crop option to cut a square from the center.
3. Click Generate to create all the sizes.
4. Click Download All (.zip) to save every file in one go.
5. Click Copy on the HTML code box and paste the code into the head section of your website.
6. Upload the icon files to your website, usually to the root folder, and refresh the page to check the result.

What You See on the Page

Item	Meaning
Upload area	Add a PNG, JPG or SVG image
Text or emoji input	Make a favicon from a short text or an emoji instead of an image
Browser tab preview	A mock-up of a browser tab that shows your favicon next to a page title
Crop option	Cuts a square from the center of an image that is not square
Generate	Creates the icon in all the standard sizes
Download All (.zip)	Saves all generated icons in one ZIP file
HTML code box	Ready-made link tags for your website, with a Copy button

The tab preview is a guide. Real browsers draw tabs a little differently, and light and dark themes change how an icon looks, so check your icon on your own site after you upload it.

Favicon Sizes the Tool Creates

Size	Used for	Example file name
16x16	Browser tab on normal screens, bookmarks	favicon-16x16.png
32x32	Browser tab on high-density (retina) screens, taskbar and shortcuts	favicon-32x32.png
48x48	Desktop shortcuts on some systems, and a base size for search result icons	favicon-48x48.png
180x180	Apple touch icon: iPhone and iPad home screen	apple-touch-icon.png
192x192	Android home screen and web app manifest	android-chrome-192x192.png
512x512	Android splash screen and large install icon	android-chrome-512x512.png

The files are PNG images. Browsers pick the size that fits best for the place where the icon is shown.

How to Add a Favicon to Your Website

Paste these lines inside the <head> section of your pages. If your site uses a shared header or a template, add them there once.

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

• The path starts with /, which means the root of your site. If you upload the files to another folder, change the paths, for example /images/favicon-32x32.png.
• Upload the icon files to the same place that the paths point to.
• After you upload, open the file address in your browser, for example yoursite.com/favicon-32x32.png, to check that the image loads.

Android Icons and the Web App Manifest

The 192x192 and 512x512 icons are used by Android and by installable web apps. They are not listed in link tags. Instead, they are listed in a small JSON file called the web app manifest, which you create yourself and link from your pages. Here is an example:

{
  "name": "My Website",
  "short_name": "My Site",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Save it as site.webmanifest in the root folder and add this line inside the head section:

<link rel="manifest" href="/site.webmanifest">

Change the name and colors to match your site. If you do not plan to offer your site as an installable app, the manifest is optional, but it is still a good idea for a proper icon on Android.

Favicon File Formats: PNG, ICO and SVG

Format	What to know
PNG	Works in current browsers when declared in a link tag. Supports transparency. This tool creates PNG files
ICO	The older favicon format. Browsers and some tools still request a file called favicon.ico in the site root when no icon is declared, so many sites include one
SVG	A sharp, scalable format that current browsers can also use. You can upload an SVG here as your source image to get sharp PNG files
JPG	Works as a source image, but it has no transparency, so the icon always has a solid background

Make a Favicon from Text or an Emoji

If you do not have a logo yet, a favicon can be a letter, two letters or an emoji. Type it in, check the preview and generate.

• Keep the text very short. One or two letters stay readable at 16 by 16 pixels. A whole word does not.
• Use a bold, simple style. Thin letters disappear at small sizes.
• Emoji look different on different devices. Apple, Windows and Android each draw them in their own style, and your icon uses the style of the device you are working on.
• Check the contrast. Dark text on a light background, or the other way round, is easiest to read.

Crop Images That Are Not Square

A favicon is always a square, so a wide or tall image has to be cut or resized. The crop option cuts a square from the center of your image. Anything outside the center square is removed, so keep the important part of your logo in the middle. If a wide logo does not fit well, make a simple square version of it, such as just the symbol or the first letter, because a full wordmark is too small to read in a tab.

Tips for a Good Favicon

• Start with a big, square image. Use at least 512 by 512 pixels, or an SVG. A small image that is enlarged looks blurry.
• Keep it simple. A tab icon is tiny, and 16 by 16 pixels leaves very little room for detail.
• Use one strong shape and high contrast. It must stand out against both light and dark browser themes.
• Avoid small text and thin lines. They turn into a blur at small sizes.
• Use a solid background for the Apple touch icon. Transparent areas may be shown as black on iPhone and iPad.
• Keep the important part in the center. Some devices round or crop the icon.
• Match your brand. Use the same color or symbol as your logo, so people recognise your site in a row of tabs.
• Check it on your live site. Look at it in light and dark mode and on a phone.

Favicon Not Showing? Try This

• Check the file address. Open the icon file directly in your browser. If it does not load, the file is missing or the path is wrong.
• Check the paths in your code. A path that starts with / points to the site root. A wrong folder name is the most common mistake.
• Check the code position. The link tags must be inside the <head> section.
• Clear the cache. Browsers keep favicons for a long time, so an old icon can stay. Do a hard refresh, clear the browser cache or open the page in a private window.
• Add a version to the file name. Changing favicon-32x32.png to favicon-32x32.png?v=2 in your code makes browsers fetch a fresh copy.
• Be patient with search engines. A new favicon can take a while to appear in search results.
• Check that nothing blocks the file. Security settings or a robots rule that blocks the icon file can stop it from being used.

Favicons in Search Results

Google can show a website's favicon next to its search results on phones and computers. Its guidelines ask for a square icon whose size is a multiple of 48 pixels, which is why a 48x48 file is included in the ZIP. The icon also has to be easy to recognise at a small size. Whether and when Google shows your icon is decided by Google, so there is no way to guarantee it, and a new icon can take time to appear.

Common Mistakes

• Using a stretched image: Do not squeeze a wide image into a square. Crop from the center instead.
• Using a logo with small text: It becomes unreadable at 16 by 16 pixels.
• Forgetting the files: Pasting the code without uploading the icons gives no favicon.
• A wrong path: The href in the link tag must match where you uploaded the file.
• Putting the code outside the head section: The link tags need to be in the head.
• Expecting an instant change: Browser caches can keep the old icon for a while.
• Leaving the Apple touch icon transparent: It may appear with a black background.
• Using an image you do not have rights to: Use only your own logo or artwork you may use.

Privacy

• The icons are created in your browser, and your image is not sent to our server.
• We do not save your image, your text or your icons.
• The ZIP file is created on your own device when you click Download All.
• Use only images that you own or have the right to use on your website.

Frequently Asked Questions

How do I make a favicon from an image?

Upload a PNG, JPG or SVG image, check the live preview in the browser tab mock-up, then click Generate. The tool creates the icon in all standard sizes. Click Download All to get a ZIP file, and copy the HTML code into the head of your website.

What is a favicon?

A favicon is the small icon that represents your website. It appears in the browser tab, in bookmarks and history, and, in larger sizes, on phone home screens. It helps people find and recognise your site quickly.

Which favicon sizes does the tool create, and why?

It creates 16x16 and 32x32 for browser tabs on normal and high-density screens, 48x48 for desktop shortcuts and as a base size for search results, 180x180 for the Apple touch icon on iPhone and iPad, and 192x192 and 512x512 for Android and installable web apps.

How do I add the favicon to my website?

Upload the generated files to your website, usually to the root folder, then paste the HTML code from the code box inside the head section of your pages. If you put the files in another folder, change the href paths to match. The 192 and 512 Android icons are normally listed in a web app manifest file that you add yourself.

Why does my favicon not show, or why does the old one still appear?

Browsers keep favicons in a cache for a long time. Open the icon file address directly to check that it loads, make sure the paths in your code are correct, then do a hard refresh or clear the browser cache. Adding a version to the file name, such as favicon-32x32.png?v=2, also forces a fresh copy. Search engines can take longer to show a new icon.

Can I make a favicon from text or an emoji?

Yes. Type a short text, such as one or two letters, or pick an emoji, and the tool turns it into a favicon. Emoji look different on different devices because each system draws them in its own style, and the icon is drawn with the style of the device you are using.

What happens if my image is not square?

Favicons are square. Use the crop option to cut a square from the center of a wide or tall image. Parts at the edges are cut off, so keep the important part of your logo in the middle.

Which image formats can I upload?

You can upload PNG, JPG and SVG images. For the sharpest result, start with a square image of at least 512 by 512 pixels, or an SVG. A small image that is enlarged looks blurry. JPG has no transparency, so a JPG favicon always has a solid background.

Do I still need a favicon.ico file?

Current browsers can use the PNG icons that are listed in your link tags. Some older browsers and tools still ask for a file called favicon.ico in the root of the site if no icon is declared, so many websites also add one. This tool creates PNG files.

What is the Apple touch icon, and why use a solid background?

The Apple touch icon is the 180x180 image that iPhones and iPads use when someone adds your site to the home screen. Apple rounds the corners itself. Transparent areas in this icon may be shown with a black background, so it is best to use a solid background color behind your logo.

What are the 192x192 and 512x512 icons for?

They are used on Android and by installable web apps, for the home screen icon and for the splash screen. They are listed in a web app manifest file. Keep the important part of your logo in the middle, because some devices crop the edges or round the icon.

Will my favicon show up in Google search results?

Google can show a site's favicon next to its results. Its guidelines ask for a square icon whose size is a multiple of 48 pixels, which is why a 48x48 file is included. Whether and when Google shows your icon is decided by Google, and a new icon can take time to appear.

Is my image uploaded to a server?

No. The icons are created in your browser, and your image is not sent to our server.

Is this favicon generator free, and can I use any image?

The tool is free and needs no signup. Use only images, logos and emoji artwork that you own or have the right to use for your website.