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.