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.

Written by the Team at Pixel Jar

We hope you got something useful out of that post. If you'd like to read more we have an active blog with topics across the spectrum of website development. If you're researching information for a project we'd love to talk to you about it.

project management tools

A Guide to Project Management Tools

There are an endless supply of project management tools available to web developers. As we built our team and started taking on bigger projects, we found ourselves in need of some specific tools to help us manage the details. These are the tools that we’re currently using to manage our projects and our business. Instant…
Read More
Salt Lake City LoopConf 2017

LoopConf 2017

For those of you who don’t know, LoopConf is a WordCamp-like conference aimed at WordPress developers. I was invited to speak at the inaugural LoopConf in 2015 in Las Vegas where I spoke about reusing small chunks of code to make your code easier to maintain. Though I didn’t speak this year, I found so…
Read More

How Can We Help You?

We want to build your next project.

Connect with Pixel Jar

Our Community

Subscribe to learn more about the goings on at Pixel Jar.
  • Note: Your email will be added to our CRM and be used to receive emails from Pixel Jar. You can unsubscribe at any time.

  • This field is for validation purposes and should be left unchanged.