Favicons for Your WordPress Site

When we last wrote about favicons (2008), adding a favicon to your WordPress site was a manual process similar to what you’d experience on other websites. Well, all of that has changed as of version 4.3 of WordPress. Adding a favicon is now easier than ever. Let’s take a look at the history of favicons, some ways to create them, and how to add them to your WordPress site.

Favorites Icon – A Look Back

From WordPress.org: “A favicon (short for ‘favorite icon’) is an icon associated with a website or webpage intended to be used when you bookmark the web page. Web browsers use them in the URL bar, on tabs, and elsewhere to help identify a website visually. Also, it is used as application icon of mobile device.”

The use of a favicon has roots all the way back to 1999 and the release of Internet Explorer 5. It was a way for bookmarks to be saved in Microsoft’s favorites area, thus the name favicon. Later that year it was standardized by the World Wide Web Consortium with the HTML 4.01 recommendation.

Since that time, favicons have adapted to new browser spaces, new graphic file formats, and ubiquitous mobile devices.

Create the Image

The design of the image is an important consideration. Beyond having something eye catching, unique, and that matches your website’s branding; you have to be sure to consider the small sizes that the image will be seen. There is a great resource that discusses the creation of icons and how to design for them – The Icon Handbook.

There are many ways to create your favicon. The most common tools are graphics packages like GIMP or Photoshop to handcraft your image. When you’re creating your favicon you want to be sure to look at the image at the smallest 16 x 16 pixel size to make sure that it stays legible. You used to need to make use of a plugin like our favicon generator plugin to add a favicon to a WordPress site, but with recent versions of WordPress, that is no longer necessary.

Adding Favicons to WordPress

Once you have your image created, WordPress has made it a snap to implement on your website. As of WordPress 4.3 there is Site Icon feature in the dashboard. We worked with the core team to get the new Site Icon feature into core as we had experience supporting users requesting this feature with our plugin already. Just navigate to the Appearance section and the Customizer. Click on Site Identity and upload a 512 x 512 pixel image. The Site Icon feature will handle all of the file formatting and resizing needed to display your favicon on a variety of devices.

For a more detailed overview of the process you can visit the WordPress Codex. It’s easier than ever to get your favicon to display. If you need any help with your favicons we offer website support services and can lend a hand.