{"id":1120,"date":"2020-07-16T12:57:40","date_gmt":"2020-07-16T12:57:40","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2020\/07\/16\/change-favicon-in-magento-2\/"},"modified":"2025-05-22T12:32:47","modified_gmt":"2025-05-22T07:02:47","slug":"change-favicon-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/change-favicon-in-magento-2\/","title":{"rendered":"How to Change Favicon in Magento 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">A favicon, i.e, the \u201cfavourite icon\u201d is the small icon that you see on the tab of each page in the browser.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The favicon represents your brand to the user when he is visiting multiple sites at a time. If you want your store to stand apart among multiple sites open at a time in the visitor\u2019s machine, favicon does play a significant role!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Magento 2 allows the admin to upload favicon from the admin panel. It is recommended to use the ICO image format for the favicon, however, PNG, JPG, GIF, JPEG, APNG and SVG file types are also allowed, also&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/upload-svg-image-in-magento-2-custom-module\/\">uploading SVG image in Magento 2 custom module<\/a>&nbsp;to enhance visual content. The favicon is usually 16 * 16 pixels or 32 * 32 pixels in size.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The size and file type can be conveniently changed as per the requirements using free online tools available.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The default Magento favicon is of size 16*16 pixels which can be overridden by uploading a custom brand icon from the admin panel or adding it at a particular location in the theme directory manually. In case of both favicons, the priority of the one uploaded in the admin panel is considered.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Check the steps to&nbsp;<em><strong>change favicon in Magento 2<\/strong><\/em>&nbsp;that represents your brand!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Steps to change favicon in Magento 2:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1. <strong>Login&nbsp;<\/strong>to admin panel<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2. Navigate to&nbsp;<strong>Content &gt; Configuration<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3. Open the current website\/theme in the edit mode<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2020\/07\/1_change-favicon-in-Magento-2.png\" alt=\"1_change-favicon-in-Magento-2\" class=\"wp-image-9698\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">4. Expand the&nbsp;<strong>HTML Head<\/strong>&nbsp;section<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">5. Click on&nbsp;<strong>upload<\/strong>&nbsp;button to upload the favicon icon.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2020\/07\/2_change-favicon-in-Magento-2.png\" alt=\"2_change-favicon-in-Magento-2\" class=\"wp-image-9700\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">6. <strong>Save<\/strong>&nbsp;the configuration<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">7. Refresh cache<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The favicon will appear as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2020\/07\/change-favicon-in-Magento-2-frontend.png\" alt=\"change-favicon-in-Magento-2-frontend\" class=\"wp-image-9701\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Please share the post with the Magento community via social media.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A favicon, i.e, the \u201cfavourite icon\u201d is the small icon that you see on the tab of each page in the browser. The favicon represents&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1120","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1120"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1120\/revisions"}],"predecessor-version":[{"id":14787,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1120\/revisions\/14787"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}