Favicons for Your WordPress Site

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.

4 ways to kill spam

4 Simple Ways To Kill SPAM From Your WordPress Site

According to recent activity reports from WordPress.com, people are writing about 70 million new posts each month. With over 2.3 million blog posts going live each day covering every possible topic, it’s no wonder that these are the front lines in the battle against spam. How can we kill spam on our WordPress sites? What…
Read More
Corporate Website Design for HealthLoop

Corporate Website Design for HealthLoop

HealthLoop reached out to us last year to start discussions for a corporate website design that better targeted their business-to-business space. HealthLoop makes intuitive software that provides medical patients with continued care and instructions after they have had a medical procedure. A Corporate Website Design Experience The primary goal for the new site was to…
Read More

Learn how to understand your website's strengths and weaknesses, and how to make changes for the best possible chance at success.

Download Now

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.