Add Snippet To Project
When it comes to creating a cohesive and polished website, even the smallest details matter. One such detail is the favicon – that small icon that appears next to the website title in the browser tab. But did you know that you can have different favicons for the backend and frontend of your WordPress site? In this article, we’ll explore why having different favicons can be beneficial and walk you through the process of implementing them on your WordPress site. So, let’s dive in and make your website stand out with customized favicons for the backend and frontend!
function wpturbo_backend_favicon() {
?>
<link rel="shortcut icon" href="<?php echo esc_url( get_stylesheet_directory_uri() . '/backend-favicon.ico' ); ?>" />
<?php
}
add_action( 'admin_head', 'wpturbo_backend_favicon' );
function wpturbo_frontend_favicon() {
?>
<link rel="shortcut icon" href="<?php echo esc_url( get_stylesheet_directory_uri() . '/frontend-favicon.ico' ); ?>" />
<?php
}
add_action( 'wp_head', 'wpturbo_frontend_favicon' );
The code snippet provided allows you to display different favicons for the backend and frontend of your WordPress website.
To achieve this, we are using two separate functions: wpturbo_backend_favicon() and wpturbo_frontend_favicon().
In the wpturbo_backend_favicon() function, we use the <link> tag to add a shortcut icon (favicon) to the admin area. We set the href attribute to the path of the backend favicon file. In this example, we are using a file named "backend-favicon.ico", but you can replace it with the path to your own favicon file. To generate the correct path, we use the get_stylesheet_directory_uri() function to get the URI of the current theme's directory. The esc_url() function ensures that the URL is properly formatted and escaped.
<link rel="shortcut icon" href="<?php echo esc_url( get_stylesheet_directory_uri() . '/backend-favicon.ico' ); ?>" />Next, in the wpturbo_frontend_favicon() function, we follow the same process but for the frontend of the website. We add the <link> tag with the href attribute set to the path of the frontend favicon file. In this example, we are using a file named "frontend-favicon.ico".
<link rel="shortcut icon" href="<?php echo esc_url( get_stylesheet_directory_uri() . '/frontend-favicon.ico' ); ?>" />To complete the implementation, we need to hook these functions into the appropriate actions. In the case of the backend favicon, we use the admin_head action, and for the frontend favicon, we use the wp_head action.
add_action( 'admin_head', 'wpturbo_backend_favicon' );
add_action( 'wp_head', 'wpturbo_frontend_favicon' );By using these actions, the backend favicon will be added to the <head> section of the admin area, and the frontend favicon will be added to the <head> section of the website.
As a result, users will see different favicon icons depending on whether they are in the admin area or on the frontend of the website. This can be useful to visually distinguish between the two sections and provide a more consistent user experience.