What is a Favicon and what is

Share on whatsapp
Share on linkedin
Share on facebook
Share on twitter
this is a favicon

Content of this article

What is a favicon?

Every time I make a conference or a course, look at me down the websites of the attendees. To do this, the organization of the event sent me a list of your URL and will open in the same browser but in different tabs. Unfortunately, when I have opened pages and I can see favicons around the world, I note that a large part of them are favicons CMS used to build your web pages (usually Joomla or WordPress), not a favicon corporate, which is what it should be.

So here's this short article explaining what is a favicon Y what is it forTo see if in this way, I get that people give the importance it deserves.

That little icon

A favicon is a small icon (usually 16×16 pixels or 32×32 px) that is used to identify a website in a browser tab, in a bookmark list, or anywhere else that requires a small identification. In fact, favicon stands for “favorites icon”. It is the element created to identify our web page when someone includes it in a list of favorites.

In this blog you are reading, the favicon It is a "MP" with fuchsia background you can see next to the URL or the page tab on your browser.

What is a favicon On a website

It is a symbol that conveys corporate image and used to:

  • Transmit our brand image when someone browsing our website and fixes his gaze on the area of ​​the browser URL.
  • For our page is easily identifiable when someone has open multiple tabs in your browser.
  • For our page is easily identifiable when someone keeps it in their favorites.

this is a favicon

How can we create a favicon to our website

There are many programs that will help you create it. This is the one I use to create them: creator of favicons.

My advice is to think your favicon in 32×32 pixels and that is similar to your logo. You can create them from images… maybe this can help you, but pixel by pixel it is also easy to create. Another tip: before designing yours, take a look favicons other companies in Google imagesThis can help inspire you to yours and make sure inadvertently, do not use any favicon which it has already been created by someone else.

When you have already created, you must save it using the name favicon.ico and upload it by FTP to the root directory of your web page.

En WordPress:

Some content managers like WordPress have a section in the administration panel for you to indicate the exact URL of the favicon… although it still works if you don't indicate anything there but you have a favicon in your root directory.

Also some WordPress templates and take an area in which you indicate the URL of your image favicon and it is already.

In Shopify:

Shopify also contemplates that you can easily manage your favicon: go to Theme settings -> Favicon and select your logo or upload the favicon you like the most.

A blogger:

Idem that in the rest of content managers. Look in the theme administration and there you should find how to change the default one and include yours.

What is a favicon in HTML

For your favicon look as soon as possible, you can make known their existence through the source code of your web page, using meta tags in the following line of code:

<link type=”image/x-icon” href=”favicon.ico” rel=”shortcut icon” />

Although again, if you do not use the line of code, the browser will see it on its own at some point. In Firefox and Chrome is almost immediately in Explorer takes a little longer.


This is all.
I go all right ... (and when you have a moment, please ensure that your website has its own favicon ;-)

I hope this article has been helpful.

We talk to each other.

What is a favicon and what is
Article Name
What is a favicon and what is
A favicon is a small icon (usually 16x16 pixels or 32x32 px) used to identify a website on the tabs of a browser, a favorites list, or anywhere else that requires a small identification.
Publisher Name
Publisher Logo

20 replies
  1. Carmen
    Carmen says:

    Montse hello que tal! There is a photoshop plugin that lets you save the photo in .ico format, you can also do something in motion a gif with your favicon and save .gif, an example of this website that I have under construction is this http://colourlaboratory.com




  2. Montse
    Montse says:

    Thank you very much Carmen!
    (Hey, the link to laboratory color gives me error 500, guess that's why you're working on it ... my'll look back in a little while) -> I've already arranged (pillava the parentheses, so I have taken from your link) now works.

    I've seen the animated gif favicon you used. I like it ! :-)

    A big hug.

  3. Montse
    Montse says:

    Thanks Jordi, knowing this can be useful to many people. For Joomla also the logo is well known !!! so when you open a page made using this CMS immediately see the favicon of Joomla. I do not understand how some web developers do not take into account and are able to deliver the web to a customer without this icon personalized :-(

  4. Miguel
    Miguel says:

    Please you I could make a favicon with the letters LO green and black color background, I appreciate and have placed one but not convince me, if you're so kind to let me please send him my email which attached you, thank you very much in advance, I hope your answer thank you very much.

  5. Montse
    Montse says:

    Hahaha, are you kidding Miguel !!!
    Making a favicon is very easy ... so do it yourself, please. Create an image of 32 × 32 pixels and save it with the name "favicon", and ".ico" extension impossible ... easier.

  6. Pablo Urani
    Pablo Urani says:

    Hello, Montse, very interesabte this post. I followed your advice, and it works with Firefox, but not with Explorer.

    Can you tell me where I have to copy and paste this line of code?

    Thank you!

    Pablo Urani

  7. Montse
    Montse says:

    Paul in Explorer takes a few hours to show up.
    As few days ago you posted this comment may now have it resolved. If not, let me know please ....
    A hug.

  8. Xavi
    Xavi says:

    Hi Montse,
    We met during Igualada.
    It is very interesting what you tell me and I have stuck, but this time I have not left. The favicon I look good in Chrome but not IE.
    Instead your website is the M everywhere.
    I put the line in the source code, and for days! and still is not.
    The web: http://www.dyneke.com
    favicon exists: http://www.dyneke.com/favicon.ico
    I created the line in the source code is modified lleuregament your proposal gave me around, because I accidentally changed the kinds of kites and I deleted the space before / Final

    Can you help me? Thank you Montse, I send you a hug!

  9. Montse
    Montse says:

    Xavi, Internet Explorer sometimes takes a while to show the favicon (typically hours). We will do the same when changing: see the new favicon Chrome and Firefox now, but still show the old Explorer for a while.

    Wait 24 hours and see how you see it.
    A hug.

  10. Jordi Oliver
    Jordi Oliver says:


    I see that the issue has favicon tail ...
    Xavi, if you have problems with IE tries to delete history and cookies and then restart the browser; usually works.


  11. Franklin
    Franklin says:

    Hi Montse,

    Some inquiries:
    there is a problem if I think the favicon in photoshop?
    Because you should always carry as favicon name because I want to put the domain name?

    Thank you,
    a greeting!

  12. Montserrat
    Montserrat says:

    Franklin, no problem. For the browser automatically detects whether to call favicon.ico, but if you use a WordPress your template will be able to tell the browser you use another file with the name you want.

  13. Julio Suarez
    Julio Suarez says:

    Thank you very much doubted that was a favicon I saw a tutorial and wanted to know that it serves me very well and to create one. Thank you.

  14. Juan Antonio
    Juan Antonio says:

    Gracias Montse! Recién me inicio en ésto del e-comerce y me ha sido de muchísima ayuda tu artículo. Acabo de crear mi favicon en 2 minutos, ya lo mejoraré, pero al menos ya se ve mas bonita mi pagina web. Graciasss! 🙏

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

New book on sale now

Make your business grow online

This website uses its own and third-party cookies to obtain statistics and store data. Its objective is to be able to offer you a better service. You can consult more information about the cookies on this site by clicking here.