{"id":9397,"date":"2020-07-25T22:06:31","date_gmt":"2020-07-25T19:06:31","guid":{"rendered":"https:\/\/vipestudio.com\/?p=9397"},"modified":"2020-07-15T22:14:17","modified_gmt":"2020-07-15T19:14:17","slug":"methods-for-adding-favicons-in-wordpress-and-troubleshooting","status":"publish","type":"post","link":"https:\/\/vipestudio.com\/en\/methods-for-adding-favicons-in-wordpress-and-troubleshooting\/","title":{"rendered":"Methods for Adding Favicons in WordPress and Troubleshooting"},"content":{"rendered":"<p style=\"text-align: left;\">Here we are, back again with yet another part of our ongoing \u2018Favicons for WordPress\u2019 series. Armed with the knowledge of the importance of Favicons, their sizing, and how to create a Favicon in many ways, we\u2019ll now delve into part four.<\/p>\n<p style=\"text-align: left;\">We\u2019ll now take a detailed look into how to add Favicons using the three methods we outlined last time, as well as how to fix issues with Favicons not showing up.<\/p>\n<p>&nbsp;<\/p>\n<h2 style=\"text-align: left;\">The \u2018WordPress Customizer\u2019 Method<\/h2>\n<p style=\"text-align: left;\">In <a href=\"https:\/\/vipestudio.com\/en\/creating-favicons-and-adding-them-on-wordpress-website\/\">Part 3<\/a>, we briefly touched upon how you can locate \u2018Site Identity\u2019 in WordPress \u2013 under \u2018Appearance\u2019, then \u2018Customize\u2019 \u2013 and click on \u2018Site Icon\u2019, if you have a theme that supports Favicons:<\/p>\n<ul style=\"text-align: left;\">\n<li>Here, you\u2019ll find recommended sizing dimensions for the Favicon, and if you\u2019ve created the icon in advance, you\u2019ve also probably ensured that it is the right size for your purposes.<\/li>\n<li>Click \u2018Select site icon\u2019 and import your file to the Media Library. Now you can preview it the way it would look like a tab icon in the browser or client, or how it would fare as an app icon on other devices.<\/li>\n<li>Repeat the same steps if you wish to change your icon at a later date.<\/li>\n<\/ul>\n<h2 style=\"text-align: left;\"><\/h2>\n<h2 style=\"text-align: left;\">The \u2018Theme Options\u2019 Method<\/h2>\n<p style=\"text-align: left;\">Word of caution before we begin, this method is even more theme-dependent than the previous one.<\/p>\n<p style=\"text-align: left;\">Newer versions of WordPress have the Customizer for managing themes. While some premium themes can be managed through a dedicated options page, it\u2019s quite possible that you\u2019ll still be directed to the Customizer at some point.<\/p>\n<p style=\"text-align: left;\">The \u2018WordPress Twenty Nineteen\u2019 theme is one such example of a theme that has no options page and relies entirely on Customizer. On the other hand, the premium theme \u2018Avada\u2019 adds its own menu entry which leads to its separate theme options and lets you add a Favicon with no hassle.<\/p>\n<p style=\"text-align: left;\">Another advantage to the \u2018Theme Options\u2019 method is that there are mobile-specific features built-in as well. However, it goes without saying that each theme will have its own implementation. So in case, you can\u2019t locate the Favicon option, just look through the docs or contact the theme developer.<\/p>\n<p style=\"text-align: left;\">\n<h2 style=\"text-align: left;\">The Plugin Method &#8211; All in One Favicon<\/h2>\n<p style=\"text-align: left;\">Finally, a theme-independent method for us all. This can also be a more effective way of managing Favicons, and you can customize how they work to the device on which they\u2019re being viewed.<\/p>\n<p style=\"text-align: left;\">Definitely, among the most popular plugins for Favicons, it even has a free (and comprehensive) version that you can locate in the WordPress Plugin Directory. With this plugin, you can access both frontend and backend settings, in addition to the general options.<\/p>\n<p style=\"text-align: left;\">All in One Favicon\u2019s intuitive UI helps you upload images conveniently, and you can choose from formats to upload in \u2013 the GIF, PNG and ICO file types.<\/p>\n<p style=\"text-align: left;\">\n<h2 style=\"text-align: left;\">Troubleshooting the Missing Favicon<\/h2>\n<p style=\"text-align: left;\">While this isn\u2019t a terribly common issue with Favicons, it still needs to be sorted out if your WordPress website has no Favicon despite you have set one. Here are the usual suspects:<\/p>\n<ul style=\"text-align: left;\">\n<li>Unsupported Image Format. Browsers these days do support the common image formats like GIF and PNG, but older machines with outdated or older browsers are still on the internet, and they only recognize ICO. The smart move here is to use the ICO format and have your Favicon.ico file(s) available where browsers can find them.<\/li>\n<li>Incorrect Icon Sizing. An advantage of the ICO format is its ability to store all differently sized versions of the same icon and display the right one according to the user\u2019s device. Even so, in the interest of avoiding display errors, you\u2019ll want to upload several Favicon.ico files, each with a different size or resolution.<\/li>\n<li>Favicon Generators. A Favicon generator plugin will usually take care of most errors, but if the Favicon still isn\u2019t visible, you need to ensure you have an updated version of the plugin that plays nice with both your theme and your WordPress version.<\/li>\n<\/ul>\n<p style=\"text-align: left;\">That draws this part of our Favicons series to a close, and we\u2019ll see you next time in the final part with tips and plugins for using Favicons with WordPress multi-sites. Until, then, Happy WordPress-ing!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here we are, back again with yet another part of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9401,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[117],"tags":[235,266,273,128],"class_list":["post-9397","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-design","tag-design","tag-favicons","tag-troubleshooting","tag-wordpress-en"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/posts\/9397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/comments?post=9397"}],"version-history":[{"count":0,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/posts\/9397\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/media\/9401"}],"wp:attachment":[{"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/media?parent=9397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/categories?post=9397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/tags?post=9397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}