Skip to content

Menu

Loading languages…

Machine translation by Google Translate. It can be wrong, so the English articles are the originals. Your choice is saved in a cookie on this device.

Follow Akif

SERP TimesSERP Times

Loading languages…

Machine translation by Google Translate. It can be wrong, so the English articles are the originals. Your choice is saved in a cookie on this device.

    Type at least two letters to search news and guides.

    to open · ↑↓ to move · Esc to close

    Free tool · Images

    Favicon Generator

    Turn one image into favicon.ico, PNG icons for browsers, iPhones and Android, and the HTML tags to add them.

    Runs in your browser: nothing you type is uploaded.

    A square logo at least 512 × 512 px works best. It stays on your device and is never uploaded.

    If the image isn't square

    Your icons

    Choose an image and your favicon files appear here, ready to download.

    Add them to your site

    Upload the files to the root of your site, then paste these tags inside the <head> of your pages:

    <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" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

    Save this as site.webmanifest in the same place (change the name):

    {
  "name": "My Site",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

    How to use it

    1. 1

      Choose a square logo, ideally 512 × 512 pixels or larger. PNG, JPG, WebP, GIF and SVG files work.

    2. 2

      Choose whether to crop a non-square image or fit it inside the square, and pick a background for the iPhone icon.

    3. 3

      Download the files you need, or all of them, and upload them to the root of your site.

    4. 4

      Copy the HTML tags into the head of your pages and save the manifest as site.webmanifest.

    Why it matters

    A favicon shows in browser tabs, bookmarks and, on mobile, next to your result in Google. A recognizable icon makes your site easier to spot in a long list of tabs or results.

    Google asks for a square favicon in a multiple of 48 pixels, such as 48, 96 or 144, in a format its crawler can fetch. The .ico file made here holds 16, 32 and 48 pixel versions, and the larger PNGs cover iPhones and Android.

    iPhones fill transparent areas of the home screen icon with black, so that icon gets a solid background you can choose. All the work happens in your browser, so your logo isn't uploaded.

    Frequently asked questions

    What size should my source image be?

    At least 512 × 512 pixels and square. Small icons are made by shrinking, which looks sharp, while enlarging a small image makes it look soft.

    Which favicon files do I need?

    At minimum favicon.ico and a 180 px apple-touch-icon. The 192 and 512 pixel PNGs are for Android and installable web apps, listed in a web manifest.

    Where do I put the files?

    In the root folder of your site, so favicon.ico loads at https://example.com/favicon.ico. Then add the link tags to the head of your pages.

    Why does my favicon look different in Google?

    Google crawls favicons on its own schedule, so a new icon can take days or weeks to appear. It also may ignore icons it can't fetch or that are inappropriate.

    Can I use an SVG as the source?

    Yes, an SVG with a width and height gives the sharpest result. The tool turns it into PNG and ICO files, since those work everywhere.

    Related guides

    More SEO guides