Favicon Generator

Create a favicon from letters, an emoji or your own picture and download every file browsers and phones need — ICO, PNG, SVG and the web manifest — in one free zip. No sign-up: your picture never leaves your browser.
Its first letter becomes the icon. Also used in the web manifest.
Leave it empty to use the first letter of the name, or type one or two characters or an emoji.
Shape
16 px
32 px
48 px
180 px

Your favicon files

  • favicon.ico16, 32 and 48 px in one file, for every browser.
  • favicon.svgSharp at any size, for current browsers.
  • favicon-16x16.png, favicon-32x32.png, favicon-48x48.pngThe small sizes as PNG.
  • apple-touch-icon.png180 × 180 px, for iPhone and iPad home screens.
  • android-chrome-192x192.png, android-chrome-512x512.pngFor Android and installed web apps.
  • site.webmanifestThe site name and icons for Android.
  • head-tags.htmlThe tags below, to paste into the page’s <head>.

Add the icons to your site

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="application-name" content="Acme Studio">
<!-- Created with Elfsight: https://elfsight.com/tools/favicon-generator/ -->

  1. Click Copy code above to copy it.
  2. Unzip the files and upload them to your site’s root folder, so that yoursite.com/favicon.ico opens the icon.
  3. Open the page’s HTML file or the template every page uses.
  4. Paste the code inside <head>, before the closing </head>.
  5. Save and upload the page.

Where to upload a favicon on your platform

Most site builders add the favicon tags for you. Upload a square image in the place below rather than editing the page code.

WordPress

  1. Prepare a square PNG at least 512 × 512 px.

  2. WordPress 6.5 or later: go to Settings → General and click Choose a Site Icon.

  3. Older versions: go to Appearance → Customize → Site Identity and choose the Site Icon.

  4. Select your image and save.

Official guide:WordPress: create a favicon

Wix

  1. A custom favicon needs a Premium plan and a connected domain, and the site must be published.

  2. In your dashboard, go to Settings → Website settings.

  3. Under Favicon, click Upload Image and choose your file.

  4. Save your changes.

Official guide:Wix: adding a favicon

Shopify

  1. In your Shopify admin, go to Online Store → Themes and click Edit theme.

  2. Open Theme settings (gear icon), then Logo or Favicon, depending on your theme.

  3. Under Favicon image, click Select image and choose your file.

  4. Click Save. The favicon shows on your live store, not in the theme editor preview.

Official guide:Shopify: add a favicon

Squarespace

  1. Open the Favicon panel in your site settings.

  2. Upload a PNG between 100 × 100 and 300 × 300 px, under 100 KB. ICO files aren’t accepted.

  3. Optionally add a dark mode version.

  4. Click Save.

Official guide:Squarespace: add a favicon

Webflow

  1. Go to Site settings → General → Icons.

  2. Click Upload icon and choose one square image. Webflow makes the other sizes from it.

  3. Click Apply.

  4. Publish the site.

Official guide:Webflow: favicons and webclips

HTML

  1. Upload the generated files to your site’s root folder.

  2. Paste the generated <link> tags inside <head> on every page, or at least on the home page.

  3. Make sure the files open in a browser, for example /favicon.ico.

  4. Clear your browser cache to see the new icon.

Official guide:Google: favicons in search results

Why Google doesn’t show your favicon

Google shows a favicon next to your result only if it can find and fetch it from your home page. Check these points from Google’s favicon guide:

  • The tag is on the home page. Google reads the <link rel="icon"> tag in the <head> of your home page. shortcut icon, apple-touch-icon and apple-touch-icon-precomposed also work.

  • It’s square. 1:1, at least 8 × 8 px. Google recommends larger than 48 × 48 px so it looks sharp.

  • The format is supported: ICO, PNG, GIF, JPEG, BMP, PPM or TIFF. SVG isn’t on Google’s list, so add an ICO or PNG next to an SVG icon.

  • Google can crawl it. robots.txt must not block the icon file (for Googlebot-Image) or your home page (for Googlebot).

  • The URL stays the same. Don’t change the favicon address often.

  • One favicon per host name. example.com and shop.example.com can have different icons. example.com/shop can’t; it uses the site’s icon.

  • It represents your brand. Google replaces inappropriate icons with a default one.

Changes appear after Google recrawls your home page, which can take days or weeks. You can request indexing of the home page in Search Console’s URL Inspection tool. Some site builders still say the size must be a multiple of 48 px. That was Google’s old rule, and those sizes still work fine.

How to add a favicon to your site

  1. Design the icon

    Use one or two letters or an emoji, or upload a square logo.

  2. Download the zip

    It has favicon.ico, PNG sizes for phones, an SVG, the web manifest and the HTML tags.

  3. Upload the files

    Put the files in your site’s root folder and paste the tags into the <head>. Website builders usually have a favicon field — upload the 512 px PNG there.

Frequently asked questions

More SEO & Schema Tools

Meta Tag Generator

Title, description, Open Graph and Twitter tags in one go.Meta Tag Generator