Add a Favicon to Your WordPress Website

Brian Gardner Avatar


Website Favicon

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.

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.