{"title":"▶️ Add a favicon to your website","slug":"how-to-add-a-favicon-to-your-website","url":"https://support.storeconnect.com/articles/how-to-add-a-favicon-to-your-website","url_markdown":"https://support.storeconnect.com/articles/how-to-add-a-favicon-to-your-website.md","subtitle":null,"summary":"Upload a favicon image to the media library, create a head content block with the favicon link tag, and apply it to your store\u0026#39;s global content so it appears in browser tabs.","type":"Videos_Tutorials","video_url":"https://vimeo.com/1197573418?fl=sv\u0026fe=ci","keywords":null,"last_modified":"2026-08-21T07:12:35+0000","body_markdown":"### Code Snippet:\n\n```\n\n```\n\nWhere the [https://path/favicon.png](https://path/favicon.png) is the URL from your favicon's media record.\n\n### **1\\. Upload the Favicon Image**\n\n1.  Go to the **StoreConnect app** (backend).\n\n2.  Navigate to:\n    **Media List View**.\n\n3.  Click **New** to upload a new media file:\n\n    -   Give it a **Name**.\n\n    -   Select **File Type**: *Image*.\n\n    -   Upload your favicon image file (recommended format: `.ico`, `.png`, `.svg`).\n\n4.  Click **Save**.\n\n5.  After saving, copy the **URL** provided (from the StoreConnect Content Delivery Network).\n\n\n---\n\n### **2\\. Create a Content Block for the Favicon**\n\n1.  Go to:\n    **StoreConnect Navigation → Custom Content → Content Blocks**.\n\n2.  Click **New** to create a content block:\n\n    -   Select **Content Template**: *No added styling*.\n\n    -   Give it a **Name** (e.g. *Header Content Block*).\n\n3.  In the **Content** section, add the following HTML code:\n\n    Replace `\"https://path/favicon.png\"` with the URL you copied earlier.\n\n4.  Click **Save**.\n\n\n---\n\n### **3\\. Apply the Content Block to the Website Header**\n\n1.  Go to your **Store Record**.\n\n2.  Under the **Content** section, open **Global Content**.\n\n3.  Under the **Head Content** field:\n\n    -   Edit and select your newly created **Header Content Block**.\n\n4.  Click **Save**.\n\n\n---\n\n### **4\\. Verify the Favicon**\n\n1.  Visit your **live website**.\n\n2.  Refresh the page.\n\n3.  You should now see the **favicon** appearing in the browser tab.\n\n\n---\n\n### **(Optional) Removing or Updating the Favicon**\n\n-   To change or remove the favicon:\n\n    -   Update or replace the image in **Media**.\n\n    -   Edit the **Content Block** and update the **URL** as needed.\n\n    -   Save and refresh your website."}