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.

menu usability with CSS

Improving Menu Usability with CSS

Menus are a fundamental component of a website. Users expect to be able to use a menu to navigate through your website. Menus come in many different shapes and sizes, but most follow similar patterns. There are several CSS features that can improve menu usability. Take the following menu: This is a pretty standard pattern…
Read More
data privacy

Data Privacy and You

Data privacy is not a new topic. This aspect of data protection has been a focal point in the WordPress space since the GDPR was announced in 2017. We’ve written about it both prior to it’s adoption, and then again as it relates to advertising privacy.  However, data privacy is more relevant now, than ever.…
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.