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.
You can integrate your WordPress favicon quickly and easily in just three steps:
- Create WordPress favicon
- Upload favicon file in the WordPress dashboard
- 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
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.
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.
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:
- Create WordPress favicon
- Upload WordPress favicon in the Customizer of your website
- 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 😊
4 Responses
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
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 🤗
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?
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.