WHAT IS A WEBSITE FAVICON?
Favicon is a small icon associated with a website or web application. Favicon is short for "favorite Icon" and was introduced by Internet Explorer. Its aim is to help users distinguish between websites. It's displayed within browser tabs and bookmarks bar. It is vitally important for a website to have a favicon.
Where does a favicon appear?
Why is it so important for a website to have favicon?
There are some valid reason why having a favicon is so important for a website. A website without favicon looks unprofessional, no matter how beautiful or optimized the website is designed. Following reasons tell us why favicon has such a importance in web designing:
Imagine your website doesn’t have favicon, what happens if a user open your website and your competitor’s website which has a favicon. He/she observes a website showing no icon within its tab while the other website is completely recognizable by its favicon. Obviously, you competitor’s website will look more professional and trustworthy than yours. Many people say a website starts from its header but the fact is that a website starts from favicon. It gives your website a professional look.
When a user tries to find a webpage in bookmarks, history or other places, the favicon will save the searching time significantly. The majority of internet users recognize a website by its favicon.
Favicons clearly have impact on a website’s usability which is one of the google’s and other search engine’s criteria to rank a website. when a user recognizes your website in bookmarks, history and among multiple tabs, it leads to interacting with your website because they can easily recognize your website by the favicon.
How to create a perfect favicon?
Some websites are able to use their logos as favicons but more complicated and bigger logos are not suitable for favicon. Let’s not forget the idea of being recognizable. If you use a big logo as a favicon, it will be hardly recognizable because the brewers squeeze the favicon. Your favicon must be something related to your logo and brand.?
As you already know, the favicon is actually a very small icon within the brewers tab therefore a text is not going to be recognizable and beautiful.
The optimal size for favicon is 16X16 pixel to 512X512 pixels. WordPress requires 512×512 pixels favicon.
领英推荐
the favicon url must be stable. Do not change it frequently.
Make sure your favicon is simple. Refrain from going into too much detail.
In most cases, designers perefer to use the logo as favicon. It is a good idea but keep in mind that you may need to do few adjustments first. For example, omitting tag line, text or using only one initial. Always consider simplicity and consistency. For example, we can see in the following illustration that part of the logo is being used as a favicon.
Favicon file types
One of the most important factors to consider when designing a favicon is file size an file format. The common formats for favicon are as the following:
How to add favicon in HTML?
Now you have created your favicon and it’s time to tell the browsers and applications where it is located. To do so you need to add a line of code in <head> section of your html file using <link> tag. In this example I have created a folder named image in my root directory and save the favicon file in this folder.
<link rel=”icon”?type=”image/png”?href=”/images/favicon.png”>
How to add favicon in wordpress?
Log in to WordPress and go to?Appearance > Customize. Navigate to the?Header > Site Identity?section.?
You’ll find a section called “Site Icon”. Click on where it says “Select site icon”.
Conclusion
Favicons might seem insignificant in web designing. But this tiny icon has a great impact on your website’s visibility and brand recognition. Favicon is the first thing you need to think of before designing a logo. If you want your website to be recognizable and to look professional, designing a favicon is not what to want to overlook. And don’t forget to spend time on its design. Make sure of color choice, unique shape which is easily recognizable and represents your brand.
Digital Marketing: With AI and Automation (SEO, Blogging, Content Writing) Pure Value ?? | Proven Methods??
1 年Hi Mehrdad, Thank you for the insightful article. In consideration of the requirements for web developers and my audience, I've developed a free AI tool. This tool can generate favicons in all sizes, and it's entirely free to use. https://aiwebranker.com/favicon-generator/
TEFL|TESOL|Master of English Language|Translator|Linguist|Freelance ESL Teacher
2 年??????