- Tools /
- Favicon generator
Favicon generator
Why create a favicon?
- Website recognition
Favicon icons help make the tab with your site recognizable, which is important when a user opens several resources at once. With a noticeable favicon, your site will not get lost among other open tabs.
- Informative
The favicon should match the color scheme of the site and the theme of the company. You can use, for example, the logo or the first letter of the name, or a simple but original graphic image, so that a user, seeing the icon of your site, can immediately determine what is on the tab.
- Brand memorability
If you use a logo or its recognizable fragment as a favicon, site users will see it often and remember it faster.
How to use the favicon creation service?
Select an image: Press the 'Select image from computer' button on our service. Upload a square image with a size of 512x512 pixels, in one of the following formats: jpg, jpeg, png, or gif.
Create a Favicon: After you have uploaded the image, press the 'Create Favicon' button on our service. This will start the process of creating an icon.
Preview and download: The service will provide you with an example of how your favicon will look. If you like the result, you can download the ready file. You will receive a favicon.ico file for your site.
Installation on the site: After downloading the files, upload them to your site. Insert the corresponding code into the body of your web page's HTML to display the icon correctly.
How to set up a favicon on your website
Place your image in the root directory of your website named as favicon.ico. This will form a URL in the style of https://sitename.com/favicon.ico, which will be the location of your image. If you intend to use distinct favicons for different sections of your website, this path will be essential for user navigation. If you plan to use one favicon for the entire website, the path is not necessary.
Upload the following files to your server:
- favicon.ico
The primary icon file that will be displayed in all browsers.
- apple-touch-icon.png
Icon for Apple devices that will appear on the home screen.
- favicon-32x32.png
Icon for browsers that utilize 32x32 pixels.
- favicon-16x16.png
Icon for browsers that utilize 16x16 pixels.
- android-chrome-192x192.png
Icon for Android devices.
- android-chrome-512x512.png
Icon for Android devices.
- site.webmanifest
The manifest file containing information about your website.
Next, copy and paste the reference tags below into the head section of your HTML code:
<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" />
Don't forget to also edit your website's name and paths in the site.webmanifest file by opening it in a text editor.
Frequently Asked Questions
Why isn't my favicon appearing in search results?
Indexing favicons on Yandex can take between a week to a month. Google does not display favicons in search results.
Does having a favicon impact search engine ranking factors?
Icons do not directly affect SEO or how search engines view your site, but they might indirectly influence traffic and click-through rates by making the snippet in the search results more appealing.
Is it necessary to create icons of multiple sizes?
You can install a single favicon for all display variants, but there's a risk it may appear blurry and low quality on certain devices.
How can I check how search engines see my favicon?
You can check how search engine bots see your favicon by using the following URLs for Google (https://www.google.com/s2/favicons?domain=domain_name).