While visiting a website, you may notice a small icon appearing on the browser tab. This small icon is the site icon, also known as the favicon. It represents the identity of a website and appears in various places like bookmarks, app icons, and address bars.
Though a site icon looks very small, it can help visitors quickly recognize and remember your website. A site icon can be a logo or an image that represents the brand identity of your website.
There are several methods of adding this element to a website. In this article, we’ll break down all the possible methods of how to add a site icon on WordPress websites using a plugin and the WordPress customizer option.
Method 01: Add a Site Icon on WordPress Using the Site Icon Option
- Log in to the WordPress dashboard.
- Navigate to Settings > General.
- Click on ‘Choose a Site Icon‘ option.
- Then upload an icon. (The icon should be square and at least 512 × 512 pixels)
- Once the photo is uploaded, scroll down and click on the ‘Save Changes‘ button.
That’s it. Your site icon will be visible in the browser tab.
Visit this post to learn how to add a search bar in the WordPress header.
Method 02: Add a Site Icon on WordPress Using a Plugin
There are numerous plugins available by which you can create a site icon on WordPress websites. Favicon by RealFaviconGenerator, All in One Favicon, and WP Favicon are some most popular of them.
Besides, you will get this option in page builders like Divi and Elementor. This section will explain the process using the Favicon by RealFaviconGenerator plugin.
- Install and activate the Favicon by RealFaviconGenerator plugin.
- Then, navigate to Settings > Favicon.
- You will get a link with the anchor text Appearance > Favicon.
- Click on the link.
- It will take you to a new page.
- Click the Select from the Media Library button.
- It will allow you to upload a photo from your local drive or add it from Media files.
- Once the photo is added, click the Generate favicon button.
- You’ll be asked to upload a photo and crop it.
- Scroll down the page once all the processes are done.
- You’ll get the Generate your Favicons and HTML code button.
- Click the button.
- You’ll see the favicon has been ready and their preview modes in this section.
- You can check how the site icon works by clicking the Check your favicon icon.
Final Takeaway!
Creating a site icon is a simple process but carries a lot of importance in its branding and upholding user experience. There are some points (best practices) you must remember while creating a site icon.
Always use a simple and easy-to-remember design. Make sure the photo has high resolution and the correct size. Cross-check if this photo represents your web logo and is consistent with your brand color.
If you are satisfied with this article, be sure to let us know through the comment section. It will inspire us to cover more interesting topics in the coming days.
Leave a Reply