Generate Favicon From Image
Installation
First, use the download button to download the files listed below. Place the files in the root directory of your website.
- android-chrome-192x192.png
- android-chrome-512x512.png
- apple-touch-icon.png
- favicon-16x16.png
- favicon-32x32.png
- favicon.ico
- site.webmanifest
Next, copy the following link tags and paste them into the head
of your HTML.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <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="manifest" href="/site.webmanifest">
About the favicon generator
If you already have an image that you would like to use for a favicon on your website the this is the tool you need. The favicon generator will convert you image to a favicon. You can upload a PNG, JPG, or BMP and the favicon generator will output an ICO file.
For the best result you should upload an square image. You can use a standard image editing tool if you need to crop your image. Once your image is prepared upload it using the tool above. Next, verify that the preview image is to your liking. Finally, use the download button to export your favicon in ICO format.
Why do I need an ICO file instead of a PNG?
An ICO file is a special image file use by the browser. The unique feature of an ICO file is that it is multilayered. Each layer of the favicon holds a different size of the image. The common sizes for a ICO formatted favicon are 16x16px, 32x32px, and 48x48px.
For best compatibility web browsers can leverage the ICO file generated by the favicon generator. The browsers will use the different sizes for displaying in different areas of the website such as the bookmarks bar, the address bar, the browser tab, and as a desktop shortcut.
What types of images work best for the favicon generator?
The favicon generator works best with a simple icon, logo, or letter. Intricate or complex designs don't work well when they are resized using the favicon generator as much detail is lost. If your logo is very complex we recommend generating the favicon from text using the alternative generator.