Surely, on more than one occasion, you have heard of a favicon. This is closely related to web design, and it is an important point that on every page, be it an online store, a blog, a website, etc. they are going to ask you. But, What is a favicon? What is it for? And most important of all, how is it done?
If you have many doubts about this, here we are going to give you the keys so that you understand it and, above all, so that you can present it within your project and be left with a better presentation. We assure you!
What is a favicon
We are going to start by explaining what a favicon is so that you understand it. And, for this, nothing better than to give you a practical example. Imagine that you are browsing right now (in fact, you are reading us). But you don't have just one tab, but several of them. You may have noticed that, in each of them, the name of what that page reflects appears, be it YouTube (because you are listening to background music), Gmail (because you have your mail open) or this page.
Next to each name, on the left, a small image appears, in a square. The one on YouTube and Gmail is sure to be identified by the logos they have, but what about the rest of the tabs?
Well, what you see is actually the favicon. In other words, it is a icon that is related to the page you are visiting, That is why it is so important to pay attention to this detail, because when you add a page to favorites or shortcuts, the favicon becomes the "image" of that page and that is why you have to take care of its design so that it is related perfectly (and above all look good to distinguish it from others).
This small icon usually has a size set that is 16 × 16 pixels (although it can also be set at 32x32px). Inside it you have to take care that everything you put is seen correctly since, otherwise, it will appear as a little identifiable spot (and that will give a very bad image of your page).
Why is the favicon so important?
Now that you know what the favicon is, and that you have located it in the pages that you open regularly, have you noticed that today there are fewer and fewer pages that are missing? This is because it is really very important to give a vision of elegance and know-how. That is, you are going to convey a brand or corporation image that cares about details.
However, the favicon also has other uses such as:
- Serve as identification of your page. Usually this favicon is related to the logo that you have on your website, only in a smaller size. But when the logo is too big and will not be seen on the little button, you tend to choose something that relates to it.
- You will help users who have saved your page to visually identify it. Thus, even if they do not remember the url, or the name of the company, because of the image of the favicon they will locate it.
- To be "good" with SEO. This has to be taken with a grain of salt. And it is that having or not having a favicon will not directly affect SEO (that is, it will not position you better or worse for having it or not). Now, it is more and more common that, when a browser enters a page, it looks for that favicon and, when it does not find it, then it gives a 404 error. And you know that these errors are not good for the SEO of a page.
How to make a favicon
After seeing, it is clear that a favicon is an essential element when having a web page. Now, how do you make one?
You should know that, in most cases, what it does is choose the logo of that website, or if it is too big, something that identifies it. For example, imagine that you have a television website that you have called in some way. But that, in the favicon, is too big. Instead, you can put a picture of a television to relate. In these cases, it is recommended that you wear the same colors as your website so that they identify it better.
And now, how can we create a favicon? Well, you have several options:
Photoshop, Gimp ...
In other words, we are talking about image editing programs since a favicon is created exactly the same as an image. Of course, you have to save it in .ico format for it to be recognized as such because it cannot be left as jpg, gif or similar.
This way of doing it allows you to customize the favicon much better, managing to create it from scratch and giving it the finish that you want. Normally for this you work with an image in a normal size and then adapt it to the size of that button.
After fact, it should be uploaded and tested in different browsers to see if it looks good, is representative and, above all, is understood.
Using online tools
In this case we refer to web pages that take care of converting any image you want into a favicon in a matter of seconds. But you also have the option of design your favicon directly with those pages.
If you want the former (upload the image and convert it), then we recommend Favicon Generator or Favic-o-matic. But if you want the latter (design it from scratch), bet on favicon.io or x-icon editor.
With WordPress
Is your page made in WordPress? And do you know that you can use that system to create your favicon. For this you can use some plugins that allow you to create this button based on an image that you have uploaded (or that you upload). Also through "Appearance / Customize" you can do it.
Once you have the favicon done, you just have to put it on your website and have it recognize it to be able to show it in the left area of the name of your page, as well as when saving it in favorites. In this way they will easily recognize you without having to stop to read if it is the page they really wanted to visit.