Add a Favicon to Your WordPress Website

Brian Gardner Avatar

·

Website Favicon

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

WordPress Site Logo / 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.