{"id":162808,"date":"2017-04-29T13:00:25","date_gmt":"2017-04-29T13:00:25","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=162808"},"modified":"2019-04-25T20:53:23","modified_gmt":"2019-04-25T20:53:23","slug":"adding-favicons-wordpress","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/adding-favicons-wordpress\/","title":{"rendered":"A Quick Guide to Adding a Favicon to Your WordPress Site"},"content":{"rendered":"

Brand recognition is critical for a company\u2019s website. That\u2019s why you invest so much time coming up with a simple yet bold color palette, consistent imagery, and well-defined brand messaging. The more consistent you are in defining and establishing that identity across your site, the more ingrained it\u2019ll become in your visitors\u2019 minds.<\/p>\n

But you know that it\u2019s not just what appears on your site that visitors, prospects, and customers remember you for.<\/p>\n

Social media pages need to align with your brand identity; video branding does, too. It\u2019s not just these larger offshoots of your brand that matter either. Take your favicon, for instance. It\u2019s such a small detail\u2014one that doesn\u2019t even occur on<\/em> a web page\u2014and yet there\u2019s a good likelihood your visitors will notice if you don\u2019t have one or if the one you\u2019ve chosen doesn\u2019t look great.<\/p>\n

It\u2019s this attention to detail when developing a consistent brand identity that will really drive home the idea that the company or individual behind this website has got it together. In other words, not only did you take time to create a small icon to maintain your brand\u2019s presence outside of the website, but you also considered how it affects UX, too.<\/p>\n

If you\u2019ve yet to create or add a favicon to your WordPress website, you\u2019ve got to get on that, like, now. Or, better yet, yesterday.<\/p>\n

Why Your WordPress Website Needs a Favicon<\/h2>\n

These are what favicons look like in the address bar and in browser tabs:<\/p>\n

\n
\"Favicons
Favicons are quickly recognizable in browser tabs.<\/figcaption><\/figure>\n<\/div>\n

These are also favicons, this time in your bookmarks:<\/p>\n

\n
\"Favicons
Favicons also help distinguish between bookmarks.<\/figcaption><\/figure>\n<\/div>\n

Here\u2019s another example of favicons you can find in a web browser\u2019s history:<\/p>\n

\n
\"Favicons
Favicons displayed in your browser history.<\/figcaption><\/figure>\n<\/div>\n

Did you even realize your site\u2019s favicon got so much airtime?<\/p>\n

Like I said, this is about establishing a clear presence of your brand on-site as well as off. Sure, a favicon is pretty small so it might not always get noticed, but no matter how far users deviate from your site, don\u2019t you want them to still have a piece of your brand they can instantly recognize?<\/p>\n

In addition to bolstering your brand identity, favicons also help guide visitors back to you. If you create an eye-catching and unique favicon that helps users easily pick it out of a crowd of other favicons, they\u2019ll remember that.<\/p>\n

How to Create a Favicon for Your WordPress Site<\/h2>\n

Follow these three steps to create a high-quality favicon and ensure that it displays correctly on all browsers.<\/p>\n

Step #1: Design the Favicon<\/h3>\n

By this point, you should already have a\u00a0logo<\/a> for your website. Start there.<\/p>\n

You then have a few different options for designing a favicon:<\/p>\n