Builders are always looking for new and innovative ways to improve their websites. One way to do that is by adding a favicon. Favicons, or favorites icons, are tiny images that appear next to the URL in a web browser’s address bar. They are displayed in tabs and on bookmarks.
Add a Favicon to Your Website
Adding a favicon (or WordPress refers to it, site icon) is a great way to make your website stand out from the competition and give your users a better experience. Here are three ways to add a favicon to your website.
Method #1 – Site Logo Block
Alternatively, WordPress 5.9 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.
