This short guide answers the questions, what is a WordPress Favicon and how to create one? Favicons—or favourite icons—are small 16x16px (pixels) images linked to websites or web pages. They’re visible on browser tabs and any bookmarks you save. Mobile device users can add hyperlinked favicons to the homes screens of smartphones and tablets.
These square icons help to brand a WordPress site or blog, which makes it look more professional and trustworthy. Favicons are especially useful when an internet user has lots of open tabs. It’s much quicker to look for a recognisable image than it is to scan lots of tab text.
Here’s how favicons display on web browser tabs.
And here’s how they look when the user bookmarks (saves) sites to a web browser.
How to Create Your WordPress Favicon
You can create a favicon using any image editing or graphics program. Adobe Photoshop and Gimp are excellent choices, but there are others. Alternatively, opt to use a free or paid favicon generator or image customiser. Favicon.io is a popular tool for creating and editing new favicons or Emojis. It lets you convert various file formats, TEXT, and Emojis into an ICO file.
Favicon File Sizes
You can design a favicon from scratch or use an existing site logo if you have one. However, the new image file must be square and at least 512 x 512px. The visible icons are typically resized down to 16px x 16px. Consider using part of a rectangular logo or redesign it for your favicon.
How to Add a Favicon to WordPress
Jump to the next section if your WP theme or version doesn’t support site icons.
Adding favicons to WordPress is a quick and easy process if your theme allows it. Most users with updated software can achieve this from within the WP Dashboard.
Log in to your WP Dashboard.
Go to Appearance => Customize from the side menu.
You’re now at your themes customisation screen.
- Click Site Identity
- Click Select Site Icon
- Choose a favicon from the Media Library or upload one from your computer
Once you have your favicon icon, click the Select button.
Crop the image on the next screen, then click the Crop Image button to save the changes.
That’s all you do to add a WordPress favicon to your blog or website. You can now preview and publish it from the Site Identity section. There are also options to remove the results if you’re not happy or change the image to something else.
Add Favicon in WordPress Via FTP or Plugins
Some older themes do not support the icon option, and nor does WordPress versions 4.2 and earlier. You can still add a site favicon, but you must use FTP or a plugin (recommended).
10 quick steps to upload a favicon using FTP
Step 1. Open your preferred FTP program and connect to the site.
Step 2. Upload your new favicon PNG file to the root directory.
Step 3. Download a copy of your header.php file before continuing.
Step 4. Log in to your WP Dashboard.
Step 5. Go to Appearance => Theme Editor from the Dashboard menu.
Step 6. Click the header.php link from the Theme Files column.
Note: Jump to the plugin option below if your theme doesn’t show the header.php.
Step 7. Scroll to the end of the header PHP file.
Step 8. Put the cursor at the end of the last line of code and press Enter on the keyboard.
Step 9. Copy & paste the highlighted code into the file (replace mysite.com with your URL)
<link rel=”icon” href=”https://www.mysite.com/favicon.png” type=”image/x-icon” />
<link rel=”shortcut icon” href=”https://www.mysite.com/favicon.png” type=”image/x-icon” />
Step 10. Click the blue Update File button to save your changes and check the site.
Your WordPress website now has a custom favicon.
Upload a favicon using a Plugin
Read our step-by-step plugin installation guide if you’re new to WordPress.
Uploading favicons using a plugin is quick, safe, and easy. There are a few available, but many of them may be out of date now due to a decline in demand. That’s because most WordPress users now have updated software and use modern themes. So, always check that the plugin you like is compatible with your version of WordPress before you install it.
After activating the favicon plugin, click its settings link and follow the product’s instructions.