How many tabs do you keep open in your browser at a time?
An unofficial Facebook poll shows that the average user keeps 15 tabs open at a time, with some getting as high as 55 or 60! But no matter how many tabs you have open, chances are high you use the favicons, or site icons, to quickly identify and move between those tabs.
A little background
Microsoft first introduced favicons in 1999 with Internet Explorer 5. Their original intention was to add a visual element to bookmarks. Today, favicons are an important part of a website’s branding and usability.
The best favicons are easily recognizable and closely related to the brand as a whole. They can be fun or serious, colorful or black-and-white, text or imagery. But no matter what your favicon looks like, it’s an important way to help visitors quickly identify your brand in their open tabs and bookmarks.
Before WordPress 4.3, adding or switching out a favicon required placing the file in the root directory of your server using FTP. And the file needed to be a set up as a 16-by-16 pixel image known as an .ico file, rather than a standard .jpg or .png. In other words, it was a bit of a pain to create and add a favicon to your site.
Now, however, you can do it in just a few minutes from within the admin dashboard, skipping right over the FTP business!
Create your favicon
The first and most important part of creating your favicon is the image itself. Even though it’s tiny and only used for a very specific purpose, your favicon is part of your overall brand and should be easily identifiable.
Use Canva or your favorite image editing program to create a custom favicon for your site. Because it displays differently in different places, you want to create it as a 512x512px square; WordPress will generate the size needed for each application.
Hint: While creating a large image will make your favicon more versatile, you want to be sure it’s still legible and recognizable at 16x16px, as it will appear on most browser tabs. Set the view in your image editing software to 3-4% to see it as it will appear in a browser.
How to upload or change your favicon
- Log into your WordPress Admin Dashboard.
- Hover over Appearance on the left sidebar and select Customize. This opens up the Theme Customizer with the specific options for your theme.
- From there, select Site Identity.
- Next, click on Select site icon or Change image to upload the image you would like to set as your favicon. After selecting your image, you’ll get a chance to crop, lightly edit, and preview it.
- Lastly, click the Publish button in the upper right corner of the Theme Customizer menu to complete the process.
Your favicon is all set!
Just for fun…
How many tabs are open in your browser right now? Can you read the site titles, or are the favicons all that show?
With 10 years of experience as a professional blogger—and as a former Agathon hosting client herself—Mandi’s passionate about the good work Agathon does and sharing that message with more people.