- 1 How can your WordPress website establish a strong visual identity at first glance? How do you make your pages and posts stand out in a sea of tabs? How do you enforce brand consistency across devices?
- 2 Favicons – What, Where and Why?
- 3 Best Practices and Image Formats
- 4 How to Create a Favicon
- 5 How to Add a Favicon
How can your WordPress website establish a strong visual identity at first glance? How do you make your pages and posts stand out in a sea of tabs? How do you enforce brand consistency across devices?
These are all wide-ranging questions, but getting your favicons set up correctly is an excellent step in the right direction for all three.
Favicons are a simple way of establishing a consistent visual identity for your site, improving user experience and strengthening your brand.
In this article, we’ll cover everything you need to know about favicons – what they are, where you put them and how they can help your site.
We’ll take in best practices for creating these crucial images, discuss recommended formats and finish up with a mini-tutorial on how to implement favicons in WordPress 4.3 and previous versions.
Let’s get some basics out of the way to begin with; feel free to skip if you’re familiar with favicons already.
Favicons – What, Where and Why?
Favicons – short for favorite icon – are the small images usually displayed in a browser’s tab next to your website’s page title. They’re also found in lists of bookmarks, favorites and history on both browsers and touchscreen devices and are typically 16×16 or 32×32 pixel images.
Favicons play a crucial role in branding your website. When a visitor has multiple tabs open in their browser, these small icons help your website stand out and give users a quick way of getting back to your content immediately.
The inclusion of a favicon is both a courtesy to the user and a small piece of screen real estate that packs a big punch.
Best Practices and Image Formats
Favicons have been around since the early days of the internet and made their official debut with the release of Microsoft’s Internet Explorer 5 back in 1999.
The World Wide Web Consortium (WC3) standardized them within months and web developers have been placing favicon images in the root of their web domains ever since.
In addition to the traditional ICO files, most major browsers nowadays also support PNG and GIF image formats for favicons along with very patchy support for SVGs.
Let’s quickly cover the two most widely supported formats.
ICO Image File
The ICO file format remains the most widely supported type of favicon image and it’s best practice to include an ICO version even if you are using PNGs.
The reasons for this are straightforward. First of all, GIF and PNG favicons are not supported by some older browsers. Secondly, the location where browsers look for a favicon by default varies wildly and there is a risk of useless 404 Not Found log errors being returned if a default favicon.ico is not present.
The ICO image file format allows multiple images and resolutions in one file. You can think of it as a container for a series of images.
This means that you can save your favicon in different sizes e.g. 16×16, 32×32 and 48×48 (as recommended by Microsoft) and the browser will then determine the appropriate size to display.
A 16×16 image, for example, will do fine in a tab but not so well when it’s added to the taskbar or the desktop.
PNG Image File
Favicons can also be saved as PNG image file format and browser support for this format is pretty comprehensive these days with PNGs being endorsed by the W3C.
One of the main advantages of using PNGs is that they are generally substantially easier to author using standard graphic design tools such as Photoshop and also offer sophisticated transparency options.
The ICO image file format also supports 8-bit alpha channel transparency but finding good authoring tools can be a chore.
Which One Should You Use?
The short answer is: both of them. You’re able to declare your favicon preferences using the <link> tag which means you can specify your PNG favicon (or favicons) in this tag and still have your favicon.ico available as a fallback in the website’s root.
By doing this, you’ll cover most browsers’ favicon compatibility requirements and not get a 404 error.
What About Mobile Platforms?
Smartphones and tablets are responsible for generating the majority of web traffic these days so you’ll need to factor that in.
Unfortunately, mobile platforms are even more fragmented than browsers when it comes to resolutions, screen sizes, and operating systems. There is simply no one solution to rule them all.
When it comes to adding full support for mobile platforms, you’ll need to add PNGs, Apple Touch icons, Windows 8 tile graphics and more to cover all your favicon bases.
There’s an excellent overview of favicon options for mobile devices over at CSS Tricks if you’re looking to explore further. The favicon cheat sheet also has solid coverage of the full range of options available.
To keep things simple below, we’ll stick to creating a basic favicon.ico in this article.
Let’s get started.
How to Create a Favicon
If you need very fine-grained control, we recommend creating your site’s favicon in a professional image editing program such as Adobe Photoshop or Gimp. The steps that follow cover creating a favicon in Adobe Photoshop CS6.
- If you don’t already have it, download a Photoshop plugin that lets you save files in ICO image file format such as the aptly named ICO Format.
- In Photoshop, click File > New and create a new 512 x 512 pixels canvas with a resolution of 72 ppi.
- Create your masterpiece in the canvas.
- When your design is ready, click Image > Image Size.
- Tick the Constrain Proportions checkbox and set the image dimensions to 16 x 16 pixels.
- Use the Unsharp Mask filter to make your design look less blurry.
- Click File > Save As and save your design as an ICO file.
As an example, here’s the favicon for my own personal website in all its glory:
Those of you who aren’t graphically minded (don’t worry – I’m one of them) can also use an online tool to help you create your favicon image. All you have to do is upload the image of your choice to any one of the following websites:
Most of these online tools have the added advantage that they can output ICO files containing multiple image sizes.
Remember that the default favicon appearing in your browser’s tab is 16×16 pixels. Don’t make your design too intricate, or else detail on your favicon won’t show up clearly. You’ll notice that the favicons used by most sites – WPMU DEV’s own sine wave favicon is a good example – are relatively straightforward.
Once you have your favicon, it’s time to add it to WordPress.
How to Add a Favicon
You may already have come across my previous mini-tutorial How To Add A Favicon To Your WordPress Site here on WPMU DEV. (Published in 2012 – doesn’t time fly!) What follows below is a slightly updated version of how you can add favicons to your site in just a few easy steps.
Technically you can use plugins to accomplish this but it’s always good to know how to do it by hand. Plus it saves you having to load another unnecessary plugin on your site.
Adding Favicons in WordPress 4.3
Those of you who have already upgraded to WordPress 4.3 can add a favicon to your site by following these seven simple steps:
- Log into the WordPress Admin.
- Click Appearance > Customize.
- Click Site Identity.
- Click Select File under where it says Site Icon.
- Once you’ve selected your favicon file, click the Select file button and upload.
- Your favicon will appear under the Site Icon heading of the Site Identity dialog.
- Click the Save and Publish button.
And you’re done. Boom.
WordPress also enables you to edit your work before publishing it by selecting the part of a larger image that you would like to have as your favicon. This is useful if the image you have uploaded is rectangular rather than square.
How to Add a Favicon in WordPress 4.2 (And Previous Versions)
People who haven’t yet upgraded to WordPress 4.3 (for whatever reason; I’m not going to judge ;-)) can follow these steps to add a favicon.
- Upload the favicon you’ve created to your site’s root directory with an FTP client of your choice.
- Paste the following code into the header.php file of the theme you’re running: https://gist.github.com/midoriberlin/111a3ce34672106eb620. Note: You will have to change the URL and file extension (if you’re using anything other than a PNG file).
- Upload a copy of your favicon image file to your current theme’s main folder.
It’s important to make sure that you upload the favicon image file to both the root directory of your website and the theme directory.
It’s easy to neglect the third step and end up racking your brains over why the favicon didn’t show up. By adding the favicon to your site’s root directory, you also ensure it will be visible to your subscribers in their feed readers.
Wrapping It Up
Favicons are a fun feature and bring real benefit to users of your site. As we’ve hopefully demonstrated above, they’re also a pretty straightforward addition to your WordPress site – particularly in recent versions.
Let’s recap some of the areas we covered:
- Provide both ICO and PNG favicons to cover a standard range of browsers.
- Dive deeper with the favicon cheat sheet to target a wider range of mobile devices and use cases.
- Take advantage of online tools such as Favicon.cc to produce multiple sizes of favicons efficiently.
- Use the WordPress Site Icon feature on 4.3+ to take the hassle out of installing your favicon or fall back on more traditional techniques.
Have you got your favicon up and running yet? Did you face any problems viewing it in different environments? Get in touch in the comments and let us know.
Why 100 is NOT a Perfect Google PageSpeed Score (*5 Min Watch)
Learn how to use Google PageSpeed Insights to set realistic goals, improve site speed, and why aiming for a perfect 100 is the WRONG goal.
- weekend wordpress projects