Favicons are the tiny icons that can be seen on browser tabs next to website names. They can also be found in your browser history, bookmarks, and more.
Your favicon or ‘site icon’ is a vital part of your website’s branding. These tiny, little images play a big part in your site’s user experience, credibility, and brand recognition.
In this guide, we’ll explain what a favicon is, where they are found, and why they are important. We will also provide some best practices for creating a favicon and finally show you how to add a favicon in WordPress.
NOTE: TarttWeb is reader-supported. This means that we may earn a small commission at no additional cost when you make a purchase through referral links on our site.
If you’d like to jump to the section you’re looking for, a hyperlinked table of contents is available.
What is a Favicon?
A favicon, short for favorite icon, is a small square image icon used to represent your website, brand, or business. This terminology dates back to Internet Explorer when bookmarks were called Favorites. Later it was standardized by the World Wide Web Consortium (W3C) with the release of HTML 4.01 and started appearing more consistently in web browsers.
Nowadays, a favicon is also referred to as a site or website icon, tab icon, URL icon, bookmark icon, shortcut icon, and desktop icon.
Favicons were initially created to go to the left of your website name in your web browser tab. If you look at the browser tab, the one you are on now, you will immediately notice TarttWeb’s favicon.
Where are Favicons Found?
Below is a list of numerous locations where favicons can be found.
- Website Browser Tab: You can find a website’s favicon if you look at the tab in your web browser.
- Bookmarks or Favorites: You can see a website’s favicon in your web browser’s bookmarks or favorites section.
- Bookmarks Toolbar: You can see favicons when you have your bookmarks toolbar enabled in your browser.
- Web Browser’s History: When you browse through the history area of your browser, you will notice favicons next to the website name.
- Browser Searchbar: Some web browsers will show the favicon directly in the search bar.
- Search Results: Sometimes you can see favicons show up in your search results.
- Desktop Shortcuts: When you save a website to your desktop you can see the website’s favicon.
Favicons can also be found on Apple products within IOS, including Google Android on Mobile Phones, Tablets, and Chromebooks.
Why are Favicons important?
Creating and setting up a favicon is an important step to having a successful well-branded website or business. Having a favicon can add legitimacy to your site and helps build trust with site users. They also provide an immediate visual marker that enables users to quickly identify your brand.
How to Create a Favicon for Your WordPress Site
Typically, when you create a favicon, it will need to be saved in the .ico format, but with WordPress, there is no need. Because WordPress does all the work for you.
To create a favicon for your WordPress site, you’ll need to create an image with a width and height of 512px. You will also need to save your favicon image as a .jpg, .png, or .gif file. If you want your favicon to have a transparent background, you need to save your image as a .png or .gif file.
We recommend you save your image in the .png file format.
There are countless tools on the internet that you can use to create a favicon for your website. You can pay someone to make one for you or you can make your own using a graphics/image editor.
If you already have a favicon, you’re ready to use. You can skip to the next section. Otherwise, let us look at how you can create one for your site.
Selecting the Right Tool
To create a favicon for your website you will need to use a graphics/image editing app. There are countless online image editing sites and plenty of apps you can install on your computer. Below is a list of some popular ones.
- Adobe Photoshop (Raster) / Illustrator (Vector)
- CorelDRAW (Vector)
- Sketch (Vector)
- Canva (Online / Free)
- Pixlr (Online / Free)
- Gimp (Raster / Free)
- Inkscape (Vector / Free)
Favicon Best Practices
Although favicons are small and may seem insignificant, they play a vital part in your website’s overall design and identity.
These tiny icons can say a lot about your website and brand. They contribute to the user experience and help build credibility and trust with users. Nowadays, web users have even come to expect them.
- Your favicon should connect directly with your brand identity. Favicons are often too small to include a logo. Try using an element that is identifiable, like the first letter of your brand name.
- Think about the shape you want your favicon to be. By default, favicons are square. If you want something else, you’ll need to use a transparent background.
- Use a simple color palette for your favicon. Because the image is so small you’re not going to be able to use many colors. Two colors with lots of contrast between them will work fine.
- Lastly, avoid using words and complex images. Try to keep it simple.
Favicon Design Techniques
The most important rule for designing your favicon is to keep it simple. Don’t go crazy with colors, text, or complex brand elements.
Try to use two colors with high contrast so your icon can be seen. If you are going to use text, then use one or two letters. You’ll also want to avoid using any type of animation in your favicon.
If it helps, consider this project as a design challenge. Creating something so small that is crisp, clear, and easy to read can be difficult.
The best method for creating a favicon for your WordPress website is to create it as a vector and save it as a .png with a transparent background.
Even though the favicon is small, it represents your brand and identity, so take your time and create something meaningful that will last.
How to Add a Favicon in WordPress
Once you’ve finished and you’re satisfied with your favicon design, you are ready to add it to your site.
In this section, we will show you the fastest and simplest way to add a favicon in WordPress using the WordPress Customizer.
If you’re unfamiliar with the WordPress Customizer we suggest reading our guide on how to use the WordPress Customizer.
For this guide, we are using the WordPress Twenty Twenty-One theme. Alright, let’s get started.
Step 1. Open the WordPress Customizer
The first step is to open up the WordPress customizer on your site. To do this, navigate to the Appearance > Customize screen by hovering over Appearance, located on the left main navigation, then click on Customize.
Step 2. Navigate to the Site Identity Tab
Now that the customizer is open, locate the Site Identity tab and click on it.
Step 3. Select Your Site Icon
Within the Site Identity tab, look towards the bottom for the Site Icon section.
Now click on the Select site icon button. You will then see the WordPress Media Library interface open. You can either select an existing image or upload a new one by clicking on one of the two options at the top.
Once you have selected the image you want to use, click on the Select button located in the bottom-right corner.
Note: Be sure to fill out the Alt Text, Title, and Description for your favicon image.
Step 4. Publish Your Changes
When you are finished selecting the image you want to use as your favicon, you’ll need to publish your changes.
To make your changes go live, click on the big Publish button at the top.
You can also schedule your changes for another time. Do this by clicking on the gear icon next to Publish. Now select Schedule. Then choose your desired date and time. When you’ve finished, click on the Schedule button.
Step 5. Verify Your Site Icon
Lastly, you need to verify your website’s favicon. You can do this by looking at your internet browser tab. Try bookmarking it to see how it looks. If you’re unhappy with it, change it, and come back to this area to upload a new one.
TIP: If your new favicon isn’t showing up, you may have to clear the cache of your browser.
Wrapping Up
In this guide, you learned what a favicon is and why it’s important. We provided you with some best practices and design techniques to help you create one of your own. And we showed you how to add a favicon in WordPress.
Although favicons are tiny little images that can seem insignificant, they can have a huge impact on your site’s user experience, brand recognition, and credibility.
If, you found this article helpful, let us know in the comments section, follow us on social media, or subscribe to our newsletter for more. If you need a guide or article written, contact us and select article request in the dropdown.
