{"id":13515,"date":"2015-04-26T07:43:00","date_gmt":"2015-04-26T11:43:00","guid":{"rendered":"http:\/\/info.template-help.com\/?p=13515"},"modified":"2017-07-11T11:13:56","modified_gmt":"2017-07-11T15:13:56","slug":"joomla-how-to-change-website-browser-icon-favion","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/joomla-how-to-change-website-browser-icon-favion.html","title":{"rendered":"Joomla 3.x. How to change favicon"},"content":{"rendered":"<p>\r\n<p>This tutorial will show you how to change browser favicon in your Joomla 3.x website.<\/p>\r\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=Sch9KN8NXmw?width=1280&amp;height=720\" rel=\"prettyPhoto\">Joomla 3.x. How to change favicon<\/a><\/p>\r\n<p>The word <strong>favicon<\/strong> is short for <strong>favorites icon<\/strong>, and it is the 16&#215;16-pixel icon that is associated with your website and appears in the browser address bar. This small thing will not affect the performance and look of your site, but paying attention to little details like that will give your site a more finished, professional feel.<\/p>\r\n<p>You can follow these instructions to change a favorites icon (favicon) displayed in the address bar of the browser in your Joomla website: <\/p>\r\n<ol>\r\n<li>\r\n<p>To create a favicon, you can open <a rel=\"nofollow\" target=\"_blank\" href=\"http:\/\/www.favicon.cc\">www.favicon.cc<\/a> website or any other online tool for generating favicons. Select any favicon image you like:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2011\/12\/how-to-change-a-favicon.1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2011\/12\/how-to-change-a-favicon.1-300x175.jpg\" alt=\"how to change a favicon.1\" width=\"300\" height=\"175\" class=\"aligncenter size-medium wp-image-46384\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/12\/how-to-change-a-favicon.1-300x175.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/12\/how-to-change-a-favicon.1-150x87.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/12\/how-to-change-a-favicon.1.jpg 650w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t<\/li>\r\n<li>\r\n<p>Click the Download button to download the generated favicon.ico file on your computer. \u041cake sure the file is named <strong>favicon.ico<\/strong>:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2011\/12\/how-to-change-a-favicon.2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2011\/12\/how-to-change-a-favicon.2-300x189.jpg\" alt=\"how to change a favicon.2\" width=\"300\" height=\"189\" class=\"aligncenter size-medium wp-image-46385\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/12\/how-to-change-a-favicon.2-300x189.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/12\/how-to-change-a-favicon.2-150x94.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/12\/how-to-change-a-favicon.2.jpg 950w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2011\/12\/how-to-change-a-favicon.3.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2011\/12\/how-to-change-a-favicon.3-300x216.jpg\" alt=\"how to change a favicon.3\" width=\"300\" height=\"216\" class=\"aligncenter size-medium wp-image-46386\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/12\/how-to-change-a-favicon.3-300x216.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/12\/how-to-change-a-favicon.3-150x108.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/12\/how-to-change-a-favicon.3.jpg 900w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t<\/li>\r\n<li>\r\n<p>The default favicon is located in <strong>images<\/strong> directory of your installation. Open your Joomla installation directory, click on <strong>templates<\/strong> directory and enter <strong>themeXXXX<\/strong> folder to remove the default icon from your site, and upload a new icon in its place:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2011\/12\/how-to-change-a-favicon.4.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2011\/12\/how-to-change-a-favicon.4-300x165.jpg\" alt=\"how to change a favicon.4\" width=\"300\" height=\"165\" class=\"aligncenter size-medium wp-image-46387\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/12\/how-to-change-a-favicon.4-300x165.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/12\/how-to-change-a-favicon.4-150x82.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/12\/how-to-change-a-favicon.4.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n<li>\r\n<p>You may not be able to see your new favicon right away. The reason for this is because the default icon is probably still in your browser&#8217;s cache. If you clear your browser&#8217;s cache, you will be able to see the new favicon. Go to browser Tools and select Clear recent history tab.\r\n<p>Open your site in another browser and you will notice the change immediately.<\/p>\r\n<\/li>\r\n<li>\r\n<p>Refresh the page and you will see the new favicon in the address bar of the browser.<\/p>\r\n<\/li>\r\n<\/ol>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=Sch9KN8NXmw?width=1280&amp;height=720\" rel=\"prettyPhoto\">Joomla 3.x. How to change favicon<\/a><\/p>\r\n<p><\/p>\r\n\r\n<div class=\"inline-banner\">\r\n<a href=\"https:\/\/www.templatemonster.com\/cart.php?addOffer=587\">\r\n<img src=\"\/help\/files\/banners\/inline\/Banner-1-(500-x100).jpg\" \/>\r\n<\/a>\r\n<\/div>","protected":false},"excerpt":{"rendered":"<p>This tutorial will show you how to change browser favicon in your Joomla 3.x website.<\/p>\n","protected":false},"author":67,"featured_media":46389,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[724],"tags":[560,674,483],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/13515"}],"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\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=13515"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/13515\/revisions"}],"predecessor-version":[{"id":81890,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/13515\/revisions\/81890"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/46389"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=13515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=13515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=13515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}