Add Favicon to wordpress website via Theme settings
To add a favicon to your WordPress website:
- Prepare your favicon image (16×16 or 32×32 pixels, .ico, .png, or .jpg).
- Log in to your WordPress admin dashboard.
- Go to “Appearance” and click “Customize” to open the WordPress Customizer.
- Find and click on “Site Identity” in the Customizer.
- Look for the option to upload your favicon (usually “Site Icon” or “Favicon”).
- Click “Select Image” to upload your favicon.
- Crop or resize if needed and click “Save & Publish” to apply the changes.
Adding Favicon to wordpress website via editing child theme files i.e adding a code snippet to the appropriate child theme file
If your WordPress theme does not provide an option to set the favicon through the theme settings or customizer, you can manually add the favicon to your WordPress website by following these steps:
- Access your WordPress installation files: Connect to your WordPress website’s hosting account using FTP (File Transfer Protocol) or a file manager provided by your hosting provider. Navigate to the root directory of your WordPress installation.
- Upload the favicon file to the child theme folder: In the root directory, look for the WordPress website’s child theme folder you are using. If you have not created a child theme yet, you can learn to create a child theme for wordpress website. We can add favicon via main theme as well but it’s recommended to use child theme as changes made to original theme gets removed once theme updates. In this blog, we will stick with best method i.e using child theme. Theme is usually located in the
/wp-content/themesdirectory. Inside the theme folder , upload your favicon file (e.g.,favicon.ico,favicon.png, orfavicon.jpg). - Edit the functions.php file of the child theme: Open the
functions.phpfile of your child theme in a text editor. - Save the modified
functions.phpfile. - Clear cache: If you have caching plugins or a content delivery network (CDN) in place, clear the cache to ensure the favicon is updated for your visitors.
Add the favicon code: Inside the functions.php file, add the following code:
function child_theme_add_favicon() {
echo '<link rel="shortcut icon" href="' . esc_url( get_stylesheet_directory_uri() ) . '/favicon.ico" type="image/x-icon">';
}
add_action('wp_head', 'child_theme_add_favicon');This code adds a favicon link tag to the header of your website, using the get_stylesheet_directory_uri() function to dynamically generate the correct URL to the favicon file in your child theme folder. “Make sure the parent theme’s header.php file contains the following code inside the <head> </head> tags. If you don’t find this code there, you can copy the header.php file from the parent theme to the child theme’s root folder and add this code inside the <head> tags.”
<head>
//some code
<?php wp_head(); ?> // this line should be there in header.php file.
//some code
</head>After following these steps, the favicon should be added to your WordPress website through the child theme. Test your website in a web browser to verify that the favicon is displaying correctly.