Custom Favicons
How to generate a favicon?
You can generate your favicon by entering the initial letter(s) of your website and choose the favicon design you like. You can either download the favicon directly or click on the edit button to further customize the font, color, and shapes of your favicon. If you already have a logo or image, you can also click on the IMAGE→ICO link to generate a favicon from any image.
How to download and install my Favicon?
Click on the download button and choose “Favicon.ico” to download the zip file containing all favicon images.
- android-chrome-192×192.png
- android-chrome-512×512.png
- apple-touch-icon.png
- favicon-16×16.png
- favicon-32×32.png
- favicon.ico
- site.webmanifest
Upload the files to the root directory of your website and add the following to the head section of your HTML code:
More Favicon FAQs
👉 What is a Favicon?
Favicon is also known as a website icon, URL icon, or bookmark icon, is a file containing one or more small icons, associated with a website or webpage. When a browser opens a webpage, it will display the favicon image in front of the URL address bar to help users quickly identify the webpage he/she is currently visiting.
👉 I already have a favicon file and how do I install it?
Step1: Name your favicon file
Rename your favicon file to favicon.ico (This is the filename a web browser will look for when opening your website)
Step2: Upload your favicon file
Upload your favicon.ico file to the root directory of your website. yourwebsite.com/favicon.ico
Step3: Test your favicon setup
Open your website on a new browser window and you should see your favicon in front of the address bar.
Step 4: Debugging
Why isn't my favicon being displayed?
The most likely scenario is that your favicon is misnamed or was installed in the wrong directory. Make sure that your favicon is accessible at http://websitename.com/favicon.ico
Why isn't it displaying the latest version?
Web browsers cache the favicon and sometimes display older versions. You may need to clear your cache if seems like your favicon is not updating. This will force the browser to display the latest version of your favicon.
👉 Why do I need a favicon?
Favicon is used to help users quickly identify your website. As part of you overall branding, a well designed favicon can help your website standout from the crowd and leave a strong impression among your visitors.
👉 Which favicon file format should I use?
ICO - favicon.ico
ICO format is the original favicon file format created by Microsoft. It is still the best supported standard because it allows multiple images to be stored within one file (16x16, 32x32 and 48x48) and browsers can choose the best image according to the user device.
PNG - favicon.png
PNG is also another popular favicon file format because it’s a popular image format. When you use the PNG format, all you have to do is make sure you have a square file and the browser will automatically scale your image depending on the place it is being displayed. However, IE5 ~ IE10 does not support this format.
SVG - favicon.svg
SVG is a vector file format therefore provides the best image quality. However, not all browsers support this file format and currently only Chrome, Firefox, and Opera support favicon in SVG format.
👉 What’s the popular image resolutions for favicons?
Make sure your favicon image is a square (1:1).
For ICO, recommended resolutions are 16x16, 32x32, 48x48 pixels.
For PNG, we recommend 500x500 pixels for a good balance between file size and image quality.
👉 Will Favicon improve my website SEO?
The answer is Yes. Because a well designed favicon can increase your Click Through Rate (CTR), and this is one of many metrics used by search engines to determine the ranking of your webpage.
