VSCode：Live Serverで「GET http://127.0.0.1:5500/favicon.ico 404 (Not Found)」が出て気になる場合

わたしの場合は、Web Audio APIで音声再生するためLive Serverを使ってChromeでHTMLを開いた際、このコンソールエラーが表示された。

エラーメッセージ

GET http://127.0.0.1:5500/favicon.ico 404 (Not Found)

「favicon.icoが存在しませんよ」という意味らしいが、HTMLファイル内容は以下のようにfavicon.icoにアクセスするような設定にはなっていない。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="main.js"></script>
    <title>Web Audio APIの利用</title>
</head>
<body>
    <p>Web Audio APIを利用した音源の再生と停止・音量調整</p>
    <!-- audio source -->
    <audio src="maou_bgm_8bit29.mp3" crossorigin="anonymous"></audio>

    <!-- UI -->
    <button data-playing="false" role="switch" aria-checked="false">
        <span>Play/Pause</span>
    </button>
    <p>Volume<input type="range" name="" id="volume" min="0" max="2" value="1" step="0.01" data-action="volume"></p>
</body>
</html>

ちなみに上記HTMLからJavaScriptプログラム（main.js）は問題なく実行できている。

このメッセージが気になる方は以下を試してください。

HTMLのheadタグ内に

<link rel="shortcut icon" href="#">

を追記することでこのエラーはコンソールから消えます。

追記イメージ

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="#">
    <script src="main.js"></script>
    <title>Web Audio APIの利用</title>
</head>
<body>
    <p>Web Audio APIを利用した音源の再生と停止・音量調整</p>
    <!-- audio source -->
    <audio src="maou_bgm_8bit29.mp3" crossorigin="anonymous"></audio>

    <!-- UI -->
    <button data-playing="false" role="switch" aria-checked="false">
        <span>Play/Pause</span>
    </button>
    <p>Volume<input type="range" name="" id="volume" min="0" max="2" value="1" step="0.01" data-action="volume"></p>
</body>
</html>

ただこれは良い解決策とも思えない。
素直にサーバにアップした場合は、<link rel=”shortcut icon” href=”#”> などと追記しなくてもこのエラーは表示されない。

このメッセージはあくまでローカル環境でLive Serverを使ったときに表示されるだけなので、気にしないというのも一つの手かもしれない。（Chromeは最近小うるさい舅みたいだ）

参考