{"id":9391,"date":"2020-07-20T09:00:13","date_gmt":"2020-07-20T06:00:13","guid":{"rendered":"https:\/\/vipestudio.com\/?p=9391"},"modified":"2020-07-15T22:09:25","modified_gmt":"2020-07-15T19:09:25","slug":"creating-favicons-and-adding-them-on-wordpress-website","status":"publish","type":"post","link":"https:\/\/vipestudio.com\/en\/creating-favicons-and-adding-them-on-wordpress-website\/","title":{"rendered":"Creating Favicons and Adding Them on WordPress Website"},"content":{"rendered":"<p style=\"text-align: left;\">Thanks for joining us again for the third part of our series on Favicons for WordPress. Before the jump, we\u2019ve learned why we need Favicons, and what sizes and guidelines are important when designing Favicons.<\/p>\n<p style=\"text-align: left;\">This time around, we get into the thick of things with a bunch of tools and plugins that help you make Favicons easily.<\/p>\n<p style=\"text-align: left;\">\n<h2 style=\"text-align: left;\">Tools to create Favicon for WordPress<\/h2>\n<p style=\"text-align: left;\">For those in a hurry, quite a few full-featured and well-known Favicon-specific tools come to mind:<\/p>\n<h3 style=\"text-align: left;\">Favicon.cc.<\/h3>\n<p style=\"text-align: left;\">This is the foremost and yet, simple-to-use <a href=\"https:\/\/www.favicon.cc\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Favicon maker<\/a> that many people swear by. It\u2019s as straightforward as choosing a colour, painting each pixel in the right colour, and then clicking on \u2018Download\u2019. Boom. That\u2019s it.<\/p>\n<h3 style=\"text-align: left;\">Faviconer<\/h3>\n<p style=\"text-align: left;\">This <a href=\"http:\/\/faviconer.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">tool is also an easy pick<\/a>, what with it having more features and a better UX than Favicon.cc, including the ability to use your own images and to generate high-resolution files for all the devices you intend to target.<\/p>\n<h3 style=\"text-align: left;\">Favicon Generators<\/h3>\n<p style=\"text-align: left;\">These are a special class of Favicon makers, such as those by Dynamic Drive and <a href=\"https:\/\/realfavicongenerator.net\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">RealFaviconGenerator<\/a>. With these, you can load in an image of your choice and let the tools convert it into a Favicon in all the sizes you need \u2013 RealFaviconGenerator does an especially good job with sizing.<\/p>\n<p style=\"text-align: left;\">\n<h2 style=\"text-align: left;\">Plugins to Generate Favicons<\/h2>\n<p style=\"text-align: left;\">As discussed in part 2, Favicons have a specific and separate file format and extension. Thus Favicon generator plugins for WordPress can help with converting the graphics you\u2019ve designed into the Favicon \u2018.ico\u2019 format.<\/p>\n<p style=\"text-align: left;\">Different kinds of plugins are available for this purpose, and with the right plugin, you can convert all image types, emoji or even text into your Favicon. Two such plugins come most recommended:<\/p>\n<h3 style=\"text-align: left;\">Favicon<\/h3>\n<p style=\"text-align: left;\">Yeah, that is the name, but you\u2019ll better recognize it as the plugin created by the guys over at <a href=\"https:\/\/wordpress.org\/plugins\/favicon-by-realfavicongenerator\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">RealFaviconGenerator<\/a>. With the aid of this plugin, you can quickly and comprehensively create a Favicon that will display correctly across any number of devices. The smart thing about this plugin is how, instead of just creating a bunch of image copies at multiple resolutions, it checks for up-to-date Favicon guidelines for every device that you wish to display it on, and converts accordingly.<\/p>\n<h3 style=\"text-align: left;\">Heroic Favicon Generator<\/h3>\n<p style=\"text-align: left;\">This <a href=\"https:\/\/wordpress.org\/plugins\/favhero-favicon-generator\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">plugin can take images<\/a> in the Media Library and convert them for your Favicon requirements. Do remember, however, that Heroic has not been tested with the last three versions of WordPress. On the flip side, this means that if you\u2019re on an older version of WordPress that doesn\u2019t have the Theme Customizer, Heroic is a great option for your website.<\/p>\n<p style=\"text-align: left;\">\n<h2 style=\"text-align: left;\">An Overview on How to Add the Favicon to WordPress<\/h2>\n<p style=\"text-align: left;\">There are three basic ways to add a Favicon to your WordPress site, and we\u2019ll list them here, but expect greater detail in the next part of this series:<\/p>\n<h3 style=\"text-align: left;\">The WordPress Customizer<\/h3>\n<p style=\"text-align: left;\">You\u2019re in luck if your website\u2019s theme has the option for Site Icons. In the Dashboard, under \u2018Appearance\u2019, select \u2018Customize\u2019. Then navigate to \u2018Site Identity\u2019, and finally select \u2018Site Icon\u2019.<\/p>\n<h3 style=\"text-align: left;\">The Theme Options page<\/h3>\n<p style=\"text-align: left;\">Again, this isn\u2019t universally available and will work only if your theme has an options section. Under Theme Options, consult the theme documentation or poke around a bit to find the upload area for Favicons.<\/p>\n<h3 style=\"text-align: left;\">Last Resort: Plugin<\/h3>\n<p style=\"text-align: left;\">No surprise here, a plugin is a resort for those who don\u2019t have a Favicon option in the Theme Customizer or a Theme Options page. The \u2018Favicon\u2019 plugin, mentioned above, is both free and really convenient, and it works fine without any tweaking.<\/p>\n<p style=\"text-align: left;\">That\u2019s a wrap on part 3, and we hope you\u2019re well on your way to creating the perfect Favicon for your needs. We\u2019ll see you in the fourth part of this Favicon series with more detail and tools for adding the Favicon you\u2019ve created to WordPress and troubleshooting your Favicon issues.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Thanks for joining us again for the third part of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9394,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[117],"tags":[272,235,266,128],"class_list":["post-9391","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-design","tag-customizing","tag-design","tag-favicons","tag-wordpress-en"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/posts\/9391","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=9391"}],"version-history":[{"count":0,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/posts\/9391\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/media\/9394"}],"wp:attachment":[{"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/media?parent=9391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/categories?post=9391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/tags?post=9391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}