Angular CLIファビコンを変更する方法

Angular CLIで設定されているデフォルトのファビコンを変更するにはどうすればよいですか？

多くのことを試しましたが、アイコン（srcフォルダー内のfavicon.ico）を削除しても、Angularロゴは常にファビコンとして表示されます。それはまだ表示され、どこから読み込まれたのかわかりません。

そのアイコンを別のアイコンに置き換えましたが、まだAngularロゴが表示されています。

<link rel="icon" type="image/x-icon" href="favicon.ico">

同じ名前（favicon.png）のpng画像を作成し、これらのファイルの名前を変更します。

index.html：

<link rel="icon" type="image/x-icon" href="favicon.png" />

angular-cli.json：

"assets": [
    "assets",
    "favicon.png" 
],

また、角度のデフォルトアイコンは二度と表示されません。

サイズは32x32にする必要があります。これ以上の場合は表示されません。

注：これはAngular 9では機能しません

角度9の場合、ファビコンをアセット内に配置し、次のようなパスを指定する必要があります

<link rel="icon" type="image/x-icon" href="assets/favicon.png">

favicon.icoファイルを物理的に置き換えたので、どこかにキャッシュの問題があるはずです。ブラウザにキャッシュがあります。Ctrl+ を押して強制的にフラッシュさせF5ます。

それでもデフォルトのアイコンが表示される場合は、キャッシュがクリーンな別のブラウザを試してください（つまり、そのブラウザでまだページにアクセスしていない）。

キャッシュのクリアショートカット：（出典）

Windows
IE：Ctrl+ R; Firefox：Ctrl+ Shift+ R; Chrome：Ctrl+ R、またはCtrl+ F5、またはShift+ F5。

Mac
Safari：⌘+ R; Firefox / Chrome：⌘+ Shift+ R。

ファイルに移動すると、最終的にこれが修正されました。私の場合：http：// localhost：4200 / favicon.ico

私は更新、停止、ng serve再開を試みましたが、「キャッシュとハードリロードを空にする」ことはできませんでした。

ブラウザがファビコンの新しいバージョンをダウンロードし、キャッシュされたバージョンを使用しないことを確認するには、ファビコンURLにダミーパラメータを追加します。

<link rel="icon" type="image/x-icon" href="favicon.ico?any=param">

角度の付いたCLIファビコンアイコンを変更できます。アイコンファイルを「assets」フォルダに配置し、そのパスをindex.htmlに指定する必要があります。

<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png"> それは私にとって仕事です。

私もAngularで何か問題があると思ってこれに苦労していましたが、問題はChromeがアイコンをキャッシュすることでした。標準の「空のキャッシュとハードリロード」またはブラウザの再起動は機能しませんでしたが、この投稿は正しい方向を示しました。

これは特に私のために働きました：

Windowsでchromeを使用している場合は、(exit chrome from taskbar） C:\Users\your_username\AppData\Local\Google\Chrome\User Data\Default Favicons-journalに移動してファイルを削除し、Faviconsはchromeを再起動します（タスクバーからkill all instances）。

これがうまくいかない場合、その投稿には他にもたくさんの良い提案があります。

Angular 6 favicon.pngの場合32x32は、アセットフォルダーにサイズを入れ、でパスを変更しますindex.html。そして、

<link rel="icon" type="image/x-icon" href="./assets/favicon.png">

拡張子が.icoのアイコン画像を作成し、それをコピーしてsrcフォルダー内のデフォルトのファビコンファイルに置き換えます。

index.html：

<link rel="icon" type="image/x-icon" href="favicon.ico" />

angular.json：

**"assets": [
          "src/favicon.ico",
          "src/assets"
        ],**

favicon.icoをアセットに移動し、次にimgフォルダーに移動します。その後、ヘッダーのアイコンリンクタグのみを変更します。ファビコンがまったく表示されなかったときに役立ちます。

ブラウザウィンドウでCtrl+ F5を押す

任意のWebプロジェクトのファビコンをリロードするには：

ファビコンを右クリックして、「再読み込み」をクリックします。毎回動作します。

将来の読者のために、これがあなたに起こった場合、あなたのブラウザは古いキャッシュされたファビコンを使いたがります。

次の手順を実行します：

1. Ctrlキーを押しながら、ブラウザの[更新]ボタンをクリックします。
2. Shiftキーを押しながら、ブラウザの[更新]ボタンをクリックします。

修繕。

アプリのアイコンを変更するには、以下の手順に従ってください：

1. プロジェクトに.icoファイルを追加します。
2. angular.jsonに移動し、その「プロジェクト」->「アーキテクチャ」->「ビルド」->「オプション」->「アセット」で、ここにアイコンファイルのエントリを作成します。方法については、favicon.icoの既存のエントリを参照してください。

3. index.htmlに移動して、アイコンファイルのパスを更新します。例えば、

4. サーバーを再起動します。

5. ブラウザをハードリフレッシュすると、問題ありません。

私はしばらくこれをいじっていました。ファビコンは明らかに@scematicsと呼ばれるノードモジュールによって処理されていることがわかります（少なくともAngular5では）。

このフォルダでファビコンを変更できます：

[YourProjectName]\node_modules\@schematics\angular\application\files\__sourcedir__

そのフォルダーには、favicon.icoがあるはずです。これがロードされます。これは誰にも当てはまりませんが、私にとってはうまくいきました。

これがお役に立てば幸いです。幸せなコーディング！：D

動的に追加されたファビコンを必要とする人のために、ここに私がアプリ初期化子でやったことがあります：

import { APP_INITIALIZER, FactoryProvider } from '@angular/core'

export function faviconInitFactory () {

 return () => {
  const link: any = document.querySelector(`link[rel*='icon']`) || document.createElement('link')
  link.type = 'image/x-icon'
  link.rel = 'shortcut icon'

  if (someExpression) {
    link.href = 'url' || 'base64'
  } else {
    link.href = 'url' || 'base64'
  }

  document.getElementsByTagName('head')[ 0 ].appendChild(link)
}

}

export const FAVICON_INIT_PROVIDER: FactoryProvider = {
  provide: APP_INITIALIZER,
  multi: true,
  useFactory: faviconInitFactory,
  deps: []
}

src /の下のfav.icoファイルを削除して、これを追加するだけです。ファビコンはアプリの起動前に追加されます

<link rel="icon" type="image/x-icon" href="#">

アイコンのソースを追加し、アプリを再起動して変更します。

私はこれらの解決策の多くを試しましたが、失敗しました。私のangular 5アプリケーションで機能したのは以下です：

index.html：リンクタグをコメント化します

 <!-- <link rel="icon" type="image/png" href="src/assets/images/favicon.ico"> --> 

.angular-cli.json：アイテムタイプを「.ico」のままにします

 "assets": [
      "assets",
      "favicon.ico"
    ],

最後に..

• プロジェクトのフォルダー構造で、src ex：（C：\ Dev \ EPS \ src）内にfavicon.icoを置きます。参照していないので、アセットフォルダーに入れる必要はありません。

• アイコンが壊れていないことを確認します（ウィンドウエクスプローラー（壊れていないウィンドウアイコン）で表示した場合、アイコンは読みやすいはずです）

• 32 x 32のサイズである必要があります

アイコン画像を使用するときは、png画像をダウンロードして手動でその拡張子をからpngに変更する場合のように、操作された拡張子ではないことを確認してくださいicon。この場合、画像が破損します。そして、ブラウザは理解していません。

私はこの間違いをしましたが、元のアイコン画像を使用した後、動作し始めました。

1. index.htmlファイルのリンクタグが次のようになっていることを確認します。

<link red="icon" type="image/x-icon" href="favicon.ico">

2. / srcディレクトリにあるfavicon.icoのファイル名を確認します。

3.ng serveでAngularを再実行し、アプリケーションを更新します。

4.それが表示されない場合（または、古いfavicon.icoファイルをバッファするようなもの）。favicon.icoファイルをロードするためにfaviconのパスを再度更新してみてください（例：yourdomain.com/favicon.icoを更新してください）

同じ問題がありました。

Macを使用している場合は、アプリを再起動する（そしてもちろんindex.htmlのパスを変更する）ことに加えて、キャッシュ（Option+ ⌘+ E）を空にしてページをリロードする必要があります。

1. 既存のfavicon.icoを削除します
2. 「favico.ico」という名前の新しいアイコンをsrcフォルダーに追加します
3. ブラウザのキャッシュをクリアします。

ブラウザのキャッシュだけが原因でアイコンが反映されるわけではありません。時々アプリケーションを再起動してみてください

次の手順は私のために働いた。

1. デフォルトの「favicon.ico」ファイルを別の名前で新しいファイル、つまり私の場合は「_favicon.ico」で削除します。

   注::デフォルトの名前はブラウザにキャッシュされ、新しいアイコンで上書きすることが難しいため、そのままにしないでください。

2. 新しいリンクタグでindex.htmlを更新する、つまり

    <link rel="icon" type="image/x-icon" href="_favicon.ico" /> 
   

3. .angular-cli.jsonを新しいアイコン名、つまり「_favicon.ico」で更新します。

4. アプリをビルドして起動し、ハードリフレッシュを実行しますCtrl+ F5。

のようにシンプルで簡単：

1. アイコンまたはpngをファビコンと同じディレクトリに追加します
2. .angular-cli.jsonを編集し、アセットでfavicon.icoを削除して、適切な場所に配置します
3. index.htmlを編集し、ファビコンを検索して、適切な場所に配置します
4. もう一度サーブを実行

できた

<link rel="icon" type="image/x-icon" href="assets/liana.jpg">

"assets": [

        "assets/sorry.jpg",
        "assets/liana.jpg"

  ],

これは私のために働いた。

私の場合、問題は、通常のものとは異なる次元を持っていることでした。私は48x48 pxそれを期待していたのに対し32x32 px、私の拡張子はpngだったので、それを次のように変更する必要がありましたico

私にとって実際に機能したのは、ファビコンをアセットフォルダに入れて、ブラウザに自動的に表示されることでした。

1. 場所をsrcフォルダー内のassetsフォルダーに変更します。
2. このようにindex.htmlを変更してください <link rel="icon" type="image/x-icon" href="assets/favicon.png">

では、2020年の9.1.12ですね。なぜこのプロセスがそれほど難しいのか、よくわかりません。私は上記のほぼすべての投稿をフォローしましたが、どれも私のために機能しませんでした。

DIDの動作は次のとおりです。index.htmlのファビコン参照を完全に削除しました。それは完全に直感に反しますが、それは機能します。assetsフォルダーに入れる必要はありません。私はそれをすべて試しましたが、残念ながらそれらの提案はどれもうまくいきませんでした。

index.html

<!-- <link rel="icon" type="image/x-icon" href="favicon.ico"> DELETE THIS -->

angular.json

"assets": [
  "src/favicon.ico",
  "src/assets"
],

を実行するng build --prodと、ファビコンが表示されます。私のライブサーバーにも表示されます。

Chromeのファビコンキャッシュを削除し、Macでブラウザを再起動するとうまくいきました。

rm ~/Library/Application\ Support/Google/Chrome/Default/Favicons

私は同じ問題を抱えており、ここで説明されている方法でrefreshbyを強制することで解決しました：

サイトのファビコンを更新するには、リンクタグとファイル名のクエリ文字列を使用して、ブラウザに新しいバージョンをダウンロードさせることができます。これは、ユーザーが更新を確実に取得できるように、実稼働環境で特に役立ちます。

<link rel="icon" href="http://www.yoursite.com/favicon.ico?v=2" />

私は自分の.icoファイルを作成し、assetsフォルダーを作成してその上にファイルを置くことで問題を修正しました。次に、Index.htmlのリンクhrefを変更しました