When it comes to your website, your branding strategy is crucial to converting visitors into customers. No small detail should be overlooked. This includes the need to create favicon icons and a free favicon generator can help you make these.
Favicons are the small image icons that appear next to a website’s title in the tab of a browser window.
Because you can also use them as desktop app icons, you need at least a few different sizes that can be included in a favicon ICO file type. In most cases, you can also set a PNG file as a favicon icon.
Favicons are essential because users are constantly hunting for information across multiple websites at a time in tabs. Favicons help users identify content and the brand quicker for more enticing user experience.
So, here are 15 free favicon generator online tools as well as more details on how to create favicon icons, and install them.
Let’s dig in.
Best Practices for Favicon ICO File
When you want to create favicon icons, the first step is learning more about them, including their requirements and best practices.
The term “favicon” is a portmanteau for “favorite icon.” These were icons that, much like today, were displayed with a website title at the top of a browser.
Except, they were originally displayed when a user added a website to their “favorites” folder. Modern browsers refer to this folder as your bookmarks.
A favicon icon has to be a certain size. Otherwise, browsers and devices won’t use them.
The bare minimum sizes you need are:
- 16×16 pixels for browsers
- 32×32 pixels for desktop taskbars
- 96×96 pixels for desktop app favicon icons
- 180×180 pixels for iOS and Android devices
Keep in mind that you could choose between 16×16 px and 32×32 px. If you’re not too worried about branding, one of those image sizes should suffice.
For details, check out the Favicon Cheat Sheet.
When you make a favicon icon, it’s a good idea to also follow these best practices:
- They should be simple and not overly-stylized so they’ll be easy to see in small sizes.
- Pick one or two colors for the color scheme. At the very most, no more than three colors.
- Favicon icons should be in either 8-bit or 24-bit colors.
- The design of the favicon icons shouldn’t include a lot of lines or letters.
- While you can have a transparent background, it’s important to note that Apple devices don’t allow it.
- Favicon icons should correspond to your existing branding and logo.
15 Best Free Favicon Generators
If you’re keen to create favicon icons of your own that are more simplistic, or you just want to upload an image and have it appropriately sized and converted to an ICO image file, here are several free favicon generators.
They’re in no particular order because they’re all great options where you can create a favicon icon in a few clicks. After you make a favicon with any of these online options, they’re free to download and use.
With this free favicon generator, you can create favicon icons from a text, an image, or an emoji.
With the text-based option, you can choose the background color and shape, the font family and size as well as the font color. The Favicon generator uses Google Fonts which has 800+ fonts available.
Alternatively, you can choose to upload a file for the favicon generator to transform it into the appropriate sizing. Or, you can download an emoji favicon icon from a gigantic list of options.
The generated favicon will work for all browsers and multiple platforms.
This free favicon generator gives you the option to upload an image file and choose between the standard 16×16 px size for web browsers, or a larger size suitable for Android, Microsoft, and iOS.
You do have the option to retain the current image dimensions instead of resizing it to a square. Just keep in mind that keeping this option checked or unchecked may skew the final result of your favicon.
So, it’s best to make sure your image is already pretty close to being a square.
This free favicon generator is rather unique because it’s one of the few on the list that includes a browser simulator preview section so you can see what your favicon icon will look like once it’s been sized and converted.
You’re also able to get sizes for all browsers, platforms, and most technologies.
However, this favicon generator only has the option to select an image for conversion into a favicon icon.
With this free favicon generator, you can either upload an image to make a favicon, or you can create a favicon icon of your own by drawing one with a mouse.
You can choose the colors you want to use with a color picker as well as toggle the transparency of the favicon icon.
There’s also an option to create favicon icons with an animation. Also, settings like putting the animation on a loop, editing, and deleting frames are available.
This favicon generator also has a preview mode, so you can see how your favicon looks like, once it’s ready.
This is a simple free favicon generator where you can upload an image and then choose the size you want it to be. It’ very basic, but a good option when you want to make a favicon icon quickly without fussing with settings and options.
With this generator, you can also make retina favicons that work with Apple touch devices. It does require a bit extra work, but all the instructions are detailed on their webpage.
Favic-o-Matic generates favicons, both ICO and PNG (also transparent ones).
You can upload an image with this free favicon generator, and then choose whether to download a 16×16 and 32×32 pixel ICO file or include different sizes that are compatible with all devices.
There are also advanced settings like being able to edit the background color and some advanced compatibility options.
The Ionos Favicon Generator lets you draw a favicon icon, use initials, or upload an image you want to use to make a favicon.
The result is a favicon that works across all browsers and devices. It also has a nice preview area where you can quickly see what your favicon will look like live.
This free favicon generator offers the options to upload an image (either JPG, PNG, or GIF), or choose from a free gallery of premade favicons.
It may be important to note that if you’re looking to create favicon icons for your business, you’ll likely want to create a favicon that’s your logo or similar to it. When you do this, it provides a more cohesive look that’s more memorable.
So, choosing one of the pre-made images may not be a good fit, especially since other sites can use the exact same one you picked.
For this generator, there’s an option to upload an image or create one with text.
If you create favicon icons with text, there are lots of settings, including changing the font family, font size, background color, text color, and there’s an adjustable scale to toggle the border between a square and a circle. So, you could scale the border to have rounded edges of varying roundness.
There are also further options for compatibility across devices.
This free favicon generator is unique because when you upload an image, you have the option to crop to make it a favicon.
There’s also a preview window to see what your new favicon icon will look like live in a user’s browser.
You’re able to select between sizing options: 16×16, 32×32, 48×48, 64×64, and 128×128 pixels.
Here’s another quick option when it comes to a free favicon generator. When you upload an image to make a favicon, you’re able to choose the image size you want to use: 16×16, 32×32, 48×48, 64×64, and 128×128 pixels.
FavIcon lets you convert JPG, GIF, PNG to ICO file type and you can use it to convert app icons, desktop icons, and favicons to your websites.
Faviconr is another simple and quick option for a free favicon generator.
Upload either a JPG, PNG or GIF file, and choose whether you want a transparent background (you can only create transparent favicons if your source file is also a transparent PNG or GIF file). Click the button, save the file, and you’re done.
This free favicon generator is pretty unique because after uploading an image you want to use to make a favicon, you can crop it and style it.
There are options to shape the border into different forms including a square, heart-shape, off-center square, a circle, a tilted heart-shape or square, and an option to choose a white border.
You can also choose to download the favicon as an ICO or PNG file with multiple sizing options including 16×16, 24×24, 32×32, 48×48, 64×64, 96×96, 128×128, 192×192, and 256×256 pixels. There’s also an option to create favicon icons for Windows 7, 8, Vista, and XP computers.
This free favicon generator includes options for compression and converting files from PNG to SVG as well.
Wizlogo is another simple option for a free favicon generator. All you need to do is select an image to upload, then select either a 32×32 ICO file, or a favicon icon for web, iOS, Windows, and Android. And you’re done.
Wizlogo can be used as a free logo maker also.
FavICO is one final basic option for a free favicon generator. Upload an image you want to use to make a favicon. Then, choose between a 16×16, or 32×32 pixel size and press create. And that’s it.
How to Install a Favicon Icon
Once you have used one of the free favicon generators to make a favicon icon, you can install it so it can be displayed for your website.
For regular or non-WordPress sites, first, upload the favicon icon to the root of your server.
Then, starting in the <head> tag of the index.html file, use the official code below from the W3C:
... <head profile="https://www.w3.org/2005/10/profile"> <link rel="icon" type="image/png" href="https://example.com/myicon.png"> ...
Just be sure to change “https://example.com/myicon.png” with the actual link to your favicon icon.
Also, change “image/png” to reflect the type of image file you’re using for the favicon.
Here are the image types to replace “image/png” that are compatible when it comes to creating a favicon:
- PNG image file – image/png
- GIF image file – image/gif
- ICO image file – image/x-icon
- SVG image file – image/svg+xml
Don’t forget to save the file.
In most cases, the free favicon generators listed above also generate the code you need that’s specific to the settings you chose such as for animations or compatibility. So, if this code doesn’t work, you can refer to the favicon generator you used to make a favicon for your website.
Installing a Favicon Icon Automatically in WordPress
For WordPress sites, you can create a favicon icon without having to use one of the free favicon generators listed above.
You can use any image you want as long as it’s at least 512 px wide.
To automatically install it, log into your self-hosted WordPress site and in the admin dashboard, go to Appearance > Customize.
After the Customizer loads, click on Site Identity in the menu on the left. Then, under Site Icon, click Select Image.
In the pop-over window, click on the Upload Files tab, then on Select Files. Choose an image you want from your computer.
Click Select, then crop the image, if needed, and click Crop Image. Or, you can leave the image as-is and click Skip Cropping.
Then, save your changes by clicking the Publish button in the Customizer.
Manually Install a Favicon for WordPress Sites
To manually install your favicon that’s an ICO file for WordPress, first upload the favicon to the root of your website as well as the root of your current theme.
Be sure that the file is named as “favicon.ico” or else the favicon icon won’t be displayed.
This should do the trick, but some older browsers may not notice your favicon so there’s an additional step you can take to ensure compatibility.
Find your header.php file through SFTP or your hosting provider’s control panel.
Open it and search for the line of code that’s similar to the example below:
... <link rel="shortcut icon" ... /favicon.ico" /> ...
Then, replace it with the code below or add it if it isn’t there:
... <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" /> ...
Save the file and you’re done.
Something so small like a favicon icon can seem insignificant at first, but it helps with brand recognition and user experience. These free favicon generators should do the trick to create favicon icons of your own to add to your website.
Anything we’ve missed? Leave a comment below.