Insert and change WordPress favicon: Instructions! [2025]

Table of contents
WordPress slow?
We'll sort it out for you!
Change and insert WordPress favicon
This is how easy you can insert and change your website's WordPress favicon in just 3 steps!
Table of contents

Inserting your website favicon takes only 5 minutes in WordPress. We show you in our step-by-step guide how you can quickly and easily insert and change your WordPress favicon.

Insert WordPress favicon: Instructions

The WordPress favicon is now a standard function of WordPress. This means you can save yourself complicated ways! That's why we'll show you how to insert and change your WordPress favicon in a beginner-friendly way. After you have inserted your WordPress favicon, it will be displayed as a small icon in your browser tabs or in the favorites bar, for example, and increases the recognition value of your website.

Favicon example favorites bar

You can integrate your WordPress favicon quickly and easily in just three steps:

  1. Create WordPress favicon
  2. Upload favicon file in the WordPress dashboard
  3. Clear cache and test

Below we describe the individual steps in detail! If you follow our WordPress favicon tutorial, you will have your favicon on your website in about 5 minutes.

Create website favicon file

The first step is to create your favicon, which usually contains (part of) your logo(s). To ensure that the favicon is then displayed correctly, it should fulfill the following format rules:

  • Format 512 x 512 Pixel
  • File format for transparent background: PNG
  • File format for non-transparent background: JPG
    Note: The .ICO file format is no longer required.
  • File size: As small as possible.
    Our tip: For compression, for example, you can use the free and uncomplicated tool TinyPNG use

You can use typical graphics programs such as Adobe Photoshop, Gimp or Canva to create your favicon.

Alternative: Favicon Generator

If you don't use any of these programs, we have a simple alternative for you. Upload your logo to a favicon generator, which will convert your existing logo into a favicon for you. For example, you can use the Real Favicon Generator use

Favicon Generator Screenshot

Click on the blue button "Select your Favicon image!" and upload your logo file from your PC / laptop. After a successful upload, you will be shown a preview because the generator will add borders for you so that your logo corresponds to the required format of 512 x 512 px.

You can style the file for different formats and then create the favicon. You can download the favicon package in the next step via "Favicon Package". In this folder you will find the correct file for the next steps with 512×512 at the end of the file name.

Other simple and practical favicon generators are:

  • Favicon Generatorwhich works in the same way as the Real Favicon Generator described above.
  • favicon.ccwith which you can design and download your own new favicon.

Insert favicon in WordPress Customizer

You now have your file, which you can now integrate into your WordPress website. To do this, log in to your WordPress dashboard and select "Design" > "Customizer" in the left-hand menu. In the Customizer, select the menu item "Website information" > "Select website icon" > "Upload files" and select your WordPress favicon file.

Upload WordPress Customizer favicon

Now just click on "Publish" and you have successfully inserted your WordPress favicon.

Note: For some themes, the new favicon must be uploaded directly in the theme settings. There you can also change the existing WordPress favicon.

Clear cache and test favicon

To make sure that your new favicon is displayed, clear the cache of your website. If you have done this in the WordPress hosting from WPspace free premium caching plugin Accelerate WP, you can simply hover over AccelerateWP at the top of your dashboard and select "Clear and Preload Cache" to clear the cache. The plugin will do the rest for you.

You can either test your favicon yourself, for example by opening your website in a new tab and seeing your favicon at the top of the tab, or by using various Favicon Tester.

Change WordPress favicon

If you want to change your current existing WordPress favicon, you need to follow the same steps as in the "Insert WordPress Favicon" tutorial.

Create your new WordPress favicon and navigate to the "Customizer" > "Website information" in your WordPress dashboard. Here you click on the "Change image" button and upload your new favicon as usual.

Change WordPress favicon

As soon as you click on "Publish", you will publish your new favicon on your website. I also recommend that you clear the cache of your website afterwards when you change your favicon so that the new favicon is visible globally.

Conclusion: Insert and change WordPress favicon

With the favicon you create a recognition value for your website and it should be part of every professional website. As it is now one of the standard functions of WordPress to insert and change the favicon, even beginners can insert their favicon in just 3 simple steps:

  1. Create WordPress favicon
  2. Upload WordPress favicon in the Customizer of your website
  3. Empty website cache and test

So take the 2 to 5 minutes to create your WordPress favicon, insert it and test it properly! The best: Usually you have to insert the favicon only once 😊

Picture of Isabell Bergmann
Isabell Bergmann
As an online marketing manager at WPspace, I love to share my knowledge around online marketing, web design and hosting.

Links marked with an * are affiliate links. If you buy a product via this link, WPspace receives a small commission. There are no additional costs or disadvantages for you! This has no influence on our opinion of individual products and services - we only recommend what we love ourselves.

4 Responses

  1. Hello!
    I look after the homepage of the Austrian Seniors' Association for our local group in Leonding
    about the program TYPO3 CMS 11.5.25 - basically everything o.k.
    BUT
    After uploading the website to the PC or to a cell phone, iPhone or Android, only an "A" or an "O" letter appears.
    However, I would like to see the symbol/icon of the Seniors' Association as an icon here. Similar to an app. I have already saved this symbol as a template as a "favicon" in JPG format.

    I can't find a menu item Design in my dashboard settings, nor any other options ?
    What can I do
    Thank you for your feedback
    Reinhard

    1. Hello Reinhard,
      Thank you for your comment! The favicon instructions refer to the WordPress content management system (CMS). I take it from your comment that you have a TYPO3 website? If so, it's best to google specifically for TYPO3 instructions on how to insert a favicon. If your website is a WordPress website after all, just contact us again via the chat - we will be happy to help you insert the favicon 🤗

  2. If I set a linked document in the link to open in a new tab, then the WordPress FavIcon appears in the new tab instead of the website's FavIcon. How can I change this?

    1. As a rule, a favicon is defined globally for the entire website. This means that it applies to pages, posts and media. If the favicon is not displayed for media, as in your example, the default WordPress favicon is probably still stored in a setting. I therefore recommend that you check all settings again - the WordPress favicon may still be hidden somewhere.

Leave a Reply

Your email address will not be published. Required fields are marked *