Creating a tight, consistent brand is crucial in the web world, and one of the ways this is achieved is through a website’s overall look and feel. If you’ve overlooked the favicon, that little colorful icon sitting in the tab of your web browser, you are missing out on an easy way to keep visitors recognizing your site and brand. Your favicon is your company’s calling card, one that distinguishes you from the other 37 tabs sitting open on your user’s web browser. It’s a nifty little file that contains multiple iterations of one image at various sizes, which allows for image viewing across all the different browsers and operating systems.
It used to be relatively complicated for users to upload favicons in WordPress. Then in August 2015, WordPress 4.3 came out with favicon integration options built into its core feature set. So this article will give you all the info you need to know on favicons – what they are, how to create them, how to upload them quickly and easily in your post-WP4.3 environment, and some workaround solutions if you haven’t gotten around to updating your version of WordPress in some time (you know who you are!).
So, what is a favicon?
Simply put, a favicon (favorite icon) is a small square image that is created at a relatively high resolution and then saved as a .ico file, which saves the image at a variety of dimensions so it can work across all types of browsers and monitors, or a .png file. You can upload the favicon.ico file to the root of your website and then it will be associated with your website anytime users open your site in their browser, save it as a bookmark, or save it to their home screen on a mobile device. It is most preferable to use at least an .ico file on your site, but you can also include .png files for transparency and recognition by different Apple devices.
As we touched on, your users want to be able to find you quickly in their browser. When page load times in milliseconds makes the difference between 100 and 1,000 users, you want to do everything you can for your website to stand out from the crowd. Your favicon should be relevant to you or your company, and typically it should be your logo or part of it.
How do I create a favicon?
There are several ways to make a favicon. We will go over how to create one locally, or how to create an image using an online favicon generator, and then how to upload it to your website manually or automatically.
If you are a Photoshop (or Illustrator) aficionado, you can start with a 512x512px workspace, create your image (the simpler, the better!) and then save it as a transparent .png if the background contains transparency.
You can then do one of the following:
- Upload the image to your website via the dashboard if you have a post-4.3 version of WordPress (read on for more details on this).
- Save the image at 16x16px as a favicon.ico file, and also as a .png at 32×32, 48×48, and 64×64 pixels as recommended by Microsoft. To save the image as a favicon.ico file in Photoshop, you will need to download a plugin that supports this file type. We recommend the one from Telegraphics.
- Use an online favicon generator to generate the relevant image files and file types.
Favicon Generators
If you aren’t a graphic design pro, then a favicon generator is a nice workaround for generating your base image. However, even if you have an image already, many of the generators will do the heavy lifting to create the file types you need, and some even give you the code you’ll want to drop into the header template of your site files.
Another nice thing about using one of these generators is most of the newer ones support transparency, and some, like Favomatic or Iconifier, will even give you the .ico file and your .png files (important because certain browsers will only recognize the .ico file). Best of all, these are all free online generators! Here are a few favicon generators to check out (if you’re not satisfied try a few, as some tend to pixelate images differently than others):
Favomatic – This service supports transparent PNGs and produces both .ico and .png files. It even gives you the code you’ll need to include in your header.php file for browsers to read .png favicons. This is a true copy/paste solution!
Iconifier – Iconifier generates all the Apple-specific icons you would ever need. It can also produce favicon.ico files.
Favicon.cc – This service lets you create a pixel-by-pixel favicon as well as upload your own image. It also supports transparency.
Faviconer – Faviconer supports 16x16px and 32x32px icon sizes for integration into the favicon.ico file.
How do I install a favicon on WordPress?
You can upload a favicon in several ways – the easiest, by far, is via the built-in tool located in the WordPress Customizer found in newer versions of WordPress. We’ve also included the traditional method for manual favicon integration via a FTP, along with how to use a plugin to achieve the same result if you tend to shy away from back-end server work. Read on for an in-depth look at how to use any of these various tools.
WordPress 4.3 or Later: Built-in Support
One very cool feature introduced in a 2015 core WordPress update was the ability to upload a favicon instantly from within the WordPress Customizer area of your dashboard. So if you have a post-4.3 version of WordPress running on your site (if you don’t, you can download the newest version at WordPress.org), then you can go to the Appearance section in the left sidebar of your site, then click Customize. From there, go to Site Identity and you will see a Site Icon section, where you can select an image from your desktop.
You will want to note that the image needs to be square and at least 512x512px. Once you’ve uploaded the image, you can preview it from this same location. Click Save at the bottom of the screen for your changes to take effect.
Manual Favicon Install on Pre-WordPress 4.3 Environments
If you have not upgraded your WordPress environment to the current version, do so! There are lots of security patches and new fixes and features that are included with each update. However, if for whatever reason, you need to stick with an older version of WP for your website, you can still install a favicon on your site, there are just a couple more steps you’ll want to take.
Once you’ve generated the favicon.ico or favicon.png files (they must have these names), you can do the following:
- Upload the files to your website via FileZilla or another FTP client (delete any old favicon.ico or favicon.png files if there are any in there).
- Drag the new favicon.ico file into the main folder of your current theme, as well as the main folder of your website.
- In your WordPress dashboard, go to Appearance > Editor, then go to the header.php file and look for the line that looks similar to this (it will have the same opening and closing words):
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
Paste the above code in its place. If you can’t find that code at all, paste it under the opening <head> tag (note that if you are making changes to the site files, it is always a good idea to be working from a child theme).
If you are including a favicon.png image, also add the following code on the next line:
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.png" />
- Save your changes and clear your cache to view the updated favicon. Note that some browsers take longer than others to load your new favicon, so if your code is in there correctly and if you have uploaded your files to the correct locations on your server, give it some time for the changes to take effect across browsers.
Favicon Upload Via Plugin
If you are unfamiliar with FTP and you are running an older version of WordPress, a favicon upload plugin is a good option. Here are a couple that are worth checking out:
Favicon by RealFaviconGenerator – You can create the image, and you will get all the file types you’ll need for web browsers, Android, Apple and Windows operating systems.
All-in-One-Favicon – This plugin supports .ico/.gif/.png file types. It has withstood the test of time, having been around since 2010, and it has been widely translated into many different languages.
Custom Favicon – This plugin lets you use the media uploader to upload your favicon files and converts them into all necessary file formats.
Conclusion
We hope this overview helped you sort out what a favicon is and how to use it on your website to maintain a consistent brand across your website. Did we miss anything? Have any great resources or pointers on creating your image? Please let us know in the comments below.
Epicurean Theme