A favicon is a small square icon that represents your website. It is usually displayed next to the website title in the browser tab. The favicon also appears in browser history, in saved page bookmarks, and anywhere your website needs a visual identity.
This small detail is essential for your identity on the internet. We will discuss the WordPress favicon and how to add it to your WordPress website.
Why is it important to put a Favicon on your site?
The favicon is basically the identification of your website. Therefore, it should be your own logo that is displayed there. Ignoring their presence on your site is definitely a mistake.
These are some of the reasons why a favicon is vital for your WordPress site.
- Stand out for brand recognition
Most of the users tend to open multiple tabs in their browsers. Without a favicon, you can only see the name of the page in the browser tab. Also, if you open more than 20 tabs, the tabs get shortened and it’s hard to identify which tab represents which site.
Having a favicon helps users spot your tabs more easily. If your favicon stands out, it will not only improve your visibility, but also the user experience. - Build trust
If you don’t have a favicon, you will give a bad first impression to your visitors. A WordPress website without a favicon does not look professional.
If you create a website just to blog daily, not having a favicon may not be as dramatic. But it becomes essential when it comes to a company website or an online store.
Your visitors will not feel confident to transact on a website that does not look professional. - Improve the mobile experience
We are in the age of the mobile experience. Having a responsive website might not be enough to delight mobile users, mainly because web apps have been on the rise.
Users can simply bookmark a site on the phone’s home screen. No need to type URLs anymore!
With this situation, having a well-designed favicon will serve you in two different ways. First of all, the favicon will be used as the app icon, and second, people who use your web app will remember it. Therefore, your favicon will be associated with your website.
Create a favicon for WordPress
Usually, the favicon is your brand logo. For this image, WordPress recommends that you use a square, sized 512px x 512px.
You can use a larger image, but WordPress will most likely ask you to crop it to fit the size.
To create an image that is exactly one size 512 pixels x 512 pixelsyou can use any image editing software like photoshop (paid) and gimp (free) or .
Although you can choose a background color for the WordPress favicon, transparency is preferred. You can use file formats .jpeg, .ico, .gif either .png (just make sure you use the format .png if you have a transparent background).
When the image is ready, you can add it to your WordPress site using one of three methods:
1. Add a Favicon via WordPress Customizer
From the version 4.3 of WordPress, you can add the WordPress favicon from the administration area. To do this, follow these steps
- go to Administration panel.
- mouse over Appearance -> Customize.
- Choose site identity.
- Click the button select image in the section site icon.
- Upload the favicon you have prepared.
- Click the button Post to save the changes.
If you complete the process correctly, your favicon will appear next to the title of the website. To set this up on a mobile device, visit your website from your smartphone and select Add to home screen.
Your favicon will now appear on the home screen.
2. Add a WordPress Favicon to the Site with a Plugin
You can also add a favicon to WordPress with the help of a plugin called . It is easy to use and offers more features. These are the required steps:
- go to Administration panel.
- Choose Plugins -> Add New.
- Write Favicon by RealFaviconGenerator in the search field.
- Install and activate the plugin.
- After activation, go to Appearance -> Favicon.
- Upload the image you want to set as a favicon. You don’t need to edit your image with image editing software as the plugin will do it for you. Just make sure the image is sized at least 70x70px. It’s even better if it’s above 260x260px.
- After uploading the image, press the button Generate Favicon.
- After clicking the button, the plugin will take you to the website RealFaviconGenerator.
- On the website, find and click the button Generate your Favicon and HTML code.
- The plugin will take you back to your website. You will receive a notification that your favicon has been configured.
- Check how your favicon looks in a browser and on a mobile device.
3. Manually Add a Favicon to a WordPress Site
We recommend you test this on your local development site before it goes live.
- Access the theme files through an FTP client or file manager.
- Find the folder /wp-content/themes/your-theme.
- Upload your favicon to the themes folder. It is recommended to upload it to a subfolder like assets.
- Remember this file path.
- Look for a file called function.php and add the following code:
function add_favicon() { echo ‘‘; } add_action(‘wp_head’, ‘add_favicon’);
- The line after href=”’.get_template_directory_uri() it should be the path to your favicon. Also make sure the file name is correct. If you use a file format .icothis will be the code:
function add_favicon() { echo ‘‘; } add_action(‘wp_head’, ‘add_favicon’);
conclusion
Having a favicon is a must, especially when it’s so easy to create and upload a favicon for WordPress.
A favicon represents the identity of your website. It may only take up a small amount of space on your site, but this little detail has a special role to play in helping to improve your brand recognition and user experience.
You can also check how on a website that has not been created with WordPress.
Gustavo is passionate about creating websites. He focuses on the application of SEO strategies at for Spain and Latin America, as well as the creation of high-level content. When he is not applying new WordPress tricks you can find him playing the guitar, traveling or taking an online course.
Facebook Comments
Disqus