Favicon Generator: ICO & PNG Favicons from an Image, Text or Emoji

A favicon is the small square icon a browser shows for your site. The same image, in different sizes, is reused in several places:

• Browser tabs, bookmarks, history and the address bar suggestions.
• Desktop shortcuts and pinned tabs.
• The home screen of a phone when someone saves your site there.
• Google search results, next to your site name.

This generator creates a favicon.ico, six PNG files and a web app manifest, which together cover browser tabs, Google search results, iOS and Android home screens and installable web apps. The table shows what each file is for, so you can decide which ones your site needs.

The download is a ZIP with all of these files plus the HTML tags as a text file, and each icon can also be downloaded separately. The favicon.ico holds the 16, 32 and 48 pixel images as PNG data inside one ICO container, which every current browser reads. Icons are drawn from your source at each size, so a small uploaded image will look soft at 512 pixels: start from a source of at least 512 x 512, or from an SVG. If your logo is an SVG, the SVG to PNG converter gives you a sharp raster copy for other uses.

Upload the files to the root of your site and add these tags inside <head>. This is the same snippet the tool gives you to copy:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Keep favicon.ico in the site root even though it has its own tag: browsers and other software request /favicon.ico on pages that have no icon tags at all, such as PDFs or error pages.

The web app manifest for Android and PWAs

The 192 and 512 pixel icons are not referenced from the HTML directly. They are listed in site.webmanifest, which the page links with <link rel="manifest" href="/site.webmanifest">. The generated file is plain JSON; open it in a text editor and replace the placeholder name with your own site name:

{
  "name": "Your Site Name",
  "short_name": "Your Site",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#4f46e5",
  "background_color": "#ffffff",
  "display": "standalone"
}

Favicon tags sit next to your title and description tags; you can build those with the meta tags generator.

Google shows a favicon beside each result, and it has its own requirements, separate from what browsers accept. In summary, Google's guidelines ask for the following:

• A square image. Google recommends an icon larger than 48 x 48 pixels; earlier versions of the guideline asked for a multiple of 48 (48, 96, 144 and so on). Very small icons may be accepted but look blurry.
• A link tag on the home page. Google reads rel="icon" and rel="apple-touch-icon", among others.
• A stable URL. Do not change the favicon file address often.
• Crawlable files. Neither the home page nor the icon file may be blocked in robots.txt.
• One favicon per hostname. A subdomain can have its own; a subfolder cannot.

With the files from this tool, favicon.ico (which includes a 48 x 48 image), favicon-48x48.png and the 180 x 180 apple-touch-icon.png meet Google's size recommendation; the 16 and 32 pixel files are below it. Google decides on its own whether and when to show a favicon, and updates can take from several days to a few weeks after a recrawl of your home page. You can check that nothing is blocked with the robots.txt generator.

Browsers cache favicons far more aggressively than normal images, so an old icon can stay visible long after you replaced the file. Work through these in order:

1. Open the icon address directly, for example yoursite.com/favicon-32x32.png. If you see the old image or a 404 error, the problem is on the server, not in the browser.
2. Hard-refresh the page (Ctrl+F5, or Cmd+Shift+R on a Mac) and try a private window.
3. Add a version to the address in the link tag, such as /favicon-32x32.png?v=2. A new URL forces every browser to fetch the file again.
4. Check that the href paths match where the files really are. A leading slash means the site root.
5. If you use a CDN or a caching plugin, purge its cache as well.
6. Look for a second, older rel="icon" tag added by a theme or plugin that overrides yours.

Proper favicon placement is essential for browsers to find and display your icons correctly. The traditional location for favicons is your website's root directory—the same folder where your main index.html file lives. When you download the ZIP file from our generator, you'll get the icon files and a web manifest, all of which belong in that root folder.

your-website/
├── index.html
├── favicon.ico          ← Fallback browsers request automatically (16, 32, 48)
├── favicon-16x16.png    ← Browser tabs
├── favicon-32x32.png    ← Taskbar shortcuts
├── favicon-48x48.png    ← Minimum size Google recommends
├── apple-touch-icon.png ← iOS home screen (180x180)
├── icon-192.png         ← Android home screen
├── icon-512.png         ← Installable web apps (PWA)
└── site.webmanifest     ← Lists the 192 and 512 icons

For most modern websites and frameworks, placing files in the root directory works automatically. However, if you're using a framework like Next.js, React, or Vue, you may need to place these files in a "public" folder or configure your build process to copy them to the output directory. Always test your favicon by visiting your live website and checking if the icon appears in the browser tab.

Some hosting platforms and CMS systems have specific locations for favicon files. For WordPress, you can usually upload favicons through the Customizer under "Site Identity." For platforms like Squarespace or Wix, there are dedicated favicon settings in the admin panel. If you're managing your own server, ensure your server configuration allows access to favicon files from the root directory.

Favicons may be small—just 16x16 or 32x32 pixels—but they have an outsized impact on how users perceive your website. A professional favicon is one of the first things users notice, appearing in browser tabs, bookmarks, history, and increasingly in search engine results. It's a small investment that pays dividends in brand recognition and perceived professionalism.

When users have multiple tabs open, your favicon becomes the primary way they identify your site. A distinctive, well-designed favicon helps users quickly locate your tab among dozens of others. This reduces frustration and keeps users engaged with your content rather than hunting for your website. A site that is easy to recognize in the browser history and bookmarks is also easier to come back to.

Search engines now display favicons in search results on mobile devices. This means your favicon appears alongside your website listing, competing directly with other results for user attention. A professional favicon can increase click-through rates by making your listing stand out. Conversely, a missing or low-quality favicon can make your site appear unfinished or untrustworthy, potentially driving users to click on competitors instead.

For mobile users, favicons become even more important. When users add your website to their home screen, your Apple Touch Icon (180x180) becomes the app icon they see every day. A well-designed icon that looks great at this size reinforces your brand every time users glance at their phone. It creates a native app-like experience that increases engagement and return visits.

Trust signals matter in converting visitors to customers. A complete, professional-looking website with proper favicons, SSL certificates, and polished design elements conveys legitimacy and attention to detail. Users subconsciously notice these elements and are more likely to trust sites that appear professionally maintained. A missing favicon, while seemingly minor, can trigger doubt about whether a site is legitimate or well-maintained.

Creating a favicon used to require expensive design software and technical knowledge. Our free generator democratizes this process, allowing anyone to create professional favicons in seconds. Whether you're a solo entrepreneur, a small business, or a large enterprise, having a professional favicon is now accessible to everyone. Take advantage of this simple tool to elevate your brand and build user trust.