Favicon Generator

Generate a set of web site favicons from a given image.

Share on Social Media:

Our free online Favicon Generator allows you to create a set of necessary favicons from an uploaded image. 

How to Use

Upload Your Image:

  • Click the "Select a File" button to upload your PNG, GIF, or JPEG file.
  • The generator will automatically process your image.

Generate Favicons:

  • Click the "Generate Favicons" button.
  • The Favicon Generator will create a set of favicons and display the list of files under the Result section of the page.

Download All:

  • Once generated, click "Download All" to download a zip file containing all the favicons.
  • Unzip the file and integrate the favicons into your website.

 

Potential Limitations and Image Requirements:

  • Image Quality:  For optimal results, upload a high-resolution image with the dimensions of at least 192x192 pixels. 
  • Aspect Ratio: To avoid distortion, use square images (with aspect ratio 1:1).

 

Understanding Favicons

Favicons, short for "favorite icons," are small icons associated with a website. They appear in browser tabs, bookmarks, and browser address bars, providing brand recognition and highlighting your site's identity across various devices and browsers.

Adding Favicons to Your Website

Upload the generated favicon files to your website's root directory.

Include the following code in the HTML ‹head› section of every page:

‹!-- For all browsers --›
‹link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"›
‹link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"›
‹!-- For Android and Chrome --›
‹link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png"›
‹link rel="icon" type="image/png" sizes="48x48" href="/android-icon-48x48.png"›
‹!-- For iPad and iPhone →
‹link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"›
‹link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png"›
‹link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"›

 

For more details see:

How to add a favicon to your website — The modern browser guide

Configuring Web Applications- Specifying a Webpage Icon for Web Clip 

App icons | Apple Developer Documentation

Define Website Favicon for Search Results | Google Search Central | Documentation

Define icons and a theme color - Microsoft Edge Development

The site's favicon is not displayed in Bing search results - Microsoft Community Hub