Builders are continually exploring fresh and innovative methods to enhance their websites. A straightforward enhancement is the addition of a favicon.
Favicons, also known as favorites icons, are small yet impactful images next to the URL in a web browser’s address bar. They enhance brand recognition and provide a polished look as they are displayed in browser tabs and bookmarks, making the site more memorable and professionally appealing.
Add a Favicon to Your Website
Incorporating a favicon, or as WordPress terms it, a site icon, is an excellent strategy to distinguish your website from competitors and enhance user experience. Here are three ways to integrate a favicon into your website.
Method #1 – Site Logo Block
Alternatively, a recent WordPress update introduced a feature with the Site Logo block. Users can now set their site logo as their site icon (favicon). Below is a screenshot of the site editor, with the site logo selected and the toggle option in the right sidebar: Use as site icon.
Note: Unlike traditional favicons that utilize a .ico file, site icons can be uploaded through WordPress as .jpg and .png files.
Method #2 – Custom Function
Below is a code snippet that will add a favicon to your website. Place this in your theme’s functions.php file. Next, add a favicon.ico file inside of a folder called /images/ located inside of the theme.
// Add favicon to your website.
add_action( 'wp_head', 'add_site_favicon' );
function add_site_favicon() {
echo '<link rel="shortcut icon" type="image/x-icon" href="' . get_template_directory_uri() . '/images/favicon.ico" />';
}
Code language: PHP (php)Method #3 – Theme Customizer
The WordPress Customizer allows users to modify parts of a website easily. This feature is found in the dashboard through Appearance > Customize > Site Identity. There, a site icon can be uploaded, replaced, or removed.
