{"id":72612,"date":"2016-07-01T08:36:05","date_gmt":"2016-07-01T12:36:05","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=72612"},"modified":"2017-08-24T05:21:57","modified_gmt":"2017-08-24T09:21:57","slug":"magento-2-x-how-to-change-the-favicon","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/magento-2-x-how-to-change-the-favicon.html","title":{"rendered":"Magento 2.x. How to change the favicon"},"content":{"rendered":"<p>We are glad to present you a tutorial that will show you how to replace a browser icon (favicon) in Magento 2.<\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/wbvjbdhGSOs\"><\/iframe>\r\n<\/div>\r\n<p>A favicon is the little icon that browsers display next to the page&#8217;s title on a browser tab, or in the address bar next to its URL. Some web services and search engines use the favicon as well.<\/p>\r\n<p>As you see, the favicon is pretty important. It&#8217;s critical for site recognition in a browser full of tabs and it&#8217;s a great opportunity to expand your site&#8217;s branding.<\/p>\r\n<p>In order to replace the favicon, perform the following steps: <\/p>\r\n<ol>\r\n\t<li><p>Login to your Magento Admin Panel.<\/p><\/li>\r\n    <li><p>Locate the <strong>STORES<\/strong> tab from the left sidebar.<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon1-300x169.png\" alt=\"Magento_2.x.How_to_change_the_favicon1\" width=\"300\" height=\"169\" class=\"alignnone size-medium wp-image-72614\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon1-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon1-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon1-1024x575.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon1.png 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t<\/li>\r\n    <li><p>Navigate to <strong>Settings ->Configuration section:<\/strong>\r\n\t<\/p>\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon2-300x167.png\" alt=\"Magento_2.x.How_to_change_the_favicon2\" width=\"300\" height=\"167\" class=\"alignnone size-medium wp-image-72615\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon2-300x167.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon2-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon2-1024x570.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon2.png 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t<\/li>\r\n<li><p>At the left panel below the <strong>General<\/strong> tab, click on the <strong>Design<\/strong>. After that, expand <strong>HTML Head<\/strong> tab from the right panel.<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon3.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon3-300x167.png\" alt=\"Magento_2.x.How_to_change_the_favicon3\" width=\"300\" height=\"167\" class=\"alignnone size-medium wp-image-72616\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon3-300x167.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon3-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon3-1024x571.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon3.png 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t<\/li>\r\n\t<li><p>Now upload your favicon, click on the <strong>Choose File<\/strong> button and select your favicon image.<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon4.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon4-300x168.png\" alt=\"Magento_2.x.How_to_change_the_favicon4\" width=\"300\" height=\"168\" class=\"alignnone size-medium wp-image-72617\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon4-300x168.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon4-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon4-1024x574.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/Magento_2.x.How_to_change_the_favicon4.png 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t<\/li>\r\n    <li><p>When you are done, click on the <strong>Save Config<\/strong> to set your new favicon.<\/p>\r\n<\/ol>\r\n<p>Now you know how change the favicon in the Magento 2.<\/p>\r\n<div class=\"inline-banner\">\r\n<a href=\"https:\/\/www.templatemonster.com\/service-center\/\">\r\n<img src=\"\/help\/files\/banners\/inline\/Banner-2-(835-x100).jpg\"\/>\r\n<\/a>\r\n<\/div>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=wbvjbdhGSOs?width=1280&amp;height=720\" rel=\"prettyPhoto\">Magento 2.x. How to change the favicon<\/a>","protected":false},"excerpt":{"rendered":"<p>We are glad to present you a tutorial that will show you how to replace a browser icon (favicon) in Magento 2.<\/p>\n","protected":false},"author":87,"featured_media":72618,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[729],"tags":[560,2315,787],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/72612"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=72612"}],"version-history":[{"count":2,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/72612\/revisions"}],"predecessor-version":[{"id":82914,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/72612\/revisions\/82914"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/72618"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=72612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=72612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=72612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}