Free Business Tools & Reports

How To Change the Browser Favicon in Vite+React

To change the favicon (the small icon in the browser tab) of a page or web app created in Vite+React from the Vite+React logo to your own, you need to modify the index.html file in your Vite project and place your custom icon file in the correct location.

Here’s how to do it:

  1. Prepare Your Favicon:
    • First, you’ll need your custom icon file. Favicons are typically .ico files, but modern browsers also support .png or .svg files. A common size is 32×32 pixels or 16×16 pixels for .ico files.
    • Let’s assume your custom favicon file is named favicon.png (or favicon.ico, favicon.svg).
  2. Place Your Favicon File:
    • In your local Vite project, place your favicon.png (or .ico, .svg) file inside the public directory. This directory is specifically for static assets that Vite copies directly to the dist folder during the build process without further processing.
  3. Edit index.html:
    • Open the index.html file located in the root of your Vite project (not inside src).
    • Look for lines similar to these in the <head> section: HTML<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/react.svg" /> Or just: HTML<link rel="icon" type="image/svg+xml" href="/vite.svg" />
    • Replace or modify these lines to point to your new favicon file. For example, if your file is favicon.png in the public folder: HTML<link rel="icon" type="image/png" href="/favicon.png" /> If your favicon is an .ico file, the type would be image/x-icon or image/vnd.microsoft.icon. If you have multiple favicon sizes or types, you can include multiple <link rel="icon"> tags.
  4. Rebuild Your Application:
    • After making these changes, you need to rebuild your application so Vite includes your new favicon and updates the index.html in the dist folder.
    • Open your terminal in the root of your project and run: Bashnpm run build or Bashyarn build
  5. Re-upload to Your Website:
    • Upload the entire new contents of your local dist folder to your web server via cPanel (or your chosen method), overwriting the old files.

After these steps, clear your browser’s cache and visit your website. You should now see your custom favicon in the browser tab.

Dorien

Leave a Reply

Your email address will not be published. Required fields are marked *