What is a favicon? Why it matters and how to create one

To attract visitors and leave a lasting impression of your brand in their minds when they visit your website, Favicon is one of the key elements that helps you achieve that. However, the concept of What is a favicon is still fairly new to many people. With that in mind, in today's article, MONA Media will walk you through the details of website favicons and how to create an icon for your website the easy way. Let's dive in!

What is a favicon for a website?

What a website favicon is

Favicon is a combination of two words, “favourite” and “icon”, meaning icon and favorite. In web design, a favicon is a symbol that stands for the business's website.

Just as a logo represents a brand, so does a favicon. It is a shortened, simplified form of the logo. A favicon appears at the left of the browser tab. Because it is so small, the simpler and more recognizable the website icon is, the easier it is for users to remember the business's website.

Why does your website need a favicon?

During build a website, and brand building, a favicon is a very small step. But why is a website better off with a favicon than with a blank tab icon or the default one?

To answer that, here are the benefits a website favicon brings:

• Better user experience: Like a logo, a favicon is more than a web icon. It also stands for your brand. Say a potential customer has many tabs open at once. How will they spot your website at a glance?
• Stronger brand recognition: Because it represents your brand, a memorable favicon can help put your brand in users' minds.
• A more professional website: A more professional website makes a better impression and earns more trust from customers. A highly professional site is also rated higher by search engines. 

So with just a small icon at the left of the tab bar, a favicon brings your business website more benefits than you might think.

What does a good favicon need?

Today people browse with many different browsers and on many devices. When designing a favicon, make sure it displays correctly in all of these cases. Just remember the following points and most favicons will display correctly:

• Provide several favicon sizes: This makes display more accurate across browsers and between desktop and mobile. The usual sizes are: 16×16 px, 20×20 px, 24×24 px,… 
• Use more than one file format:  The most common favicon file extension is .ico. However, you can also save your favicon as .gif and .png, depending on the platform your website is built on.
• A favicon can also be based on your company logo: But remember, because a favicon is displayed so small, the simpler it is while still carrying your company's mark, the better.

That's the general overview of favicons. Next, MONA will show you how to create a favicon for your website.

How to create a favicon for your website, the simple way

Creating a favicon manually with software

To Making a favicon manually requires a little Photoshop and some design skill. You can use any software you're familiar with, such as Adobe Photoshop, Adobe Illustrator, Lightroom or even Paint. You can also simply use your existing logo file.

What you need to prepare is a square image, sized 32px or 256px. Then fit your whole design inside this square. Save the favicon file as .png or .gif as described above.

Also, depending on the provider hosting of your website, uploading the favicon file may require converting it to .ico. In that case, you can go to convertico.com hay favicon-generator.com to convert it to .ico.

Free online favicon makers

Another way to get a good favicon without Photoshop or design skills is to use free online tools. They let you build a favicon from ready-made layouts and icons, and all you need to do is put them together.

1. Favicon.io

Website favicon generator

Besides converting your design file to .ico the website Favicon.io also lets you create a favicon online. You can take advantage of this feature, but you may need some time to get used to the tool if you've never used it.

2. Favicon.cc

Favicon.cc has many supporting features

Favicon.cc is also an online favicon maker with many helpful features. What sets it apart is that it can create animated favicons and supports transparency.

3. Genfavicon

Genfavicon interface

This tool is user-friendly thanks to its easy interface. It has some limits, though, such as Genfavicon it can't create a favicon from scratch and only edits an existing image.

4. Favic-O-Matic

Favic-O-Matic interface

Favic-O-Matic is a very handy tool with many built-in features. Besides creating a favicon online, it can check whether your favicon meets the standard and gives you the HTML code for the favicons you create.

5. Real Favicon Generator

Real Favicon Generator interface

Like Favic-O-Matic, Real Favicon Generator has many built-in features. It also shows a preview of your favicon so you can adjust it for each browser or operating system.

How to put a favicon on your website

Once you've created a favicon, the next step is to put the website icon on your site. To do that, contact your hosting provider to learn the process. Each provider works differently, so there's no single procedure to give here.

That said, a few points hold when uploading a favicon file. The website icon is placed at the root of your domain. If you want to change its location, you may need a developer's advice, since it involves changing the code in the header, which takes some knowledge. If your website runs on WordPress, you can follow the steps below to add the icon.

Ways to create a favicon in WordPress

WordPress is currently the free website platform used by many people in Vietnam. It lets users manage and build their own site. So creating a favicon in WordPress is also quite simple, and if you use this platform, you can do it yourself.

1. WordPress's built-in setting

The first way is to change the favicon with WordPress's built-in admin feature:

• Step 1: Go to the Admin dashboard (Admin Dashboard).
• Step 2: Select Appearance, then click Customize.
• Step 3: Choose Site Identity.
• Step 4: Under Site Icon, choose Select Image.
• Step 5: Upload the favicon file from your computer.
• Step 6: Publish (publish).

After these 6 steps, open your main site to see the result.

2. Use a plugin to add a favicon to WordPress

Plugin that can add a favicon to your WordPress website for you is Real Favicon Generator. This tool was introduced above and can connect to WordPress. Here are the simple steps with it:

• Step 1: Open the Admin dashboard.
• Step 2: Choose Plugin and click Add New.
• Step 3: Search for the keyword “Favicon by Real Favicon Generator”.
• Step 4: Then install and activate the plugin.

• Step 5: After activating it, choose Appearance and click Favicon.
• Step 6: Upload file favicon. This is the nice part of this plugin: you don't need to edit any image beforehand. The plugin creates a favicon for you and uploads it to WordPress. Just pick a file in the standard size (260x260px).
• Step 7: When uploading the image, choose Generate Favicon. You'll then be taken to the Real Favicon Generator website.
• Step 8: On the website, choose Generate your Favicon and HTML code.

After step 8, you'll be taken back to the Admin dashboard. You'll then see a message that the installation was successful.

3. Add a favicon manually with code

Another way to put a favicon on WordPress is with code. This requires a little coding knowledge.

• Step 1: Access your website using FTP client or file manager.
• Step 2: Find the file folder /wp-content/themes/your-theme.
• Step 3: Put the favicon file into the theme files.
• Step 4: Save the link.
• Step 5: Find the file function.php and add the following code.

• Step 6: Put the favicon link after href=”‘.get_template_directory_uri(). Note that you need to enter the correct file name and link for the code to work. For example, if the file extension is .ico the code will look like this.

That's everything that answers the question “What is a favicon” along with a detailed guide to creating a favicon for your website. Although it is only a small part of a site, a favicon adds a lot of value for a company's brand and image. We hope that, with the tips shared by MONA, you'll know how to create website icons that look good and fit your business!