Favicon Generator: Create a favicon online for free

A favicon is a website's small icon. It appears in browser tabs and bookmarks, and as an app icon on smartphone home screens. A website needs several sizes to keep it sharp everywhere: the Favicon Generator creates 16, 32 and 48 px icons in favicon.ico, a 180 px icon for iOS, and 192 and 512 px icons for Android.

The Favicon Generator is free and requires no account. Your image is not uploaded: generation runs entirely through the Canvas API in your browser. Nothing is sent to or stored on a server. Images can be up to 15 MB.

You get favicon.ico containing 16, 32 and 48 px icons in one file, apple-touch-icon.png (180 × 180), android-chrome-192x192.png, android-chrome-512x512.png and site.webmanifest. Download each file individually or together as favicon-package.zip. You also get a 6-line HTML snippet for your page's <head>. It includes all the files and ends with the theme color—for #18e888, for example, it uses <meta name="theme-color" content="#18e888">.

There is no single size: browser tabs display 16 × 16 px, the Windows taskbar uses 32 × 32 px, and File Explorer and shortcuts use 48 × 48 px. iOS uses 180 × 180 px for the home screen, while Android uses 192 × 192 and 512 × 512 px. The generator creates all these sizes from one image. Because fine details and lots of text become illegible at 16 × 16 px, the preview shows you the 16, 32 and 48 px icons at actual size and the larger icons scaled down before you add the files to your site.

Upload your image in the “Upload Image” tab. Drag to adjust the crop, zoom between 50 and 250%, and optionally trim transparent edges automatically. The generator packs 16, 32 and 48 px icons into a real multi-size favicon.ico and also creates PNG icons for iOS and Android. A square image of at least 512 × 512 px works best, as that is the largest size generated.

Yes. In the “Text or Emoji” tab, you can enter up to 4 characters; 1–2 letters or a single emoji work best. Choose a background color, text color, shape (rounded square, square or circle), and text size between 25 and 80%. This produces the same files as an uploaded image.

Upload favicon.ico, apple-touch-icon.png, both Android Chrome icons and site.webmanifest to your website's root directory, because the HTML snippet references paths such as /favicon.ico and /site.webmanifest. Then copy the snippet into your pages' <head>. If you do not edit the <head> yourself—for example, in WordPress—upload a site icon there instead, such as android-chrome-512x512.png. The tool does not connect directly to your website or CMS.

It always fills the Apple touch icon's background because iOS does not handle transparency there reliably. If “Transparent Background” is turned off, it also fills favicon.ico and the Android icons. It is also used as theme_color and background_color in site.webmanifest and in the theme-color meta tag in the HTML snippet.