Your brand is undoubtedly going to suffer if you don’t establish a clear visual identity on your website. People don’t want to revisit sites that offer a poor user experience and incoherent design. Ensuring that your site stands out in a web browser’s tabs and bookmarks list helps strengthen your brand, and favicons are a simple way to do that.
Favicons enable website owners to establish a strong visual identity while improving the user experience. In this article, we’ll cover everything you need to know about favicons – what they are, where you use them, and how they help you – and discuss the best favicon practices and recommended image formats. We’ll conclude with a mini-tutorial on the three ways to implement favicons in WordPress.
Let’s get cracking!
An Introduction To Favicons
Favicons are those small images displayed in the browser’s tab next to the left of your website’s name:
The first favicons were implemented in the early days of the internet and were first released in Microsoft’s Internet Explorer 5 in 1999. A few months later, the World Wide Web Consortium (WC3) standardized them and they’ve been in practice ever since.
In addition to modern browsers’ tab interfaces, favicons have also found a place in the history and bookmarks on browsers across all devices.
From a visual identity standpoint, favicons are incredibly important for any online business. Internet users often have multiple tabs open in their browser window at a time. Favicons make it easier for them to navigate back to your site. In addition to this, they also build a strong brand identity in your viewership’s mind. By using favicons, your site’s frequent visitors will be able to recognize your website – and hence your brand – with relative ease when they see it the next time.
Favicons can have a powerful effect, even though they only take up a small amount of screen real estate. And just like any other element of branding, they have their own set of rules and best practices that allow website owners to leverage them to their full potential.
Best Practices For Creating And Implementing Favicons
The ‘traditional’ approach is to create ICO files for favicons. That said, most of the major browsers in use today also offer support for favicons saved in the PNG and SVG image formats, and PNG is arguably the ‘modern’ way.
Since support for the SVG file format is still pretty patchy, below we’ll cover the two most commonly used image file formats for creating and implementing favicons.
ICO File Format
Perhaps the most well-known image format for favicons is the ICO file format. It’s supported by all of the major browsers and works seamlessly on mobile devices as well. The ICO file format is pretty neat in that it can store multiple versions of the same image in a single file, and allows the browser to display the image with an optimal resolution for the device that’s accessing your site. In addition to this, it supports 8-bit alpha channel transparency, allowing you to create a visually appealing favicon.
The ICO file format isn’t to be confused with PNG files that are renamed to be ICO files. Some browsers will be kind enough to forgive this innocent mistake, but it won’t help you much beyond that, as real ICO files support multiple versions of an image (while PNGs do not).
Best practices for implementing favicons dictate that even if you prefer to go with a different file format, you should still have an ICO version. The reason behind this is simple: some browsers still look for the default favicon.ico file. If they don’t find it, your site will likely display a generic, default favicon – both of which will do your branding no good at all.
PNG File Format
Despite what the best practices suggest, some of us are born rebels, and choose the PNG file format for our favicons. PNG files are arguably easier to create when compared to ICO files – you can do so in just about any image editing software, with the bare minimum of design skills.
Like ICO files, PNGs also offer 8-bit alpha channel transparency; the only downside is a lack of multiple image sizes.
Favicon Size Options
As we briefly mentioned above, the ICO file format stores multiple versions of an image in different sizes and resolutions. This enables website owners to create their site’s favicon in sizes that are appropriate for use on mobile devices in addition to desktop machines.
The bad news is that offering optimal favicons for mobile devices requires you to factor in more elements, such as the device’s screen size, resolution, and the operating system it runs. The best way to go about it is to offer full support – ICO favicons, PNG favicons, Apple Touch icons, and Windows 8 Tile Graphics.
Doing so ensures that your site’s visitors view the most optimal version of your favicon for their device. For the sake of simplicity, in the following section, we’ll show you how you can create a standard favicon.
Which File Format Should You Use?
The best thing to do is use both ICO and PNG. On one hand, PNG is easy to create in just about any image editing software and represents the ‘future’ of favicons. And on the other, ICO enables multiple file sizes and transparency, though it isn’t perhaps as user-friendly to create.
If you’re familiar with professional image editing tools then it’s best to create both an ICO and a PNG version of your favicon. All you have to do is declare the PNG favicon in the <link> tag and have the ICO favicon stored in your website’s root directory in the favicon.ico file. (We have steps on how to implement favicons on your WordPress website later on.)
How To Create A Favicon For Your Website
There are plenty of options out there for creating favicons. Perhaps the quickest and easiest are the online favicon editors, such as Favicon Generator (which we wholeheartedly recommend). Beyond that, you have good old Adobe Photoshop, not to mention the ever-popular (and free!) GIMP, which is our tool of choice. The steps that follow cover how you can create a favicon for your website using GIMP.
Start by launching GIMP and creating a new file by navigating to File > New:
Set the canvas to 512px by 512px with a resolution of 72 px/inch. Make sure that the color space is set to RGB color and the canvas is filled with transparency.
Design your favicon in the canvas, making sure it takes up the entire canvas (i.e. don’t leave a lot of white space).
When your design is ready, navigate to File > Export and select the .ico extension. Click the Export button to continue.
Saving the favicon as an ICO file has the added advantage that it contains multiple image sizes and the browser will automatically serve the most appropriate size based on the device or operating system accessing it. That’s all there is to it! Now that you have your favicon created and ready to go, all that’s left to do is upload it to your WordPress website.
3 Ways To Add A Favicon In WordPress
Uploading a favicon to your website is the easy part. You should follow one of the three methods listed below, depending on your setup.
Option 1: Upload the Favicon Through the WordPress Customizer
(Note: Not all themes have the option to upload a favicon. If yours doesn’t, you can follow one of the other methods.)
Log into the WordPress admin panel and head over to Appearance > Customize. Next, choose Site Identity > Site Icon and click on the Select Image button.
Once you’ve selected the favicon file, click the Select button. Your favicon will appear under the Site Icon heading of the Site Identity section:
Click the Save & Publish button.
Option 2: Upload the Favicon Through Your Theme’s Options Page
(Note: Not all themes have a built-in theme options panel. If yours doesn’t, you can follow one of the other methods.)
Many themes (especially premium varieties) allow website owners to upload favicons through the theme’s own options page. Divi, for instance, has an option for uploading favicons through its Theme Options panel:
Consult your theme’s documentation (or do a little digging through its options panel, if one exists) to find if this functionality is available to you.
Option 3: Use a Plugin
If your theme doesn’t allow you to upload a favicon through the default WordPress customizer or have a theme options panel built-in, you can use a plugin instead. There are a few plugins available, such as All In One Favicon and Favicon Rotator. However, we’ll focus on our pick – Favicon by RealFaviconGenerator – below.
Favicon by RealFaviconGenerator is a free WordPress plugin that enables website owners to create and upload their favicons. The plugin ensures that your favicon will be optimally viewable on both PC and Mac machines, in addition to iOS, Android, and Windows 8 mobile devices.
To kick things off, head over to Plugins > Add New from your site’s admin panel and install the Favicon by RealFaviconGenerator plugin.
Once you’ve activated the plugin, navigate to Appearance > Favicon to upload the favicon image file:
Click the Generate Favicon button to continue. You’ll be redirected to a screen that allows you to set the configuration options on a device level:
Once you’ve configured the settings, scroll down and click the Generate your Favicons and HTML code button:
That’s all there is to it! You can preview the favicon on different devices in the following screen.
Conclusion
Favicons may not be the most important branding element of your site, but they’re quick and easy to implement and do offer benefits. They’ll give your site the extra oomph it needs to make it pop in a crowded browser window. Having read this tutorial, you’re in a better position now to take things further.
Let’s quickly recap the main points we covered in this post:
Start off by deciding which file format and sizes you’ll need.
Create your favicon using a favicon generator or a professional image editing tool.
Upload your favicon to WordPress using one of the three methods we covered.
Were you able to create and upload your favicon? Get in touch via the comments section below and let us know!
Image credit: geralt.
John Hughes
John is a blogging addict, WordPress fanatic, and a staff writer for WordCandy.
The post A Beginner’s Guide to WordPress Favicons appeared first on Torque.