Table Of Contents
- How to Add a WordPress Favicon to Site via WordPress Customizer
- How to Add WordPress Favicon to Site With a Plugin
- How to Add WordPress Favicon to Site Manually
Favicons are most commonly known as the small icon that displays next to a website’s name in a browser tab. And while that’s where they originated, favicons are also used in other places like browser bookmarks, iOS home screen buttons, and more. Below, you can see an example of a site with a favicon vs. a site without a favicon:
In this article, we’ll give you three different ways to add a WordPress favicon to your site. If you already know which method you prefer, you can use the links below to jump straight to a specific section:
As of WordPress 4.3, all WordPress sites include a site icon feature that makes it easy to upload and crop an image to use as a favicon.
For most users, this is the simplest method for adding a favicon icon to WordPress. All you’ll need is an image that’s at least 512×512 pixels. WordPress will handle the rest of the process.
To get started, go to Appearance → Customizer in your WordPress dashboard:
From there, navigate to the Site Identity tab:
Then, look at the bottom for the Site Icon section and click the Select Image button:
The normal WordPress media library interface will open. You can either choose an existing image in your WordPress Media Library or upload a new one. Remember – WordPress recommends using an image that is at least 512x512px.
Once you have an image that you like, click on the image and choose Select in the bottom right corner:
If your image isn’t already a perfect square (e.g. 512×512 px), WordPress will give you a chance to crop your image on the next screen. Use the box to highlight the portion of the image that you want to use for your icon.
You can see a preview of how your cropped image will look on the right side of the interface.
Once you’re happy with how things look, click Crop Image to finalize your choice:
And that’s it! All you need to do is click Save & Publish to make your favicon live.
If you ever want to change your favicon in the future, you can come back to this interface and click Change Image:
If you’d prefer a plugin solution to the native WordPress site icon functionality, you can use a popular free plugin called Favicon by RealFaviconGenerator. The plugin is just as simple to use as the native WordPress Customizer but offers additional helpful compatibility options for various devices and app icons.
To use it, install and activate the free plugin via your WordPress dashboard:
Once you activate the plugin, go to Appearance → Favicon to create your favicon set.
All you need to do is select or upload an image that’s at least 70×70 px (ideally 260×260 px):
Once you select your image, click Generate favicon. After clicking that button, the plugin will take you outside your WordPress site to the RealFaviconGenerator website.
At the RealFaviconGenerator website, scroll down to the bottom and click Generate your Favicons and HTML code:
After a short period, while the tool works, Real Favicon Generator will send you back to your WordPress dashboard. Your favicon is now set up and ready to go. You can view previews of how it looks on different devices in the plugin’s interface:
If you’d prefer to do things manually, it’s also possible to manually add a favicon to your WordPress site via FTP and some minor code snippets. If you go with this method, you’ll also need to create your own favicon image because you won’t have WordPress’ help anymore.
How to Create a Favicon Picture
In the past, you had to use a specific ICO file for your favicon. But nowadays, all modern browsers support the use of ICO, PNG, and GIF files for your favicon. JPEG is widely supported (read: JPG vs JPEG), but not in all Internet Explorer versions, which makes it less ideal for use as a favicon.
If you’re familiar with Photoshop, you can use Photoshop to manually create a favicon. With that being said, it’s often easier to just use a basic cloud-based tool to create your favicon icon set from an existing image.
Real Favicon Generator (the cloud-based version of the plugin used in the previous section) is a great option because:
- It creates app icons as well as favicons
- It gives you favicon icons as both PNG and ICO formats
- You can customize your favicon after uploading your image
- All you need to do is paste the code that the plugin gives you
Other good favicon generators are:
- Favicon.cc – lets you create a favicon from scratch as well as upload an existing image
- Favicon-Generator – functions similarly to Real Favicon Generator
To use Real Favicon Generator, start by uploading the image that you want to use for your favicon:
On the next screen, you can configure specific details about your favicon set (if desired).
When you’re finished, or if you don’t want to make any changes, just scroll to the bottom and click Generate your Favicons and HTML code:
How to Install Your WordPress Favicon
On the next page, click the Favicon package button to download your favicon images. Also, make sure to leave this page open because you’ll need to the code to add your favicons:
Connect to your WordPress site via FTP and upload the contents of your Favicon package (favicons.zip) to the root folder of your WordPress site:
The files should be in the same folder as your wp-admin and wp-content folders.
Then, take the code that Real Favicon Generator provided you with and either:
- Use a plugin like Insert Headers and Footers to add it to your theme’s header
- Paste it directly into the section of your theme by editing your theme’s header.php file
Using the Insert Headers and Footers plugin is optimal because it ensures you won’t lose your favicon if you switch WordPress themes down the road.
To do so, install and activate Insert Headers and Footers. Then, go to Settings → Insert Headers and Footers and paste the code into the Scripts in Header section:
Make sure to Save your changes and you’re all done.
Tip 1: Unique WordPress MultiSite Favicons
If you want each site in your Multisite network to have a unique favicon, the easiest way is to use a favicon plugin like the plugin featured above. You can also use the Heroic Favicon Generator plugin, as long as you make a small manual tweak to its code.
While it’s possible to edit your theme’s files to allow unique favicons for each network sites, the process is significantly more complicated than using a plugin.
Tip 2: Use a Content Delivery Network to Serve Favicon Images
Because all three methods outlined above store your favicon images on your server, you can optimize your site further by using a content delivery network (CDN) to serve your images.
By installing Cloudflare or a service like KeyCDN, you’ll be able to have your visitors load your favicon from your CDN instead of your server. If you are using a plugin like CDN Enabler, it should automatically rewrite your WordPress favicon URL to work with the above methods.
If you enjoyed this tutorial, then you’ll love our support. All Kinsta’s hosting plans include 24/7 support from our veteran WordPress developers and engineers. Chat with the same team that backs our Fortune 500 clients. Check out our plans