A favicon is a small but essential element of any website, improving brand recognition and enhancing user experience. WordPress provides multiple ways to add a favicon, depending on whether you’re using an older version of the CMS or a modern theme. In this guide, we’ll explore how to add a favicon using PHP for legacy WordPress versions and the Theme Customizer for newer themes.
Adding a Favicon via PHP (For Older WordPress Versions)
If your WordPress theme is outdated and does not support modern customizer features, you can manually add a favicon using PHP. This method requires adding a few lines of code to your theme’s functions.php file.
This approach works well for all WordPress versions on the frontend, ensuring the favicon is displayed in the browser tab. However, for the backend (admin panel), this method functions reliably only in older WordPress versions, as newer versions prioritize site icons set through the Theme Customizer.
Open your theme’s functions.php file using an FTP client or WordPress theme editor.
Insert the following code:
function custom_favicon() {
echo '<link rel="shortcut icon" type="image/png" href="' . get_stylesheet_directory_uri() . '/favicon.png">';
}
add_action('wp_head', 'custom_favicon');
add_action('admin_head', 'custom_favicon');
add_action('login_head', 'custom_favicon');The function custom_favicon() is responsible for outputting the <link> tag that includes the favicon on the website. This ensures that the favicon is properly linked and displayed in the browser tab.
The get_stylesheet_directory_uri() function dynamically retrieves the URL of the current theme’s directory. This guarantees that the correct path to the favicon file is used, even if the theme is updated or modified.
The add_action() hooks integrate the favicon into different parts of the WordPress environment. The wp_head hook ensures that the favicon appears on the frontend of the website, making it visible to visitors. The admin_head hook applies the favicon to the WordPress admin panel, allowing administrators to see the favicon while managing the website. The login_head hook ensures that the favicon is displayed on the WordPress login page, maintaining a consistent brand identity across all sections of the site.
Make sure to upload your favicon file (favicon.png) to the main directory of your active theme
Adding a Favicon Using Theme Customizer (For Newer WordPress Versions)
For newer WordPress versions (4.3+), the easiest way to add a favicon is through the Theme Customizer.
1. Go to Appearance > Customize in your WordPress dashboard.
2. Click on Site Identity.
3. Locate the Site Icon section and click Select site icon.
4. Upload your favicon image (recommended size: 512x512px).
5. Click Publish to save changes.
This method automatically applies the favicon across the website, admin panel, and login screen without modifying any theme files.
Need Help with WordPress Development?
Whether you’re running an outdated WordPress version or need assistance with modern theme customization, we specialize in WordPress development and optimization. If you require professional support, feel free to reach out—we’ll ensure your website runs smoothly and efficiently!