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:

https://i.sstatic.net/qWmrs.png

This is my public folder structure:

https://i.sstatic.net/llIgQ.png

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:

https://i.sstatic.net/hhgIs.png

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

How can I use JQuery to iterate through Object data and dynamically create tr and td elements?

In previous projects, I utilized Vanilla JS to iterate through Ajax return data and construct tables. However, for this current project, I have decided to switch over to JQuery. The main reason behind this decision is that some of the td elements require s ...

javascriptjqueryhtmlajax

Protected node.js REST API

I want to ensure the security of a restful API and aim to keep it simple and stateless. What is the best way to store, generate, and authenticate API keys? I was considering using node-uuid to generate keys, storing them in Redis, and then authenticating ...

javascriptnode.jssecurityrestexpress

Struggling to concentrate using jQuery?

When the search icon is clicked, I want the focus to be on the input so the user can start typing right away without having to manually click on it. Although I tried using focus(), it doesn't seem to work for this particular input. $('.header__ic ...

javascriptjquery

There was an error trying to read properties of undefined, specifically the 'prototype', in a code using Next.Js and Express

While attempting to incorporate express into my next.js project, I encountered errors when trying to initialize express: const express = require('express'); The errors that appeared were: Module not found: Can't resolve 'async_hooks ...

javascriptnode.jsexpressnext.js

Steps for extracting a specific portion of a value contained within an attribute

In my code, there are multiple hyperlinks with different values attached to an onclick function. Here is an example: <a onclick="Utils.decideOffer('', {'unlockFeature': 'cars'});">cars text</a> <a onclick="Util ...

javascriptjqueryregex

Rails - removing list item upon deletion of parent object

Currently working on a project app as part of a full stack developer bootcamp program. One of the features I'm implementing is a destroy method to remove an item from a list. Using AJAX requests, the goal is to dynamically remove the li element repres ...

javascriptjqueryruby-on-railsajax

When utilizing DomSanitizer, Angular2 suddenly ceases to function properly

I've been working with Angular 2 and TypeScript. Everything was going well until I encountered an issue with my pipe, which is causing the DomSanitizer to interfere with the (click) event functionality. Even though the (click) code appears intact in ...

javascriptangulartypescriptangular-dom-sanitizer

Position an element with absolute positioning to the right edge of a relative element

I have a situation where I need to align the end of a position absolute element with the end of a relative element, but the relative element's width is not fixed and may vary based on content. This scenario arises as I am creating a custom dropdown m ...

javascripthtmlcss

Utilizing VUE with Socket.io or vue-socket.io Integration

I've been working on connecting using socket.io (client) and websocket.org (server) with vue.js. Despite going through all the examples, I can establish a connection to the socket but when I emit the event BOARD_ID, I don't receive any response. ...

javascriptvue.jssocketswebsocketsocket.io

What is the best way to create a select box in React that allows for both single and multiple selections?

I recently started utilizing a new package for generating dynamic forms, which can be found at this link. Upon reading through the documentation, I attempted to create a select box as outlined in the instructions provided here. Despite following the step ...

javascriptreactjsformsformio

Having trouble with ReactJS rendering components?

FriendList.js var React = require('react'); var Friend = require('./friend.js'); var FriendList = React.createClass({ render: function() { return( <div> <h3& ...

javascriptreactjs

Is it possible to pass component props to mapGetters in VueX?

Currently, I am in the process of creating a universal input Vue component. My main goal right now is to fetch the initial value from the store before focusing on manipulating the data within the input. Here's what I have so far: This seems to be wor ...

javascriptvue.jsvuex

What is the best way to create an HTML form on-the-fly from a JSON object?

Could someone please assist me in understanding how to dynamically generate an HTML form based on a JSON object using JavaScript? ...

javascripthtmljsondynamic

Is it possible to perform direct URL searches using react-router-dom?

Encountering an issue when attempting to directly copy a route, resulting in the following error: Error: Cannot Access / home Despite utilizing various methods such as browserHistory, I am unable to successfully render views when navigating with menu i ...

javascriptnode.jsreactjsreact-routerreact-router-dom

Changing the size of icons in an Alert using Material UI with React

Recently, Material UI unveiled the new 'Alert' component. Everything seems to be working well, except for the fact that I can't find a way to adjust the size of the icon. Here is my code snippet: <Snackbar open={true}> <Alert ...

javascriptreactjsmaterial-ui

What is the best way to manage multiple arrays?

There is an array containing multiple arrays within it. I am trying to locate the specific sub-array that contains an object with name: "tax-payer-identification". Once found, I need to set the variable's value from required: true to false. ...

javascriptreactjsarrays

"Encountering a strange issue where submitting a form with Jquery and AJAX in Rails does not work as expected, causing the index

Currently facing a unique issue with a jQuery/Ajax HTML update form. The application in question is a single-page TODO App that utilizes a Rails controller, where all changes to the DOM are made through jQuery/Ajax. After rendering the TODOs on the page v ...

javascriptjqueryruby-on-railsajaxforms

Recreating the rotation of an object within a rotated parent using Three.js

After constructing my 3D globe and placing it within a parent bounding box / pivot, the code looked like this: var globe = new THREE.Group(); if (earthmesh) {globe.add(earthmesh);}; if (linesmesh) {globe.add(linesmesh);}; if (cloudmesh) {globe.add(cloudmes ...

javascriptthree.jsrotationquaternionsbounding-box

Tips on connecting the endpoints of two parallel quadratic Bezier curves that both begin with a MoveTo command

I am currently working on creating a Sankey Diagram from scratch using VueJS and SVG. I have encountered challenges in closing the paths of two parallel quadratic Bezier curve paths from nodes to nodes. For instance, after some additional calculations, I ...

javascriptvue.jssvg

Synchronizing information between different controllers using a service

After reading the discussion on this stackoverflow post, it seems like using services is the recommended way to transfer data between controllers. However, in my own testing on JSFiddle here, I encountered difficulties in detecting changes to my service w ...

javascriptangularjs