# How to add Favicons in WordPress There are two components that appear in browser tabs - the title of the webpage that’s open there and a small icon, known as the favicon. Both of these elements make it easier for users to identify a website when there are several tabs open in the browser window. Favicons are also an important part of a company’s corporate branding and improve user experience. When it comes to adding a favicon in [WordPress](https://www.ionos.co.uk/digitalguide/hosting/blogs/creating-a-website-with-wordpress-a-beginners-guide/ "Creating a website with WordPress: a Beginner’s Guide") or changing your existing one, you have **three options**. Keep reading for a step-by-step explanation of favicons in WordPress. ## Why should you add a favicon in WordPress? The term “favicon” is short for “favourite icon”. The small icon is an integral part of a **company’s online presence**. It’s shown in the tab bar of the browser, in the bookmark list, in WordPress mobile apps, and in mobile search results. This makes it important to choose a straightforward yet expressive symbol for your favicon. Adding a favicon to your WordPress site comes with the following **benefits**: - It makes your website look more **serious and professional**. - It makes it easier for the user to recognise your company and what it does, which improves the **user’s experience** of your website. - It has a positive effect on [SEO](https://www.ionos.co.uk/digitalguide/online-marketing/search-engine-marketing/wordpress-seo-tips/). - If the user has several tabs open in their browser, page titles won’t be shown but the favicon is **always visible**. --- ### Tip Most companies use their logo or an adaptation of it for their favicon in WordPress. --- ## How to add or change favicons in WordPress You have three options for setting a favicon in WordPress: using the WordPress Customizer, using a plug-in, or adding it manually. Keep reading for the details on each of these options. --- ### Note In this article, we explain how you can add a favicon to your WordPress site, assuming that you have already created one. If you don’t have a favicon yet, you can make one using most common graphics programs or with a [favicon generator](https://www.ionos.co.uk/tools/favicon-generator "IONOS Favicon Generator"). --- ### Method 1: WordPress Customizer The simplest and easiest method for adding a favicon in WordPress has been available since **WordPress version 4.3**. It’s as simple as uploading your favicon, cropping it if necessary, and then finalising it in a few clicks. If you choose this method for managing your favicon in WordPress, your favicon should have a minimum size of **512x512 pixels**. However, since the icon will be displayed with a size of 16x16 pixels in the browser tab, you should be sure that your logo is still recognisable at this scale. We’ll now explain step-by-step how to set a favicon in WordPress using the Customizer. #### Step 1: Open the Customizer In the WordPress dashboard, click on **“Appearance”** and then “Customize”. [![Image: Favicons in WordPress: Navigating to the Customizer in the WordPress dashboard](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/7/e/csm_EN-wp-favicon-einbinden-wpcustomizer-1_e71cb4c077.webp "Favicons in WordPress: Navigating to the Customizer in the WordPress dashboard")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/EN-wp-favicon-einbinden-wpcustomizer-1.jpg) Open the Customizer in the WordPress dashboard. #### Step 2: Open “Site Identity” The WordPress Customizer will open. Next, click on **“Site Identity”**. [![Image: Favicons in WordPress: Clicking on “Site Identity”](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/1/9/csm_EN-wp-favicon-einbinden-wpcustomizer-2_1391330e00.webp "Favicons in WordPress: Clicking on “Site Identity”")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/EN-wp-favicon-einbinden-wpcustomizer-2.jpg) In the “Site Identity” section, you can edit your website’s title as well as the favicon. #### Step 3: Click on “Select site icon” In this area, you can set the **title and tagline** of your website. This information is displayed next to the favicon in browser tabs. In the section “Site icon”, click on “**Select site icon**” in order to set your favicon in WordPress. [![Image: Favicons in WordPress: The “Site Identity” menu](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/d/4/csm_EN-wp-favicon-einbinden-wpcustomizer-3_90a749b413.webp "Favicons in WordPress: The “Site Identity” menu")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/EN-wp-favicon-einbinden-wpcustomizer-3.jpg) Click on “Select site icon” to upload your favicon. #### Step 4: Select your favicon In the next step, the **WordPress media library** will open. If you’ve already uploaded your favicon to WordPress, you can simply select it. Otherwise, click on “Upload Files” and choose the file from the folders in your computer. Confirm your selection by clicking the “Select” button. [![Image: The WordPress media library](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/6/9/csm_EN-wp-favicon-einbinden-wpcustomizer-4_2466a7c24d.webp "The WordPress media library")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/EN-wp-favicon-einbinden-wpcustomizer-4.jpg) Select your favicon in the WordPress media library or upload it. #### Step 5: Crop your favicon You’ll then have the chance to **crop the image** you selected. WordPress automatically shows a preview of your favicon in the menu on the right. As soon as you’ve finished cropping, confirm your selection by clicking “Crop Image”. If your image is already correctly sized, simply click on “Skip Cropping”. [![Image: The menu for cropping your favicon in WordPress](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/b/0/csm_EN-wp-favicon-einbinden-wpcustomizer-5_b500ae82c0.webp "The menu for cropping your favicon in WordPress")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/EN-wp-favicon-einbinden-wpcustomizer-5.jpg) You can crop your favicon directly in WordPress. WordPress will then **automatically implement your favicon**. If you want to change your favicon again, simply navigate back to the WordPress Customizer as explained above. ### Method 2: Favicon plug-in WordPress offers a plug-in for almost every feature you might need, so naturally there’s one for favicons as well. One of the most popular, free plug-ins is **Favicon by RealFaviconGenerator**. This plug-in provides more options for editing than the WordPress Customizer, so you can improve the compatibility of your favicon with various devices and app icons. In what follows, we explain how you can use this plug-in to add a favicon in WordPress. #### Step 1: Install the plug-in To install the plug-in, open the section “Plugins” in the WordPress dashboard and click on “Add New”. [![Image: Installing a plug-in in WordPress](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/0/9/csm_EN-wp-favicon-einbinden-favicon-plugin-1_ec3c6585c9.webp "Installing a plug-in in WordPress")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/EN-wp-favicon-einbinden-favicon-plugin-1.jpg) Install a suitable plug-in in order to set a favicon in WordPress. Search for the plug-in “Favicon by RealFaviconGenerator”, then select the plug-in in the search results, and click **“Install Now”**. Finally, click on “Activate”. The plug-in is now ready to use. [![Image: The installation menu for the WordPress plug-in Favicon by RealFaviconGenerator](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/9/6/csm_EN-wp-favicon-einbinden-favicon-plugin-2_637a53cf7b.webp "The installation menu for the WordPress plug-in Favicon by RealFaviconGenerator")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/EN-wp-favicon-einbinden-favicon-plugin-2.jpg) Favicon by RealFaviconGenerator is a popular plug-in for managing favicons in WordPress. #### Step 2: Open the settings for the plug-in Once the plug-in is installed, **click on “Appearance” and then “Favicon”**. On this page, you can adjust the settings related to your favicon. [![Image: Navigating to the Favicon plug-in](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/3/e/csm_EN-wp-favicon-einbinden-favicon-plugin-3_d8212d69bb.webp "Navigating to the Favicon plug-in")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/EN-wp-favicon-einbinden-favicon-plugin-3.jpg) Under “Appearance”, you can adjust the settings related to your favicon. #### Step 3: Selecting your favicon Click on **“Select from the Media Library”** in order to open the WordPress media library and select the image you want to use for your favicon. The image is required to have a minimum size of 70x70 pixels; however, a size of 260x260 or larger is recommended. After you’ve selected the image, confirm your selection with the button **“Generate favicon”**. [![Image: Favicon by RealFaviconGenerator: The window for selecting your favicon](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/4/e/csm_EN-wp-favicon-einbinden-favicon-plugin-4_4475e130b4.webp "Favicon by RealFaviconGenerator: The window for selecting your favicon")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/EN-wp-favicon-einbinden-favicon-plugin-4.jpg) Choose the image for your favicon from the WordPress media library. #### Step 4: Set your favicon The plug-in will automatically redirect you to the app’s website. As soon as you’ve uploaded your favicon, you’ll have the **chance to edit** it. Take advantage of these features if you’d like to adapt the appearance of your favicon for desktop browsers, Google search results, or various smartphones. [![Image: Favicon by RealFaviconGenerator: The menu for editing your favicon](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/d/0/csm_EN-wp-favicon-einbinden-favicon-plugin-5_236accdc32.webp "Favicon by RealFaviconGenerator: The menu for editing your favicon")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/EN-wp-favicon-einbinden-favicon-plugin-5.jpg) The plug-in offers a variety of options for editing your icon. If you’ve finished making changes or want to skip over the remaining steps, scroll to the bottom of the page and click on the button **“Generate your Favicons and HTML Code”**. [![Image: Favicon by RealFaviconGenerator: Creating your favicon](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/7/9/csm_EN-wp-favicon-einbinden-favicon-plugin-6_00938714b5.webp "Favicon by RealFaviconGenerator: Creating your favicon")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/EN-wp-favicon-einbinden-favicon-plugin-6.jpg) Confirm your settings with the button at the bottom of the page. The plug-in will then direct you back to the **WordPress backend** and confirm the successful setup of your favicon. [![Image: Favicon by RealFaviconGenerator: Confirmation of successful setup](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/0/1/csm_EN-wp-favicon-einbinden-favicon-plugin-7_d07c4ff384.webp "Favicon by RealFaviconGenerator: Confirmation of successful setup")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/EN-wp-favicon-einbinden-favicon-plugin-7.jpg) The plug-in directs you back to the WordPress dashboard. ### Method 3: Add the favicon manually in WordPress WordPress also makes it possible to manually implement changes in many cases. You can thus add a favicon to your WordPress site using **File Transfer Protocol (FTP)**. You’ll need a favicon package with various files and HTML code. Both of them can easily be created with an online tool. #### Step 1: Create a favicon file Open an **online tool for generating a favicon**. In this example, we use the [“Real Favicon Generator”](https://realfavicongenerator.net/ "Favicon Generator"). In the app, click on the button “Select your Favicon image” to upload the relevant image. [![Image: RealFaviconGenerator: Site for uploading your favicon](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/d/b/csm_EN-wp-favicon-einbinden-manually-1_6c4b15eb2b.webp "RealFaviconGenerator: Site for uploading your favicon")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/EN-wp-favicon-einbinden-manually-1.jpg) Upload the image for your favicon on the Real Favicon Generator. Source: https://realfavicongenerator.net Next, you’ll have the **option of editing** the properties of your image, such as size and background. When you’re done making your desired changes, click on “**Generate your Favicons and HTML code**” at the bottom of the page. [![Image: RealFaviconGenerator: Creating your favicon](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/3/c/csm_EN-wp-favicon-einbinden-manually-2_30280f7f29.webp "RealFaviconGenerator: Creating your favicon")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/EN-wp-favicon-einbinden-manually-2.jpg) The Favicon Generator automatically creates all the files you need. Source: https://realfavicongenerator.net In the next step, you can **download the favicon package** and **copy the HTML code**. Download the package and name it “favicon.ico”, so that it will be recognised as a favicon. [![Image: RealFaviconGenerator: HTML code](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/7/7/csm_EN-wp-favicon-einbinden-manually-3_12da89f829.webp "RealFaviconGenerator: HTML code")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/EN-wp-favicon-einbinden-manually-3.jpg) Download the favicon package and copy the HTML code. Source: https://realfavicongenerator.net #### Step 2: Upload the favicon package using FTP You can now use FTP to access the WordPress data. Open the **main directory** and upload the favicon package there. Be sure that you’re in the same folder as the WP admin or WP content folder. #### Step 3: Insert HTML code Finally, open the file **header.php** and insert the HTML code for the favicon in the header area. Make sure that your domain and favicon path are entered correctly. --- ### Tip Professional [Hosting for WordPress](https://www.ionos.co.uk/hosting/wordpress-hosting "IONOS Hosting for WordPress") offers a simple point of entry into WordPress, with more security and automatic backups of your site. --- This is a markdown version of: [https://www.ionos.co.uk/digitalguide/hosting/blogs/adding-favicons-in-wordpress/](https://www.ionos.co.uk/digitalguide/hosting/blogs/adding-favicons-in-wordpress/) for AI/LLM consumption.