The functionality of updating the logo in the browser tabs is not functioning as expected in Vue.js 3

This is the code from my index.html:

        <!DOCTYPE html>
        <html lang="">
          <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width,initial-scale=1.0">
            <link rel='icon' href="public\img\favicon.png">
            <title>ContreversyMedia</title>
          <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" /></link>-->
          </head>
          <body>
            <noscript>
              <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
            </noscript>
            <div id="app"></div>
            <!-- built files will be auto injected -->
          </body>
        </html>

I'm attempting to change the default icon that displays in the browser tabs:

This is my public folder structure:

The issue arises when I removed the pwa file and deleted all icons in the public\img\icons folder, yet the DevTools still show files located there even though the folder is empty. I've cleared my browser cache and tried different browsers, but the problem persists:

I am unsure of how to handle this situation as I am not familiar with vuejs and its template workings.

javascriptvue.js

Answer №1

When serving static assets from the base URL in a project structured with public/, make sure your href URLs do not include public/. Additionally, if your icon file resides in public/img/icons, ensure that your href includes the correct directory structure.

In the context of a Vue CLI scaffolded project, a properly formatted href should resemble:

<link rel="icon" href="<%= BASE_URL %>img/icons/favicon.png">

Answer №2

After reviewing your folder structure screenshot, I noticed that both your index.html file and your favicon.png file are located in the same directory (/public/img/icons/). This means that Vue will automatically generate a new index.html file for you, causing any changes made to the original index.html to be disregarded.

To resolve this issue, it is necessary to move your index.html file to the root of your public folder (i.e., /public/index.html) and update the path in your favicon import statement to use 

<%= BASE_URL %>img/icons/favicon.png
(
<link rel="icon" href="<%= BASE_URL %>img/icons/favicon.png">
)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Pass a reply from a function to a route in expressjs

I'm currently working on a project where I need to retrieve JSON data from an API using an Express server in Node.js. However, I'm facing some confusion regarding how Node.js manages this process. In my code, I have both a function and a route de ...

javascriptnode.jsexpress

Transferring information from child to parent class in TypeScript

I have a scenario where I have two classes (Model). Can I access properties defined in the child class from the parent class? Parent Class: class Model{ constructor() { //I need the table name here. which is defined in child. } publ ...

javascriptnode.jstypescriptexpressoop

Swap the text within the curly braces with the div element containing the specified text

I have an input and a textarea. Using Vue, I am currently setting the textarea's text to match what's in the input field. However, now I want to be able to change the color of specific text by typing something like {#123123}text{/#}. At this poin ...

javascripthtmlcssvue.js

I'm struggling with an issue of being undefined in my React.js project

This code snippet is from my app.js file import React, { useState, useEffect } from "react"; import { v4 as uuid } from "uuid"; import "./App.css"; import Header from "./Header"; import AddContact from "./AddCo ...

javascriptreactjsproject

Determining the most appropriate time to utilize the 'async' built-in function in ES2017 versus implementing 'npm i async' can depend on a variety of factors such

I recently discovered that async/await is a feature of ES2017, however, in some of my previous projects I had to use the package async to implement async/await functionality. Is there a simple way to determine when async can be used without importing it? ...

javascriptnode.jsasynchronousnpmasync-await

React.js Component Composition Problem

I am attempting to replicate the following straightforward HTML code within a React environment: Traditional HTML <div> Hello <div>child</div> <div>child</div> <div>child</div> </div> React(working ...

javascriptreactjs

Managing interactions with dynamically created buttons

Our Story Greetings! I am skilled in C# and VB.net, but I am diving into the world of Javascript and React. Currently, I am building a ticket purchase app to enhance my skills. While I was able to quickly create this app using Angular, React has posed mor ...

javascriptreactjsecmascript-6dom-events

Tips for structuring JSON data to retrieve numerous values

Creating a tool where users can enter their postcode to check for nearby windfarms is my current project. I have organized the data by named locations, and it's important to maintain that structure due to the specific API mapping tool I am using. Here ...

javascriptjson

Reset the form value in React using Material UI components

Currently, I am working with React Material and hooks, attempting to reset a material form. However, despite my efforts to adjust the state, I am not seeing any changes reflected. <form className="create-account-form" autoComplete="off" onSubmit={onSub ...

javascriptreactjsmaterial-ui

Change a 24-hour time variable to 12-hour time using AngularJS/jQuery technology

I have a value retrieved from the database in a 24-hour time string format. I am seeking a solution to convert this string into a 12-hour clock time using either AngularJS or jQuery. Currently, I am unable to make any changes to the back-end (JAVA) or the ...

javascriptjqueryangularjs

Tips for resolving the issue of dropdown menus not closing when clicking outside of them

I am currently working on an angular 5 project where the homepage consists of several components. One of the components, navbarComponent, includes a dropdown list feature. I want this dropdown list to automatically close when clicked outside of it. Here i ...

javascriptangulartypescript

What is the correct way to set a function as the value for an object without using quotation marks?

I am facing a challenge of generating very large JavaScript files using Node.js. Each file contains a const variable that holds values tailored for the specific file, with these values only known at runtime. For example: 'use strict' const lib ...

javascriptnode.js

Identifying sluggish hardware or unresponsive browsers using JavaScript

My site features numerous CSS animations and transitions that run very slowly on specific browsers and older hardware. I want to avoid user-agent sniffing; is there a way to identify browsers or hardware configurations using JavaScript or a JS library, and ...

cssbrowserjavascript

Does Vuex dispatch from within a component include a particular type of behavior known as a "promise"?

Currently, I am diving into vuex and facing an issue. During the created() lifecycle hook, my goal is to fetch data from an API. Once this action is complete, I need to call a getter from the component and assign the retrieved cards to the component's ...

javascriptvue.jspromiseaxiosvuex

Delete an element from an array once an AJAX response has been received

As a Vue.js beginner transitioning from jQuery, I find myself frustrated and struggling with basic concepts for a simple project. Specifically, I am attempting to delete an article only after receiving an ajax response, displaying a spinner while waiting. ...

ajaxvue.js

What is causing this error/bug to show up in Angular?

I encountered an error while working on my Angular project that incorporates both front-end and back-end development with Python Flask. Even though the page updates correctly, a database-related error is being displayed in the console. Below are the snippe ...

javascriptpythonangulartypescript

Tips for transmitting information from the main window to a child in JavaScript

Being relatively new to JavaScript, I am attempting to transfer a value entered into an input text field on a parent window to its child window when a button on the parent window is clicked. The parent window features an input field for entering a number a ...

javascriptbuttonwindowparent

The concept of navigation and passing parameters in Angular.js

Attempting to customize the standard user module of MeanJS, I added a new route: state('users', { url: '/users/:username', templateUrl: 'modules/users/views/view-profile.client.view.html' }); ...

javascriptangularjsangular-ui-routermeanjs

Can Firebase functions interact with the file system on Firebase Hosting?

Is it feasible with firebase functions to manipulate the filesystem of firebase hosting? I'm looking to run a build script within the hosting's files using a cloud function. For example, I want to trigger the build script for a Vue application ...

firebasevue.jsgoogle-cloud-functionsnuxt.js

Establishing a minimum width for the value of zero in AmCharts column series by customizing the bullet labels

Here's an interesting example where I have arranged column series with bullet labels. However, you may notice that there are some 0 values present as well. My goal is to establish a minimum width for the series so that even if the value is small or 0, ...

javascriptchartsamchartsamcharts4