The way that most people go about their online browsing is to have a selection of their favorite and most visited websites open on different tabs at the same time.
It is pretty reasonable to guess that most of us probably have Facebook, YouTube, and Google open at any given moment. Maybe your browser also has your emails and your favorite news website too.
With so much going on at any one time, how do we keep track of which tab is which without having to click through every tab every time?
This article lists the 16 best favicon generators you can find on the web. It will also tell you how to generate favicon images on each website, as well as how you can add a favicon to your website once its developed.
Zyro favicon generator is a free tool with several useful features.
You can upload your own chosen image to the site, or you can make use of the many professionally designed preset icons.
Using the editor tool, it is possible to change the layout of your favicon and add or remove text to include your brand name or simply go with a monograph.
What’s more, you can edit the background-color to match the aesthetic of your brand.
Once you are happy with the final result, simply download the image in a format that you can use right away.
Favicon.ico & App Icon Generator can convert JPG, PNG, and GIF image file formats to a favicon.ico file.
The favicon generator also creates favicons in all sizes to match the platform used – web, Android, Microsoft, and iOS.
When you click Create Favicon, it will create code for you to copy into the head of your HTML document. For reference, if you have done everything correctly, the HTML code will look like this for a standard 16×16 favicon:
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”> <link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>
You then add the downloaded .zip folder to the root directory of your website.
If you don’t have an image yet, take advantage of its online editor and create one yourself.
You can also pick a ready-made template from the icon gallery, sorted by background color, and modify it to your liking.
FavIcon Generator is ideal for converting JPG, PNG, and GIF image formats to favicon.ico files. However, unlike the Favicon.ico & App Icon Generator, it doesn’t have an editor.
This favicon generator offers plenty of image size options — 16×16, 32×32, 48×48, 64×64, and 128×128 pixels.
All you have to do is pick the icon size you need, then upload the image you want to turn into a favicon.
FavIcon Generator provides six language preferences: English, Spanish, Portuguese, French, Italian, and German to accommodate global users.
This favicon generator is compatible with PNG, JPG, GIF, and BMP image formats. It also accepts images with a transparent background.
The default favicon.ico file size you’ll get is 16×16 pixels. However, you have the option to download a 32×32 and 48×48 pixel size icons as well.
You can navigate to the Favicon Editor section to design your favicon from scratch. Alternatively, import a 16×16 pixel PNG image and use it as the base design.
The editor provides simple yet functional editing tools, along with plenty of color and brush size options.
Favicon CC accepts JPG, JPEG, GIF, PNG, BMP, ICO, and CUR image formats.
The free favicon editor offers a color picker and a transparent feature. These allow you to design both colored and transparent background icons effortlessly.
What’s more, the editor provides an animation feature with which you can animate your favicon. You get to decide the effect’s duration per frame and the number of iterations.
You can download the ICO file for free. To get the HTML script, you must publish the icon under the Creative Commons license.
Genfavicon supports JPEG, GIF, and PNG image formats and generates five different sized favicons.
Import your image to the generator and pick the desired icon size. You can crop it and preview the result before downloading the ICO file.
While the generator is user-friendly and free to use, it doesn’t have an editor that lets you design a favicon from the ground up.
Similar to FavIcon.pro, Genfavicon provides various language preferences to assist users around the world.
This favicon generator gives you the option to generate a single favicon.ico file. Alternatively, bulk download different sized PNG images along with an ICO file for various platforms – all in one click.
Favic-o-Matic also gives you the HTML code for all the generated files. You get to fulfill all your favicon’s needs in one place.
As it supports Google Drive integration, you get the option to save files directly to your account.
Test your website favicon’s compatibility with different browsers and devices using the Favic-o-meter – a free favicon checker tool.
It will help you verify whether or not your site implements the shortcut icon correctly and will provide suggestions on how to fix the issues present.
RealFaviconGenerator.net offers favicon modification options to enhance your favicon’s compatibility with popular platforms.
It includes personalization options for your favicon for mobile screens, like the Apple touch bar and the Android Chrome’s home screen.
When designing the favicon, you can see how it looks on the browsers’ tabs and address bar. You won’t have to create it by trial and error.
The demo feature also lets you change the image’s background color, margins, and size. You can also pick the favicon’s specs based on the versions of the operating systems.
The final product includes PNG, ICO, and SVG favicon files. The generator provides different sets of favicon code compatible with specific programming languages.
X-Iconeditor is a powerful online favicon generator. It is one of the few tools to offer a pencil tool, paintbrush tool, eraser, and text editor for those who want to make their favicon from scratch.
Of course, there is an easy image upload feature if you don’t want to build your favicon from the ground up. Upload an image that you want to represent your brand, and crop it directly in the generator.
You can also preview your favicon before downloading, so you will know precisely how the image will appear in web browsers.
Once you’re satisfied, simply export the file and download it into your website’s root directory.
To define the favicon and indicate that the icon is available to the browser, use the <link> tag in the <head> element of the page, pointing to the favicon’s location:
It will look just like this:
<link rel=”shortcut icon” href=”favicon.ico”/>
As the name suggests, Anti Favicon is slightly different from the majority of favicon generators out there. It doesn’t use an image file to create the icon.
Instead, an Anti Favicon icon contains text instead of images. Users can utilize a color picker to create a favicon that matches the color palette of their website.
To generate your favicon, just type in your text and experiment with different colors. When you are ready, you can save your favicon clicking to ‘Save as favicon file.’
Anti Favicon is one of the most unique favicon generators out there and well worth a visit.
Webestools.com provides a free online favicon generator that allows users to upload an image file to the site and edit it directly.
Users that want a more involved process can take advantage of the color tools and online editor to create their favicons from scratch.
Webestools favicon generator only offers favicons in sizes of 16×16 or 32×32, but it does allow users to preview their favicons before downloading the ICO file.
Overall, it is a straightforward and efficient favicon generator that gets the job done without any additional fuss.
Logaster favicon generator goes one step further than the competition and is an excellent choice for websites that haven’t already decided on their brand identity.
Rather than start with an image, this favicon generator begins by asking you to use the Logaster brand identity builder. Enter your brand name, and Logaster will create several logo options for your brand, which it will then translate into a high-quality favicon down the line.
Logaster is a professional service that can create favicons in a full set of different sizes (16-128 px). It is one of the only premium services on this list, and it is important to note that it does not allow you to upload your own image.
Logaster favicon generator is a great option for brands that have yet to create their own logo.
FavIco’s favicon generator is fast, free, and easy to use. Use it to convert a GIF/JPG/PNG image into ICO format to be used as a favicon.
It is a simple favicon generator with a clean user interface. Select an image from your computer to upload and select the size of the favicon that you desire – in this case, it is either 16×16 or 32×32, and you are ready to go.
One interesting feature of FavIco is that creating a favicon stores it in an online gallery. Creating multiple favicons allows you to compare the end results before downloading.
Favicon It offers a few different variations on the standard output of a favicon generator.
With Favicon It, you follow the standard image upload procedure, but where many websites only offer a 16px or 32px favicon – Favicon It generates favicons, apple touch icons, and the HTML header to all devices and browsers.
Favicon It requires your image to be a square of at least 310px to create a favicon. If your image does not meet those requirements, then Favicon It automatically links out to a free and easy to use image resizing website.
Prodraw favicon generator is a free online tool to help you convert logo, image, and photo files into a favicon.
It has better file format support than a lot of favicon generators on this list and is not just able to support the regular JPG, GIF, PNG, file formats, but also BMP and TIF.
One of the advantages of using the prodraw favicon generator is that it offers lots of straightforward advice for the user. Most websites simply list the compatible formats and available favicon sizes.
Prodraw makes a point of clarifying the differences. For example, if you wanted a favicon with a transparent background, then it would be wise to upload an image in the GIF or PNG format.
Prodraw also explains the best use for each size of each output. For example, 32×32 (desktop icon), 48×48 (large XP icon) up to 128×128 pixels (Windows Vista icon size) in the *.ICO icon format.
While some of those formats are outdated, repurposing the same sizes for modern tools is an option. For example, 128px is the correct current size for a Google Chrome web store favicon.
Prodraw is also able to generate icons with different levels of sharpness. It will let you compare the results and pick the icon that is right for your project.
ICO converter does what it says on the tin.
It is a simple online .ico image converter and favicon generator. It will take any image and convert it to ICO file, for use as a web site favicon or Windows application.
ICO converter allows you to choose which favicon sizes you would like to be included in the final ICO. It offers 16px, 32px, 48px, 64px, 128px, and 256px.
Unlike many of its competitors, ICO converter also allows you to choose the final bit depth of your favicon. Choose between bit depth of 8 bits (256 colors, palette) or 32 bits (16.7M colors & alpha transparency).
In this way, ICO converter caters to both more modern and classic favicon styles.
What is a favicon?
Favicons, short for favorite icons, are the little icons you see on each browser tab, search bar, bookmarks, extensions, and search history that identifies the website in question.
A favicon represents a website. It generally appears on the browser’s address bar, tabs, bookmark list, although favicons can also occur as desktop icons or app icons.
Most companies choose to use their logo as their favicon, as it is most readily identifiable. Think about the iconic blue bird of Twitter or the ‘play button’ symbol that’s synonymous with YouTube.
Other brands use a single-letter monogram logo presented in popping colors as their favicon.
Adding a favicon to your site helps establish your brand and credibility. It is generally a sign of legitimacy on a website. It shows that the brand is investing time and money in the service to give it a coherent, professional appearance.
As a favicon is a significant part of a website’s branding, it’s vital to have a unique and memorable icon design. It needs to be simple enough that visitors can easily recognize it.
The benefits of adding a favicon to your website include:
- Adding credibility to the site
- Improving brand recognition across different platforms
- Helping users locate the site among other tabs and bookmarks
- Improving browsing and user experience
What if your website is legitimate, but you lack the time or the graphic design know-how to create a favicon? You’d still like your users to be able to see your logo or icon in their web browsers.
In that case, you can use a favicon generator to create one in no time.
How to add a favicon to your website
Making your own favicon is as easy as choosing one of the favicon generators from the list above and uploading an image file.
All the favicon generators that we have chosen in this article will do the hard work for you. As long as you have a suitable image file, you will come out the other side with a great favicon.
While most browsers accept favicons in GIF, ICO, PNG, and JPG image formats, the ICO is the ideal format due to its inclusion of multiple icon sizes in a single file.
To add a favicon to your website, you will need to be familiar with a bit of basic HTML code. When you’re making a favicon, you’re going to see this line pretty often:
link rel=”shortcut icon”
If you’re thinking what on earth does link rel =”shortcut icon” mean? Don’t worry. You’re not alone.
For starters, you don’t have to write this code. Every favicon generator on the list will write it for you. Simply download the provided file into your site directory and paste the HTML into your website’s head.
The LINK element defines a link to the Favicon file that you have downloaded. Simple.
There is a way to avoid all the code by using a visual favicon generator such as the Zyro one.
You’ll create a visual favicon that you’ll then be able to download and use on website builders and CMS systems alike. Simply upload the image and you’re done.
What size should a favicon be?
The standard favicon sizes are 16×16 and 32×32 pixels. However, different platforms, such as app icons, usually require different sizes of favicons for better visibility.
Here is a complete list of current favicon sizes and the corresponding usage:
- 16×16 pixels (standard browser)
- 32×32 (desktop icons)
- 128×128 (Chrome Web Store icon)
- 152×152 (iPad touch icon)
- 167×167 (iPad Retina touch icon)
- 180×180 (iPhone Retina)
- 192×192 (Google Developer Web App)
- 196×196 (Chrome for Android icon)
You will find a favicon generator capable of creating files in each of these sizes on our list.
Favicon generator recap
Despite its small size, a favicon is a crucial component of a website. If your site doesn’t have one yet, you should create it now.
With a favicon generator, anyone can design an appealing icon in seconds. Depending on the tool, you can either create a favicon from scratch or use an existing image as a base design.
Every favicon generator on this list is a capable choice for your website. Simply consider which features you will need and choose accordingly.
Remember that an ICO file can contain multiple different file sizes. So, there is no need to create more than one even if you want to create more than one type of favicon.