Favicons are tiny icons you see next to the website name in your browser tab or browser bookmarks. They can also be used for shortcuts to websites on Android or iOS homepage or appear in search results on Google. As such, they help brand recognition and should look and feel professional. Most importantly, they should be legible and in tune with your website content. With that logic, you should spend far more time to plan and create a favicon in WordPress than applying it to your website. We’ll assume you’ve done that and only need to learn how to change a favicon in WordPress.
1. Guide to change favicon in WordPress using Site Identity
Follow these instructions to change a WordPress favicon through Customize menu:
- Log in to your WordPress Admin Section.
- In the main WordPress sidebar on the left, click on Appearance.
- Select Customize.
- Select Site Identity.
- If there’s an existing favicon, it’ll be displayed under Site Icon. Otherwise, it will state “No image selected“.
- Click on Select Image.
- Browse your storage, select the favicon, and click on Open.
- If necessary, make changes in Media Library.
- Satisfied? Click on Save & Publish in the top left corner.
3. Changing favicon in WordPress using a WordPress plugin
The methods above are sufficient for in-browser use on both desktop and mobile. However, it’s hard to preview the way the favicon acts and looks on Android, iOS, Windows 8, and 10 or various browsers if you don’t use them. Also, you’re limited to one favicon that you have to switch manually. To fix that, we recommend installing a WordPress plugin and following the required steps:
Favicon by RealFaviconGenerator
We recommend this one. The plugin developers keep up with compatibility and size/format change. Here’s a step-by-step guide to install and use Favicon by RealFaviconGenerator:
- Upload the favicon to the Media Library.
- Install Favicon by RealFaviconGenerator.
- In the WordPress Admin Section left sidebar, click on Appearance.
- Select Favicon.
- Paste an URL to your favicon or click on Select from the Media Library.
- Click on Generate Favicon to preview and make adjustments.
- Click on Generate your Favicon and HTML code after you’re done.
- Optional. Click on the Check your favicon. The WordPress plugin will open your website, do a compatibility check, and offer suggestions for improvement.
Favicon Rotator
After installing Favicon Rotator, the Favicon option will appear under Appearances too. That means you’ll have to choose which plugin to use. As the name suggests, this one allows you to upload multiple favicons and schedule the time and place they appear. Also, you can choose to randomize the order they appear in.
3. Add or exchange WordPress favicon via FTP
Favicon by RealFaviconGenerator takes you to RealFaviconGenerator.net during the favicon creation process. That suggests that the WordPress plugin isn’t required, and it’s only there for beginners. So, to keep your WordPress lightweight, here are the instructions to add favicon to WordPress using FTP:
- Visit the website and upload your favicon.
- Go through the preview and configuration process.
- Once ready, click on Generate your Favicon and HTML code.
- Navigate to Install your favicon and click on the HTML5 tab.
- Find Download your package and click on Favicon package.
- Don’t close the tab yet.
- Access your WordPress website via FTP and upload “favicons.zip“ you downloaded to the root folder.
- Tip: It’s the folder where folders wp-content, wp-admin, and wp-includes are located.
Now you have 3 ways to apply favicon to WordPress:
1. Insert the code into theme files
To do this, we recommend you use a WordPress child theme. Editing a WordPress theme you installed is possible, but an inferior method. Go to wp-content/themes/yourthemename, and then:
Main theme
If you want to edit a parent/main theme, do this:
- Open the headers.php file.
- Paste the code you were provided in the <head> tag. This means anywhere between <head> and </head>.
- Save changes and preview results.
Child theme
Here’s what to do if you are using a child theme:
- Go to the functions.php file and paste this code:
/* Favicon code snippet from RealFaviconGenerator */
add_action('wp_head', 'add_favicon');
function add_favicon(){
?>
REPLACE THIS WITH FAVICON CODE
<?php
}; - Save changes.
3. Use a dedicated WordPress plugin
The downside of the methods above is that you’ll have to do it again if you decide to delete the WordPress theme and install a new one. Although this beats the purpose of keeping your website light on the resources, you can install a WordPress to mitigate this problem. We mentioned this when we talked about how to edit footer in WordPress. Check the headline “How to add a code snippet to the footer in WordPress“. The process is identical except that you should paste the favicon code into Scripts in Header.