Creating a brand is more than choosing a target market, having a clear message and a logo. It also means that you should pay attention even to the littlest details of your business to ensure that it is sending a consistent message. Having an online business for example requires you to have a website. But it is not enough to learn how to start a blog tutorial; you should also attend to the littlest details such as your website’s colors, its font and your logo to ensure that it is consistent with your brand. One of these overlooked elements is the favicon.
What Is a Favicon?
The word ‘Favicon’ comes from two words – Favorites Icon. It is called as such because it is a small icon that signifies a website when it is bookmarked or saved in ‘favorites’. Usually, it is a small or stripped version of a website’s logo. It used to be only present in the bookmarks section but now it is also present in the navigation bar and browser tabs.
Why Do You Need a Favicon?
Having a favicon has an obvious benefit and that is it reminds your readers of your brand. Popular websites are already using this. Facebook has a favicon. YouTube has a favicon. Twitter has a favicon. This goes to show that if you are serious about taking your business online, you should also install your own favicon.
Also, favicons make your reader’s life easier. Once they see your icon in their bookmarks bar or in their browser tab, they’ll instantly know that it is your website. With constant exposure to your icon, your market will remember you. Having a favicon can help you train your visitors’ minds to associate that small image to your business or website name.
How to Install a Favicon in your Website
Step 1: Create your favicon
You don’t need to be an amazing graphic designer to create your own favicon. It is a simple image that is only 16 by 16 pixels. Remember that this is extremely small. My advice is to use the first letter of your logo as Google did. You can also enhance the icon by adding a shape around it. It can be a circle or a square. Take a look at what Twitter and Facebook did to get some inspiration.
You can easily do this through graphics software like Photoshop. You can even do this through Paint. If you’re out of options, you can always use online graphics software like Pixlr. Save the file as a “.png” file.
Step 2: Convert it into an icon file
I know that you cannot do this with your graphics software. Don’t worry. You can do it online. Simply visit ConvertIco.com. This will instantly convert your .PNG file to an .ICO file.
Step 3: Upload your .ICO file
Go to the File manager of your hosting’s CPanel and upload the icon to the root of your domain name. You can also upload it using an FTP program like FireFTP. Just search for your domain name’s main folder and transfer the icon there.
Step 4: Edit Your Website’s HTML
I know most of you don’t know HTML. Don’t worry. This is not a technical tutorial that will drown you with terms. This is simple copy-paste work.
All you need to do is look for the HEAD tag in your website’s code. If you’re website is running on just HTML, then you’ll need to open the source file in Notepad. If you’re using WordPress, open the Header.php file by going to Appearanc and Editor. Look for the Header.php file and click on it. You’ll see the HEAD tag there.
Once you see the HEAD tag, paste the following code after it. Of course, replace [youriconname] with the name of your icon file.
NOTE: This will only work if the file is in the root folder of your domain.
Paste this code on all the pages of your website if you’re not using WordPress.
Congratulations! You have successfully installed a favicon in your website
Shila Cypress is Web Developer at Open Website Tutorials who is known for her skills.