Add a Favicon to the WordPress Site

To add a favicon to your WordPress site, you can use the wp_head action hook to insert the necessary HTML code in the head section of your site. Here’s an example code snippet that you can add to your theme’s functions.php file:

function wpsnippets_add_favicon() {
    echo '<link rel="icon" href="' . esc_url( get_stylesheet_directory_uri() ) . '/favicon.ico" type="image/x-icon">';
}
add_action( 'wp_head', 'wpsnippets_add_favicon' );

This code defines a custom function wpsnippets_add_favicon() that echoes the HTML code for the favicon link. The get_stylesheet_directory_uri() function retrieves the URL of the current theme’s directory, and esc_url() sanitizes the URL for security. The favicon file should be placed in your theme’s directory and named favicon.ico.

By using the wp_head action hook, the wpsnippets_add_favicon() function will be executed when the wp_head action is triggered, allowing the favicon code to be added to the head section of your site’s HTML.

This code snippet is useful when you want to add a custom favicon to your WordPress site. The favicon is a small icon that appears in the browser’s tab or window title bar, providing visual branding for your site.

Examples

Example 1: Adding a Favicon using a Plugin

This use case demonstrates how to add a favicon to a WordPress site using a plugin. The code example shows how to use the “All in One Favicon” plugin to easily add a favicon to the site.

// No code example needed for this use case.

Explanation: Install and activate the “All in One Favicon” plugin from the WordPress plugin repository. Once activated, go to the plugin settings page and upload your favicon image. The plugin will automatically add the necessary code to the site’s header to display the favicon.

Example 2: Adding a Favicon using a Theme Function

This use case demonstrates how to add a favicon to a WordPress site using a custom theme function. The code example shows how to use the wp_head action hook and the wp_link function to add the favicon code to the site’s header.

function wpsnippets_add_favicon() {
    echo '<link rel="icon" href="' . esc_url( get_stylesheet_directory_uri() ) . '/favicon.ico" type="image/x-icon">';
}
add_action( 'wp_head', 'wpsnippets_add_favicon' );

Explanation: Add the above code to the theme’s functions.php file. The wpsnippets_add_favicon function echoes the favicon code, using the get_stylesheet_directory_uri function to retrieve the URL of the theme’s directory. The add_action function hooks the wpsnippets_add_favicon function to the wp_head action, ensuring that the favicon code is added to the site’s header.

Example 3: Adding a Favicon using a Child Theme

This use case demonstrates how to add a favicon to a WordPress site using a child theme. The code example shows how to create a child theme and add the favicon code to the child theme’s functions.php file.

function wpsnippets_add_favicon() {
    echo '<link rel="icon" href="' . esc_url( get_stylesheet_directory_uri() ) . '/favicon.ico" type="image/x-icon">';
}
add_action( 'wp_head', 'wpsnippets_add_favicon' );

Explanation: Create a child theme by creating a new directory in the wp-content/themes directory and adding a style.css file with the required theme information. Inside the child theme’s directory, create a functions.php file and add the above code to it. The wpsnippets_add_favicon function echoes the favicon code, using the get_stylesheet_directory_uri function to retrieve the URL of the child theme’s directory. The add_action function hooks the wpsnippets_add_favicon function to the wp_head action, ensuring that the favicon code is added to the site’s header.