I want you to do a short exercise before we get started.
Take a look at the tabs on your browser.
What do you see?
I’m certain that every site you have open has the Title of the site and a tiny image.
That’s a favicon.
What is a Favicon?
A favicon is an icon associated with a website or webpage intended to be used when you bookmark the web page. Web browsers use them in the url bar, on tabs and elsewhere to help identify a website visually.
In this blog post, you will learn how to make a favicon for your blog.
But first, let’s look at a site without a favicon looks like as a tab.
- 1: An icon for Gmail. I use gmail to send and receive emails.
- 2.: Icon for Google. I use Google most of the time to do my research.
- 3: TopWin – Movie Maker. I wanted a software for editing videos and this is what I got from the search results.
- 4: Google Sheets. I use it to write and store my articles.
- 5: Twitter. My favorite social media platform.
- 6: Hootsuite – Social media marketing tool. I use it to manage my social media accounts.
- 7: Luminous Blogging icon. This is my blog’s icon.
- 8: Snappa tool – Here is where I design the graphics I use on my blog posts.
- 9: Mailerlite icon is the green one. I use mailerlite for email marketing. It is easy to use and free for up to 1000 subscribers.
- 10: YouTube. I have a channel on YouTube. That’s why the website is open. I also watch entertainment and tutorial videos on YouTube.
I believe you now get the bigger picture.
Did you notice the website without a favicon?
It was Top-Win Movie Maker.
I know this is a site for a company but I am writing about it only because it’s the only one without a proper favicon. I could easily lose that tab because it’s not obvious as to what it is.
NEVER EVER let this happen to your site.
How to make a Favicon
Making your own Favicon is quite easy.
The easiest way is to look at your logo if you have one.
Does your logo have an icon incorporated into it? or Is your logo really big and wordy?
The main idea is to grab a piece of your logo, or the whole of if it’s really neat and simple and create a square .png image with it, at around 512 x 512 pixels.
Favicons are better saved as .png because .png has a transparent background and that way your favicon will look great floating on its own in the tab. If you make a .jpg your favicon will have a white square background. If your favicon will be a full square graphic then it doesn’t matter either way.
Main Features of a Favicon
- Square 512 x 512 pixels
- Resembles or is your logo
- Preferably a .png file
Look at the tabs again, analyze what is used in the favicon. You will notice that some are using the icon that is part of their logo, some are using an icon that represents the section of their app (like google docs), I for example use the whole of my logo as a favicon.
Now analyze your own logo and try out different choices to see what might look better in a square. Something readable and recognizable. If your logo is your name and it’s long and wordy, you should look into incorporating an icon into your visual strategy to use that as your favicon, or maybe create (or ask a designer) for an emblem of your initials to use as your favicon. Once you have an emblem you will want to use it elsewhere, like business cards or stamps!
Once you have your square favicon at around 512 x 512 pixels you are ready to add it to your site.
How to Add a Favicon in WordPress
You can add a favicon or site icon from WordPress admin area.
Go to Appearance » Customize and click on the ‘Site Identity’ tab.
The site identity section in customizer allows you to change the site title, description, and control whether or not you want to display them in the header. It also allows you to upload your site icon..
If the image you are uploading exceeds recommended size, then WordPress will allow you to crop it. If it matches the recommended size exactly, then you can just save your changes.
That’s all you can now preview your site and see your favicon in action.