Favicon is an acronym which comes from the words “favorite” and “icon”. It is as small image, usually 16 by 16 pixels or 32 by 32 which you can see in the tab of the browser near the name of the website. These were introduced back in 1999, which makes these tiny branding vehicles two decades old. Their role includes simple branding, giving the site credibility, but also quick visual indexing.
There are many ways to create a favicon, starting from scaling down your logo, making a simplified version of it or just using some initials on background which matches your branding.
Although you can make favicons in any graphics program, such as Corel or Photosho, it is easier to use a dedicated online tool.
Depending on what is most important for your brand, this site allows you to choose between text, images, or even emojis as your starting point for a favicon. All options are highly customizable. For the font version, you can select the fonts to use, their color and the background color.
The coolest thing about this generator is that you get a WYSIWIG experience. You can preview the favicon you’ve just created right in the top corner of the window of the generator.
If you are feeling creative, you can design your favicon pixel by pixel by coloring the 16 by 16 grid with the colors of your choice. If you are not a big fan of coloring by numbers and are in a bit of a hurry, you can upload a predefined image and work from there.
The cool differentiator of this tool is that you can create multiple frames and merge them into a short animation that loops continuously in your browser’s tab.
As the name suggests, this simple generator can create more than favicons. You can also design icons for mobile apps, regardless of the platform (Android, iOS, Microsoft). Just upload your favorite inspiration and decide if you want to resize it as a square or keep it as it is.
If you have no clue, you can also browse through an extensive gallery of favicons, searching either by keyword or color.
If you need more than a simple .ico favicon to upload to your root directory and you want a customized solution for every platform, try this generator. All you need is an image to start with. It doesn’t even need to be square; the tool adds the necessary transparent space or color.
It has live preview options for each online platform, and you can make some fine-tuning adjustments to get it perfect for each dimension.
Not only is this a great tool to generate a correct favicon .ico, but you can get it in any size you need it for the devices you intend to use it on for maximum accuracy. They also throw in some humor along the way too with their options: the lazy package gets you the bare minimum for generic devices and retina display, the obsessive is for mobile apps developers, while the apocalypse gives you a favicon in all possible sizes you might ever want.
On the side, it is also a great way to learn about what are the standards for each device.
This generator comes in two sizes: regular which just gives you a .ico file to use as you please and the advanced version with more options. This is different from the other online tools since it is more SEO friendly: it allows you to name your favicon as you please, give it a version number and even select a folder for it.
While most favicons are created with images, this one focuses only on letters. It offers the possibility to write them on two rows and use different color combinations for the text and background of the top and bottom sections to create an appealing image. They even give some tips and tricks on how to make the most out of their tool. These include adding some space to make the letters smaller or to use only one section to get a bigger text, similar to the social media favicons of Facebook and LinkedIn.
Another pixel by pixel favicon generator with a modern feel is this one from Ionos. They offer you endless possibilities if you have the desire to color 256 pixels individually. Also, you could upload a picture and let the algorithms do the heavy lifting. There is also the letter option where you can choose up to two letters, their color, and a contrasting background.
This is a more basic tool than the previous, but it works just fine if you don’t want something fancy. Some developers prefer to focus more on other aspects of web creation like hosting and content instead of spending hours on designing the perfect small square to introduce your company.
It still is an excellent option if you already have a logo and you need a quick variation with the .ico extension. Crop and arrange until you are perfectly happy with the result.
Another tool to get the job done without any fancy options is this one which accepts PNG, JPG, and even GIF files. Select your favorite square size from the five predefined options (16px, 32px, 48px, 64px, 128px). Not recommended as icons for iOS devices since the listed dimensions are only approximations of the native size for on-screen apps.
As soon as you are happy with the result go to your root directory and upload the favicon.ico file, without changing the name. Then, use this code line in your code: “<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” />”.
If you use a content management system such as WordPress, it is easier to upload the favicon as media and paste the link or select it from the library in the “Customization” section of the active theme.