Creating Favicons and Adding Them on WordPress Website

by Vipe Team in WordPress Design; Published on 20.07.2020

READING TIME: MIN

Thanks for joining us again for the third part of our series on Favicons for WordPress. Before the jump, we’ve learned why we need Favicons, and what sizes and guidelines are important when designing Favicons.

This time around, we get into the thick of things with a bunch of tools and plugins that help you make Favicons easily.

Tools to create Favicon for WordPress

For those in a hurry, quite a few full-featured and well-known Favicon-specific tools come to mind:

Favicon.cc.

This is the foremost and yet, simple-to-use Favicon maker that many people swear by. It’s as straightforward as choosing a colour, painting each pixel in the right colour, and then clicking on ‘Download’. Boom. That’s it.

Faviconer

This tool is also an easy pick, what with it having more features and a better UX than Favicon.cc, including the ability to use your own images and to generate high-resolution files for all the devices you intend to target.

Favicon Generators

These are a special class of Favicon makers, such as those by Dynamic Drive and RealFaviconGenerator. With these, you can load in an image of your choice and let the tools convert it into a Favicon in all the sizes you need – RealFaviconGenerator does an especially good job with sizing.

Plugins to Generate Favicons

As discussed in part 2, Favicons have a specific and separate file format and extension. Thus Favicon generator plugins for WordPress can help with converting the graphics you’ve designed into the Favicon ‘.ico’ format.

PSD to WordPress Conversion – Creating HTML and CSS

Different kinds of plugins are available for this purpose, and with the right plugin, you can convert all image types, emoji or even text into your Favicon. Two such plugins come most recommended:

Favicon

Yeah, that is the name, but you’ll better recognize it as the plugin created by the guys over at RealFaviconGenerator. With the aid of this plugin, you can quickly and comprehensively create a Favicon that will display correctly across any number of devices. The smart thing about this plugin is how, instead of just creating a bunch of image copies at multiple resolutions, it checks for up-to-date Favicon guidelines for every device that you wish to display it on, and converts accordingly.

Heroic Favicon Generator

This plugin can take images in the Media Library and convert them for your Favicon requirements. Do remember, however, that Heroic has not been tested with the last three versions of WordPress. On the flip side, this means that if you’re on an older version of WordPress that doesn’t have the Theme Customizer, Heroic is a great option for your website.

An Overview on How to Add the Favicon to WordPress

There are three basic ways to add a Favicon to your WordPress site, and we’ll list them here, but expect greater detail in the next part of this series:

2023 WordPress UX Trends

The WordPress Customizer

You’re in luck if your website’s theme has the option for Site Icons. In the Dashboard, under ‘Appearance’, select ‘Customize’. Then navigate to ‘Site Identity’, and finally select ‘Site Icon’.

The Theme Options page

Again, this isn’t universally available and will work only if your theme has an options section. Under Theme Options, consult the theme documentation or poke around a bit to find the upload area for Favicons.

Last Resort: Plugin

No surprise here, a plugin is a resort for those who don’t have a Favicon option in the Theme Customizer or a Theme Options page. The ‘Favicon’ plugin, mentioned above, is both free and really convenient, and it works fine without any tweaking.

That’s a wrap on part 3, and we hope you’re well on your way to creating the perfect Favicon for your needs. We’ll see you in the fourth part of this Favicon series with more detail and tools for adding the Favicon you’ve created to WordPress and troubleshooting your Favicon issues.