Favicons: Learn to do with ten easy-to-use generators

Favicon, for those who don’t know, is the icon that represents a brand in the digital medium. In browsers, it is the sticker that appears in the address bar.

TecMundo / Reproduction

Through it you can instantly recognize a site among the favorites, in the history or when there are many tabs open in the browser (when the site has no favicon, you only see the icon of a blank sheet).

. Favioli / Ben Pevsner / Reproduction

The term is formed by the agglutination of two words in English: favorite (favorite is icon (icon). Introduced in Internet Explorer in 1999, it remained with few changes – what has evolved is the way to do it (it must be inserted in the root directory where the site is hosted); today there are countless sites where you can create one to call yours and the best: for free (the list you can see below).

Generally, they are generated in .ICO – the format supports more resolutions and bit depths. Depending on where it will be used, its size varies: to be displayed in the browser, they must be 16 x 16 pixels, while icons on the iOS home screen, for example, are 57 x 57 pixels.

Search

Size is important especially for those who need the page to appear in search engines. According to Google, for example, for your page’s icon to be included in searches, it needs to be, in pixels, a size that is a multiple of 48 (48 x 48, 96 x 96 pixels, 144 x 144, etc.).

According to the search engine guidelines, “SVG files do not have a specific size. Any valid favicon format is supported. Google resizes the image to 16 x 16 pixels in order to use it in the search results ”, warning that original files with 16 x 16 pixels are discarded.

Size is also important in the sharpness of a favicon. A common mistake is to shrink an image until it is the ideal size – and the result is that no one can distinguish what the drawing represents, especially if it has a lot of details. The ideal, in case the image linked to your website is very complicated, is to use a detail (Amazon, for example, chose only the letter A).

The SpaceX favicon.The SpaceX favicon.Source: SpaceX / Reproduction

The image must always be square; shadows and textures are lost in the reduced size, as well as many colors, symbols or even words. In this case, minimalist lines and shapes make it a successful icon, and the list we have prepared of free favicon generators can help you. Check out:

Ten favicon generators

1. Antifavicon

Unlike most favicon generators, it creates icons from text.

. Antifavicon / Reproduction

2. Dagon Design

Just upload an image in JPG, PNG or even GIF (the maximum supported size is 100 KB) and the tool will convert it into a 16 × 16 favicon.

. Dagon Design / Reproduction

3. Favicon.cc

In addition to importing images, this tool allows you to create a favicon from scratch; just choose a color, click on the boxes and shape your icon. You can also create animated favicons.

. Favicon.cc/Reproduction

4. Favicon & App Icon Generator

Very easy to use, it allows you to create icons for applications not only for the web but for mobile – Android, Microsoft and iOS (iPhone and iPad).

. Favicon & App Icon Generator / Playback

5. Dynamic Drive – FavIcon Generator

In addition to the most common formats (JPG, PNG and GIF), the site supports the sending of images in BMP and offers the option to also create 32 × 32 and 48 × 48 XP desktop icons.

. Dynamic Drive – FavIcon Gerenator / Playback

6. Favicon.io

The differential of this generator is the possibility of using, in addition to images, words and emojis to create the favicon. It also has tutorials on how to install the sticker (both in .ICO and PNG format) on your page.

. Favicon.io/Reproduction

7. Favi-o-Matic

Another favicon generator that generates icons for all platforms (web and mobile).

. Favi-o-Matic / Reproduction

8. Genfavicon

The website (with support for Portuguese) generates favicons in five different formats.

. Genfavicon / Reproduction

9. Real Favicon Generator

In addition to generating favicons that are (according to the site) supported on all platforms and browsers, Real Favicon Generator can also improve an icon already used by the user.

. Real Favicon Generator / Playback

10. Planet website

It is very simple: you can choose between adapting an image or using the favicons offered in the website gallery.

. Planet Website / Reproduction

Leave a Comment