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.
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.
Montse a very educational article, unaware of the topic !! Thank you
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
Regards!!
Carmen
:-)
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.
M.
Hi Montse,
Joomla have an extension (Phoca Favicon) free simply asks you to upload the file in PNG format and you create fav icon. It is recommended that if it is not, browsing history is erased and restart the browser. (http://extensions.joomla.org/extensions/style-a-design/design/3343)
Jordi
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 :-(
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.
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.
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
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.
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!
Xavi
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.
Hope and despair ...
Hello
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.
Hello.
Good article ... if I want to share a web directory where you can place the favicons of our websites for SEO and also generate.
https://www.favicones.com
Regards ;)
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!
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.
ok, thank you very much Montse
A greeting!
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.
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! 🙏
Wow!! Excelente artículo, lo amé. De muchísima utilidad
¡Muchas gracias Montse! ❤
Leave a Reply
Want to join the discussion?Feel free to contribute!