0

I got my logo which is an SVG file for my react project which is saved in my images folder , i wanted to use this SVG icon on my browser tab , am i able to use SVG files ? and how i can link to it , i tried doing the following in the head tag in the index.html file but didnt work .

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="src\images\logo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="src\images\logo.svg" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Mulish:wght@300;400;700&family=Playfair+Display:wght@700&display=swap"
      rel="stylesheet"
    />

    <title>Thousand Sunny Travel Agency</title>
  </head>
  • I don't think this is specific to reactjs... looks like you need to change your icon to png or ICO format & rename it. See this duplicate question https://stackoverflow.com/questions/4888377/how-to-add-a-browser-tab-icon-favicon-for-a-website – Cheshiremoe Apr 19 '22 at 03:32
  • Does this answer your question? [How to add a browser tab icon (favicon) for a website?](https://stackoverflow.com/questions/4888377/how-to-add-a-browser-tab-icon-favicon-for-a-website) – Cheshiremoe Apr 19 '22 at 03:33
  • yeah .. thank you very much –  Apr 19 '22 at 04:18
  • please check https://caniuse.com/?search=svg%20favicon – enxaneta Apr 19 '22 at 05:48

0 Answers0