Not using a favicon is a big mistake that can deter users from visiting or returning to your website. Read our latest guide to learn how to make a favicon and upload it to your WordPress website in as little as five minutes.
The Favicon, or Site Icon, is a small symbol that appears in the window next to the website's title.
Having a favicon for your website assists your users in recognizing your website, and more regular visitors can develop an immediate recognition for that small picture. This raises brand awareness and aids in the development of trust and authority among your target audiences.
It also increases the accessibility and user interface on your website.
In most cases, users have a large number of tabs open in their browser window. As the number of tabs grows, this masks the title of the website. The favicon assists users in easily recognizing your website and switching to the tab they want.
On mobile devices, you can ask your users to connect your site to their homescreen. When a user connects your tab to their homescreen on a mobile computer, your site icon or favicon is still included.
You’ll want to use your brand’s logo as your favicon. The width and height of your site icon image should be at least 512 pixels. The site icon image should be a 1:1 aspect ratio, or a square, but if you need to crop your image, you can do so in the WordPress dashboard.
You should also use either png or jpeg format for your file, and either fill the background with a solid color, or leave it transparent.
Below we’ll walk through three options that are available for adding your site favicon to your website.
For users that are updated to WordPress 4.3 or later, you can add a favicon or site icon from the WordPress admin tab. Log into your WordPress dashboard, and go to Appearance » Customize and choose the ‘Site Identity' tab from the drop-down menu.
This menu will allow you to edit your site favicon, as well as other options such as your site title or description.
Like I mentioned before, if your image is too large, WordPress will allow you to crop it to a smaller size.
If you have an older version of WordPress, or would rather use a plugin, this option is the one you’ll want to follow. You can use the common free plugin Favicon by RealFaviconGenerator if you want a plugin alternative to the native WordPress site icon feature.
This plugin is as simple to use as WordPress's native Customizer. It does, however, include additional interface and software icon compatible options. To use it, go to your WordPress dashboard and install and trigger the free plugin:
To build your favicon package, go to Appearance Favicon after you've enabled the plugin. All you have to do is choose or upload an image with a resolution of at least 7070 pixels (ideally 260260 pixels):
Pick your picture and then press Generate favicon. When you click the button, the plugin will take you to the RealFaviconGenerator website, which is separate from your WordPress account.
Scroll down to Generate your Favicons and HTML code at the bottom of the page (see the previous section). Real Favicon Generator will take you back to your WordPress dashboard as it works:
This is the tab where you can see how your WordPress favicon would look.
Your favicon will then be produced and ready to use. In the plugin's interface, you will see how it would look on various computers.
If your host uses cPanel, you can add a favicon to your WordPress account using File Transfer Protocol (FTP) or File Manager if you want to do it manually.
You'll also need to make your own favicon picture if you use this tool. Follow the actions discussed earlier in this article to accomplish this.
You'll need to do the following to manually apply a WordPress favicon to your website:
Use an FTP client or the File Manager in your hosting cPanel to access your site's archives.
Locate your site's root directory and upload the contents of your favicon kit there (favicons.zip)
The files can be located in the same directory as your wp-admin and wp-content directories. Take the code RealFaviconGenerator gave you earlier and do one of the following:
To apply it to your theme's header, use a plugin like Insert Headers and Footers.
By modifying your theme's header.php file, paste it directly into the head> portion of your theme.
It's best to use the Insert Headers and Footers plugin so it means you won't miss your favicon whenever you switch WordPress themes later.
Install and activate Insert Headers and Footers to do so. Then go to Insert Headers and Footers in Settings and paste the your into the header section of the Insert Headers and Footers plugin.