What is a favicon?
Every time I teach a conference or course, I check the websites of the attendees. The organization sends me a list of their URLs and I open them in my browser, each one in a different tab. The funny thing is that when I look at the icons in the tabs, I notice that many sites still display the generic icon of their CMS, such as Joomla or WordPress, instead of a custom one for their brand.
That's why I decided to write this article to clarify what a favicon and why it is so important to give it a personal touch. Let's give your website the identity it deserves!
That little icon
A favicon is a small icon (usually 16x16 pixels or 32x32 px) that is used to identify a website in a browser's tabs, a list of favorites, or anywhere else that requires a small identifier. In fact, favicon stands for “favorites icon”. It is the element created to identify our website when someone includes it in a list of favorites.
In this blog that you are reading, the favicon It is an “MP” with a fuchsia background that you can see next to the URL or in the page tab of your browser.
What is a favicon on a web page
It is a symbol that conveys corporate image, so it is useful for:
- Transmit our brand image when someone browses our website and fixes their gaze on the URL area of the browser.
- So that our page is easily identifiable when someone has multiple tabs open in their browser.
- So that our page is easily identifiable when someone saves it in their favorites.
- He favicon It has an indirect impact on SEO. While it doesn’t directly improve search engine rankings, it does contribute to user experience, which is a crucial factor for SEO. A well-designed favicon helps users easily identify your website among multiple open tabs, which encourages greater brand recognition and visitor retention. Additionally, a good user experience improves click-through rate and dwell time, which can positively influence your search engine rankings.
So whichever way you look at it, the Favicon is an important part of our web strategy.
How can we create a favicon for our website
There are many programs that will help you create it. This is the one I use to create them: favicon creator.
My advice is that you create your favicon in 32x32 pixels and 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, look at favicons from other companies in Google Images, this can help you get inspiration for yours and make sure you don't accidentally use any favicon that has already been created by someone else.
Once you have created it, you must save it using the name favicon.ico and upload it via FTP to the root directory of your website.
In 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 works just as well if you don't specify anything there but you have a favicon in your root directory.
Also some WordPress templates already have an area where you indicate the URL of your image. favicon and that's it.
On Shopify:
Shopify also makes it easy for you to manage your favicon: Go to Theme settings -> Favicon and select your logo or upload the favicon you like the most.
On blogger:
Same as with other content managers. Look in the theme administration and there you should find how to change the default one and include your own.
What is a favicon in HTML
So that you favicon to be seen as soon as possible, you can make its existence known through the source code of your website, using the following line of code in the metatags:
<link type=»image/x-icon» href=»favicon.ico» rel=»shortcut icon» />
Although again, if you don't use the line of code, the browser will see it on its own at some point. In Firefox and Chrome it will be visible almost instantly, in Explorer/Edge it takes a bit longer.
That's all.
All the best… (and when you have a moment, make sure your website has its own favicon 😉
I hope this article has been useful to you.
I'll leave you a couple more here in case they might be of interest to you:
- This one about the importance of online branding: Online Branding
- And this other one also about AI and SEO: How can Artificial Intelligence help you in your SEO strategy?
We talk to each other.
21 responses
Wow!! Great article, I loved it. Very useful.
Thank you so much Montse! ❤
Thanks Montse! I'm just getting started in e-commerce and your article has been very helpful. I just created my favicon in 2 minutes, I'll improve it, but at least my website looks nicer now. Thanks!
Thank you very much, I had doubts about what a favicon I saw in a tutorial was and I wanted to know what it was for, very well I even created one. Thank you.
Ok, thank you very much Montse
All the best!
Hello Montse,
Some questions:
Is there a problem if I create the favicon in photoshop?
Why does it always have to be named favicon since I want to put the domain name on it?
Thank you,
all the best!
Franklin, there is no problem. In order for the browser to detect it automatically, it must be called favicon.ico, but if you use WordPress, your template will be able to tell the browser to use another file with the name you want.
Good article… if you allow me, I would like to share a web directory where we can place the favicons of our websites for SEO and also generate.
https://www.favicones.com
Greetings 😉
Hello
See that the Favicon theme carries four…
Xavi, if you have problems with IE, try deleting the history and cookies, and then restart the browser; normally it works.
Greetings.
I hope and despair…
Hello Montse,
then we will connect to the course of Igualada.
It's very interesting that you explain that I've got you hooked, but this one doesn't sort me out. The favicon can be seen in Chrome, but not in Explorer.
In canvi the web page is visible on the M a tot arreu.
I have posted the line to the font code, ha fa dies! i face is not see.
The web: http://www.dyneke.com
the favicon exists: http://www.dyneke.com/favicon.ico
The line that I created in the font code is completely modified from the proposed text but made an error, I have changed the type of commits and I have deleted the space outside the final /:
Can you help me? Many thanks Montse, I send you a hug!
Xavi
Xavi, with Internet Explorer, click a button to appear the favicon (normally within hours). And the material will pass when you can see it: you will see the new favicon with Chrome and Firefox at the moment, but the Explorer will show the original for a good while.
Wait 24 hours and see what you see.
A hug.
Hi Montse, this post is very interesting. I followed your advice and it works with Firefox, but not with Explorer.
Can you tell me where I should copy and paste this line of code?
Thank you!
Pablo Urani
Pablo in Explorer takes a few hours to show up.
Since you posted this comment a few days ago, it is possible that you have solved it by now. If not, please let me know…
A hug.
Hahahaha, you're joking Miguel!!!
Making a favicon is very easy… so please do it yourself. Create a 32x32 pixel image and save it with the name “favicon” and the extension “.ico”… it couldn’t be easier.
Please could you make me a favicon with the letters LO in green and a black background? I would appreciate it. I already have one in place but I'm not convinced. If you would be so kind as to make it for me, please send it to my email which I am attaching. Thank you very much in advance. I await your response. Thank you very much.
Hello Montse,
For Joomla we have a free extension (Phoca Favicon) that simply asks you to upload the file in PNG format and creates the fav icon for you. It is recommended that if it does not appear, you delete your browsing history and restart your browser. (http://extensions.joomla.org/extensions/style-a-design/design/3343)
Jordi
Thanks Jordi, knowing this can be useful for many people. In the case of Joomla, the logo is also well known!!! so when you open a page made using this CMS you immediately see the Joomla favicon. I don't understand how some web developers don't take this into account and are able to deliver the website to a client without having customized this icon 🙁
Thank you very much Carmen!
(Hey, the link to Colour Laboratory gives me a 500 error, I imagine it's because you're working on it... I'll look at it again in a while) –> I've fixed it (it had the parenthesis, so I removed it from your link) now it works.
I've seen the animated gif favicon you used. I like it! 🙂
A big hug.
M.
Hi Montse, how are you? There is a Photoshop plugin that lets you save the photo in .ico format, you can also make something in motion with a gif with your favicon and save it as .gif, an example of this website that I have under construction is this one http://colourlaboratory.com
Greetings!!
Carmen
🙂
A very informative article Montse, I was unaware of the topic!! Thanks