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, making the site more memorable and professionally appealing.
Add a Favicon to Your Website
Incorporating a favicon, or in WordPress terms, 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 – WordPress Settings
In WordPress 6.5, updating your site icon became more intuitive. Users can add or change the site icon directly from the General Settings panel. Navigate to Settings → General to update your site’s visual identity. This enhancement eliminates the need to use the Site Editor or Customizer for this task, making the experience smoother and more efficient.
Below is a video that shows how easy this method is:
Method #2 – 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 #3 – 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)