Favicons Are Those Little Icons With Big Consequences!
What Is a Favicon, You Ask?
It’s that handy-dandy little “favorite” icon you see on your browser tab beside the name of the web page you are browsing.
Favicons are used for branding.
Once you know about favicons, you’ll start watching for them. Typically, they match the website logo but may be slightly different. Sometimes it’s only an initial. If you become a favicon watcher, like me, it may start to bother you when it goes to a default icon. It looks unprofessional to have the blank page icon or theme icon.
Fortunately, Sweetened Condensed Web Solutions can help you create and install the necessary favicons based on your logo.
How Many Icons Does a Website Need Anyway?
Why does a site need so many versions of those little icons? Each type of device—cell phone, tablet, or computer—requires a unique favicon size and style. You’ve seen the icons on your smartphone home screen, haven’t you?
Where’s Your Favicon?
Here’s an easy way to check if you’ve uploaded your logo to your website in all the versions.
- First, look at the tab on your browser when you open your site.
- Does the icon look like your logo or is it the default favicon/icon?
- Do you see it? Check!
- Now open your site on your smartphone.
- Click on the phone’s menu in the upper right corner.
- There should be a place to save Add the Page to the Home Screen.
- Save it and check your home screen.
- If you have app pages on your screen, you may have to flip to the last page to find it.
- Do you see your icon there? Check!
Step-by-Step to Add Your Favicon/Icon
- You need a square logo 512 pixels wide and tall. It looks best if it is sharp, distinctive, and readable as a tiny icon. Most favicons use a logo that is a symbol or a letter or two in the colors of the brand.
- Log into your site, under Appearance, click on Customize.
- Then click on Site Identity.
- When this opens, look for the Use for site title/logo: drop-down menu and choose Image logo.
- Follow the directions to upload your square 512px logo.
- WordPress automatically creates different icons are sized for PCs, tablets, and smartphones.
- Once you saved it, it should show you a little thumbnail of the favicon on a browser tab and a larger icon right next to it.
- Go back to Where’s Your Favicon and check again. You may need to clear your browser to show the update.
It’s the little things that make your website look branded and professional.
In case you want the techie details, here’s a link to the WordPress Codex for Creating a Favicon.
Contact us if you need help creating and installing your favicon.