Favicons help you establish a strong visual identity for your website, and improve the user experience. In this article, we\u2019ll cover everything you need to know about favicons: what they are, how they\u2019ll help you, best practices for using them, and more!<\/p>\n\n\n\n\n\n
You\u2019ve probably seen favicons all over the web, sometimes without realizing it. They\u2019re very small icons\u2014usually 16 x 16 pixels\u2014which sit next to a page\u2019s title in your browser\u2019s tab bar.<\/p>\n\n\n\n
Favicons are so tiny that they may feel like inconsequential elements of your website. Admittedly, they play less of a role now than they did in the pre-Google Analytics<\/a> era. At that point, they were practically the only reliable measure of web traffic, since they could help you tally up how many users had bookmarked a specific page.<\/p>\n\n\n\n However, favicons still serve as an important recognition<\/a> of your brand within browsers, bookmarks, links bars, and sometimes even URL fields. They can also be used as your site\u2019s shortcut icon on smart devices.<\/p>\n\n\n\n In short, if you care about user experience and want to maintain full control over your branding, you\u2019ll want to employ a favicon on your website. Plus, it\u2019s one of the easiest brand elements to implement!<\/p>\n\n\n\n A favicon has a subtle but important role to play in your website\u2019s branding. Site visitors will know exactly what site they are viewing when they see your favicon, reassuring them that they\u2019re in the right place. Finding creative and subtle ways to infuse your branding into your site is not the easiest of tasks, but favicons are great for that purpose.<\/p>\n\n\n\n Favicons play another very important role on your site: improving the user experience. They spruce up a boring URL bar, and some browsers show favicons when you create a shortcut to the corresponding website on your desktop or mobile device.<\/p>\n\n\n\n One of the goals of every website should be to encourage visitors to make repeat visits. Favicons help you do just that by strengthening your brand and improving the user experience in WordPress. <\/p>\n\n\n\n There are several ways to create a favicon for your website. Traditionally, a favicon is a small version of your company’s logo, but not always. For example, you can hire a designer who can take your branding and vision and create a favicon that represents those elements.\u00a0<\/p>\n\n\n\n Alternatively, you can create your favicon by hand, using one of many favicon-building tools such as Favicon.cc and Faviconer<\/a>. Platforms like Adobe Photoshop<\/a> and GIMP<\/a> are also useful for creating high-quality favicons.<\/p>\n\n\n\n Additionally, you can use a favicon generator plugin for WordPress. This kind of tool can also help you create some of the extra files needed to display favicons correctly on certain devices.<\/p>\n\n\n\n Actually creating a favicon isn\u2019t too difficult, and will be a cakewalk for visual creatives in particular. However, it\u2019s still within the reach of less artistic people, since the icon itself is so small and simple. The process can be boiled down to the following two steps.<\/p>\n\n\n\n While favicons can be as small as 16 x 16 pixels, they can also be as large as 512 x 512 pixels. As such, you\u2019ll need to make a decision about the devices and resolutions you\u2019d like to cater to.<\/p>\n\n\n\n Here\u2019s a quick breakdown of some recommended sizes<\/a> for favicons:<\/p>\n\n\n\n Of course, it can make sense to create favicons for all of these sizes if you\u2019re expecting visitors from many types of devices. However, you can also simply choose the sizes that correspond to the platforms you\u2019re targeting, and forgo the rest.<\/p>\n\n\n\n Actually creating your favicon<\/a>, will be a little more time-consuming. The way you do this will be subjective, of course, and there are a lot of different methods you can employ.<\/p>\n\n\n\n If you don\u2019t have a preferred tool you can use, we\u2019ll talk about some easy-to-use options soon. In the meantime, you\u2019ll want to keep in mind the following rules of thumb when creating your favicon:<\/p>\n\n\n\n Once you have your design ready, you\u2019ll need to save it in the correct format. Many graphics packages enable you to use the .ico<\/em> extension, and your base file should have the name favicon.ico<\/em>. This file will be pulled when no other icon can be found. For favicons of different sizes, you can incorporate their dimensions into the file names.<\/p>\n\n\n\n If you want to create a favicon quickly, there are a number of tools you can use. Let\u2019s look at a few of the more popular and powerful options.<\/p>\n\n\n\n Favicon.cc<\/a> is a leading favicon creator, and is very simple to use. You simply choose a color, paint each pixel, and then click on the Download<\/em> button:<\/p>\n\n\n\n Faviconer<\/a> is also a solid choice, which boasts a slightly nicer interface and better overall usability:<\/p>\n\n\n\n This tool is arguably more powerful than Favicon CC. You can create a higher-resolution file for modern displays, and even upload your own image.<\/p>\n\n\n\n Finally, there are also tools that let you convert a pre-existing image into a favicon\u2014such as Dynamic Drive FavIcon Generator<\/a>, and RealFaviconGenerator<\/a>. Both offer flexibility when converting your favicon to different sizes, although we have to give an edge to the latter, based on its comprehensive options for sizing your files.\u00a0<\/p>\n\n\n\n Favicons need to be saved in a specific file type, one that\u2019s not commonly used for web images. That\u2019s why a Favicon generator can be useful to convert your images into \u2018.ico\u2019 files<\/a>. This is a file type that\u2019s specifically used for icons.<\/p>\n\n\n\n Depending on the generator, you can convert text, emojis, and other image types into the correct file type for favicon display. Our favorite plugin for favicon generation is Favicon by RealFaviconGenerator.<\/p>\n\n\n\n Favicon by RealFaviconGenerator<\/a> enables you to create favicons that are adaptable to all platforms. In a matter of seconds, you can set up a favicon that works well with a variety of OSs and browsers.<\/p>\n\n\n\n Rather than just creating copies of images at different resolutions, this generator actually creates the specific sizes needed for each platform. That means you won\u2019t have to figure out the latest compatibility guidelines for every device you might want your favicon to display on.<\/p>\n\n\n\n There are several options to choose from if you\u2019re looking for ways to add a favicon to your WordPress site:<\/p>\n\n\n\n Let\u2019s take a closer look at how exactly you can go about adding a favicon with these three methods. <\/p>\n\n\n\n As we mentioned previously, if your theme supports favicons, you can navigate from your WordPress dashboard to Appearance > Customize > Site Identity > Site Icon<\/em>: <\/p>\n\n\n\n You\u2019ll notice that there are some size recommendations here for your site icon. It\u2019s best to create the image you want to use ahead of time, and make sure it is sized appropriately. <\/p>\n\n\n\n Once you\u2019ve done that, you can click on Select site icon<\/em> and upload your file: <\/p>\n\n\n\n Once it\u2019s in the Media Library, you\u2019ll get a preview of what it will look like in a browser tab or as a mobile app icon. You can change your icon again later if you wish by following the same steps. <\/p>\n\n\n\n This method is heavily dependent on your individual theme. In updated versions of WordPress, themes are typically managed through the Customizer. Some exceptions to this include premium themes that have their own options pages. However, even if your theme has a separate options page, it\u2019s likely you\u2019ll be routed to the Customizer anyway.<\/p>\n\n\n\n For example, the WordPress Twenty Nineteen<\/a> theme manages favicons through the Customizer, and doesn\u2019t have a separate options page. However, the premium Avada theme<\/a> creates a new menu item, and has a theme options page where you can add a favicon image directly: <\/p>\n\n\n\n This option offers specific iPhone and iPad upload features as well. Just keep in mind that each theme will be a little different, so check the documentation or reach out to the developer if you\u2019re unsure.<\/p>\n\n\n\n Using a plugin can be one of the most effective ways to manage favicons, regardless of your theme. This is especially true if you want to offer a more customized experience based on the user\u2019s device.<\/p>\n\n\n\n One of the more popular plugins for this use is All In One Favicon<\/a>: <\/p>\n\n\n\n The free version that\u2019s available in the WordPress Plugin Directory<\/a> is pretty robust. It offers users both front- and back-end options, as well as general settings: <\/p>\n\n\n\n This plugin also has an easy-to-navigate user interface where you can upload your images. All In One Favicon accepts three types of favicon images, including the GIF, ICO, and PNG formats. <\/p>\n\n\n\n If your favicon is not showing up on your WordPress website after you\u2019ve added it, chances are you made one of these common mistakes:<\/p>\n\n\n\n If you\u2019re using a generator plugin and are still having issues, you can also check to make sure it\u2019s updated and compatible with your current theme and version of WordPress.<\/p>\n\n\n\n Adding a favicon to a single website is relatively easy. However, there is a little more involved if you want to add a different favicon to each individual site in a WordPress multisite<\/a> network.<\/p>\n\n\n\n Although a bit more complex, it is possible to enable a unique favicon for each site in your multisite installation. If you are a developer, you can experiment with multiple child themes or change your multisite code, but the simplest way to add individual favicons is to use a plugin.<\/p>\n\n\n\n When it comes to adding favicons to both individual and multisite WordPress installations, there are a few plugins to choose from. Let\u2019s look at three of the best options.<\/p>\n\n\n\n All In One Favicon<\/a> features a clean interface and several settings options. With this plugin, you can add favicons to both your user-facing site and your admin pages. <\/p>\n\n\n\n This plugin supports the three image types mentioned previously. Animated GIFs are also supported, in addition to Apple Touch icons. This is a free plugin that has enough features to get you started with favicon management on your website. <\/p>\n\n\n\n This plugin is perfect for all your favicon needs, and is continuously updated as the technology evolves. With Fresh Favicon<\/a>, you can simply upload images to the correct fields, and follow the on-screen instructions to get your favicon set up. <\/p>\n\n\n\n Getting your favicons to work properly on popular touch-screen devices typically requires the coordination of a lot of different image files. The beauty of this plugin is that you can upload just one image, and it does the rest of the work for you.<\/p>\n\n\n\n Fresh Favicons is a premium plugin that you can get for $21. This includes future updates to the plugin as well. <\/p>\n\n\n\n Branda Pro<\/a> is a full-service plugin that caters to web developers in need of full control over customization and branding. You can try it free for seven days. To use it on unlimited sites, the subscription is offered at $49 per month. <\/p>\n\n\n\n Along with adding single-site and multisite favicons, you can use Branda Pro to change or remove WordPress branding for a completely custom website experience. Therefore, this can be a helpful multipurpose plugin for agencies and busy freelancers.\u00a0<\/p>\n\n\n\n When it comes to creating a scalable website that will get your brand out there quickly, WordPress is by far the most popular Content Management System (CMS)<\/a> available. Leveraging its power and capability\u2014along with high-quality developer resources<\/a> and WordPress hosting<\/a>\u2014means you can count on a site that\u2019s built for speed and performance. <\/p>\n\n\n\nWhy Should You Add a Favicon to Your WordPress Site?<\/h2>\n\n\n\n
How to Create a Favicon<\/h2>\n\n\n\n
Step 1: Choose a Suitable Size for Your Favicon<\/strong><\/h3>\n\n\n\n
\n
Step 2: Design Your Favicon and Save It in an Appropriate Format<\/strong><\/h3>\n\n\n\n
\n
Favicon-Building Tools<\/strong><\/h2>\n\n\n\n
Favicon Generator Plugin<\/h2>\n\n\n\n
How to Add a Favicon to WordPress<\/h2>\n\n\n\n
\n
Using the WordPress Customizer<\/h3>\n\n\n\n
Uploading a Favicon via Your Theme Options Page<\/h3>\n\n\n\n
Using a WordPress Favicon Plugin<\/h3>\n\n\n\n
Favicon Not Showing Up?<\/h2>\n\n\n\n
\n
WordPress Multisite Favicon<\/h2>\n\n\n\n
3 Useful for Multisite WordPress Favicons<\/h2>\n\n\n\n
1. All in One Favicon<\/a><\/h3>\n\n\n\n
2. Fresh Favicon<\/a><\/h3>\n\n\n\n
3. Branda Pro<\/a><\/h3>\n\n\n\n
Bring Your Brand to Life with WP Engine<\/h2>\n\n\n\n