Blaugust 2022 – Coding a Favicon for your HTML Blog or Website
Posted on August 11, 2022 by Aywren
A favicon is the tiny image that appears next to a website’s name in a browser’s tab when you’re visiting. Often, this is a tiny logo or image that represents the website you’re viewing. You’ve probably seen these thousands of times before and hardly given them a second thought.
Using a favicon for your website is a way to help identify it and set it apart – even if in just a small way. If someone has a bunch of browser tabs open, and your page is one of those tabs, a favicon can help someone tell the content of the tabs apart at a glance.
In Blaugust of 2019, I wrote about how to set up a favicon for a WordPress blog. In looking at that post, the instructions are still the same to this day.
However, if you have a HTML blog or site like I do, you will have to add a line of code to include a favicon on each of your web pages. Here’s how!
Create a Favicon Image
The first thing to do is find an image that you think that will be visible at a tiny size. Favicons are usually 16x16 pixels. Often, that’s why you’ll see sites using logos – those tend to be created with visibility in mind.
In order for a favicon to appear correctly, the image needs to be exactly square in dimension. If you try to use a non-square image as a favicon, it may display, but will be distorted.
You can convert the image into an .ico file using an online converter such as Faviconer. However, I’ve noticed that small .pngs are acceptable as well if you don’t want to go through conversion.
To ensure you have the best outcome, though, converting the image to 16x16 .icon file is idea.
Adding a Favicon to an HTML Page
Upload your icon image to a location on your web host as you’d usually do.
Then, you need to reference this image in the <head> section of your HTML webpage. I often put mine above the title. Here’s the code you need:
<link rel="shortcut icon" href="PATH-TO-IMAGE" />
Here’s an example of what my header code looks like with the favicon code in it.
You will need to add this code to every page of your HTML site for your favicon to display consistently on all pages.
Let me know if this was any help to you and have fun coding!