Angular CLI favicon을 변경하는 방법

Angular CLI favicon을 변경하는 방법

---

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 여야하며 이보다 크면 표시되지 않습니다.

---

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다시 시작을 시도했지만 "캐시 비우기 및 하드 다시로드"는 작동하지 않았습니다.

---

브라우저가 새 버전의 favicon을 다운로드하고 캐시 된 버전을 사용하지 않는지 확인하려면 favicon URL에 더미 매개 변수를 추가 할 수 있습니다.

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

---

나는 Angular에서 뭔가 잘못하고 있다고 생각하면서 이것으로 어려움을 겪고 있었지만 내 문제는 결국 Chrome에서 아이콘을 캐싱하는 것이 었습니다. 표준 "캐시 비우기 및 하드 다시로드"또는 브라우저 다시 시작은 저에게 효과가 없었지만 이 게시물 은 저를 올바른 방향으로 안내했습니다.

이것은 특히 나를 위해 일했습니다.

Windows에서 크롬을 사용하는 경우 (exit chrome from taskbar) C:\Users\your_username\AppData\Local\Google\Chrome\User Data\DefaultFavicons-journal, Favicons 파일 로 이동하여 삭제 한 다음 작업 표시 줄에서 크롬을 다시 시작 kill all instances합니다.

이것이 당신에게 효과가 없다면 그 게시물에 많은 다른 좋은 제안이 있습니다.

---

각도 CLI 파비콘 아이콘을 변경할 수 있습니다. 아이콘 파일을 "assets"폴더에 넣고 해당 경로를 index.html에 지정해야합니다.

<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png"> 그것은 나를위한 일입니다.

---

Angular 6의 경우 자산 폴더 favicon.png에 크기 32x32를 입력하고 index.html. 그때,

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

---

브라우저 창에서 Ctrl+ 누르기F5

---

모든 웹 프로젝트에 대해 FAVICON을 다시로드하려면 :

파비콘을 마우스 오른쪽 버튼으로 클릭하고 '다시로드'를 클릭합니다. 매번 작동합니다.

---

favicon.ico를 자산으로 이동 한 다음 img 폴더로 이동 한 다음 헤더의 아이콘 링크 태그 만 변경합니다. 파비콘이 전혀 표시되지 않았을 때 도움이됩니다.

---

미래의 독자를 위해 이런 일이 발생하면 브라우저에서 이전 캐시 된 파비콘을 사용하려고합니다.

다음과 같이하세요:

1. CTRL을 누른 상태에서 브라우저에서 "새로 고침"버튼을 클릭하십시오.
2. Shift 키를 누른 채 브라우저에서 "새로 고침"버튼을 클릭합니다.

결정된.

---

나는 이것을 잠시 가지고 놀았다. 파비콘은 @scematics (최소한 Angular5에서)라는 노드 모듈에 의해 분명히 처리된다는 것이 밝혀졌습니다.

이 폴더에서 파비콘을 변경할 수 있습니다.

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

그 폴더에는 favicon.ico가 있어야합니다. 이것이로드 된 것입니다. 나는 이것이 모든 사람에게 적용되지는 않지만 나를 위해 잘 풀렸다 고 확신합니다.

이것이 도움이 되었기를 바랍니다. 즐거운 코딩 되세요! :디

---

앱 아이콘을 변경하려면 다음 단계를 따르십시오.

1. 프로젝트에 .ico 파일을 추가하십시오.
2. angular.json으로 이동하여 "projects"-> "architect"-> "build"-> "options"-> "assets"에서 아이콘 파일에 대한 항목을 만드십시오. 방법을 알아 보려면 favicon.ico의 기존 항목을 참조하십시오.

3. index.html로 이동하여 아이콘 파일의 경로를 업데이트하십시오. 예를 들면

4. 서버를 다시 시작하십시오.

5. 하드 새로 고침 브라우저를 사용하면 좋습니다.

---

Make sure when you use icon image it is not manipulated extension, like if you download a png image and then manually change its extension from png to icon. In this case, your image will be corrupted. And browser does not understand.

I did this mistake, but after using original icon image its start working.

---

1.Check your link tag on index.html file that it should look like this.

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

2.Check file name of favicon.ico in /src directory.

3.Rerun Angular with ng serve and refresh application.

4.If it doesn't show (or something look like it buffer old favicon.ico file). try to refresh path of favicon again to load favicon.ico file (eg. refresh yourdomain.com/favicon.ico)

---

I had the same problem.

If you are using a Mac, you will need to empty the Cache (Option+⌘+E) and reload the page in addition to restarting the app (and of course changing the path in index.html).

---

1. Remove your existing favicon.ico
2. Add new icon into the src folder with name as "favico.ico"
3. Clear Cache in your browser.

The icon does not reflect only because of your browser cache. Sometimes try restarting the application

---

Following steps worked for me.

1. Remove default "favicon.ico" file with a new one with different name i.e. "_favicon.ico" in my case.

   Note :: Don't keep the default name, as it's get's cached in your browser and difficult to overwrite with new icon.

2. Update index.html with new link tag i.e.

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

3. Update .angular-cli.json with new icon name i.e. "_favicon.ico".

4. Build & launch your app, and do a hard refresh Ctrl+F5.

---

as simple and easy as :

1. add your icon or png in the same directory as favicon
2. edit .angular-cli.json, in assets remove favicon.ico put yours in place
3. edit index.html, search favicon and put yours in place
4. run ng serve again

that's done

---

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

"assets": [

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

  ],

this worked for me.

---

In my case, the problem was that I had different dimensions compared to normal one. I had 48x48 px whereas it was expecting 32x32 px and my extension was png so I had to change it to ico

---

For those needing a dynamically added favicon here is what I did with an app initializer:

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: []
}

Just remove fav.ico file under src/ and add this. The favicon will be added before app start

---

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

Add source of your icon and restart app it will change.

---

What really works for me was putting my favicon into assets folder and apear automatically in the browser.

1. change location to assets folder inside src folder.
2. change index.html like this <link rel="icon" type="image/x-icon" href="assets/favicon.png">

---

I tried many of these solution but was unsuccessful. The one that worked for my angular 5 application was the below:

index.html: Comment out your link tag

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

.angular-cli.json: leave the item type as ".ico"

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

LASTLY..

• In your project folder structure, have the favicon.ico inside the src ex: (C:\Dev\EPS\src). You do NOT need to have it in your asset folder since you aren't referencing it.

• Make sure your icon is not broken (Your icon should be readable if viewed through window explorer aka no broken window icon)

• must be 32 x 32 dimension

---

Deleting chromes favicon cache and restarting the browser on the mac worked for me.

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

---

I had the same issue, and solved it by forcing the refreshby the method described here:

To refresh your site's favicon you can force browsers to download a new version using the link tag and a querystring on your filename. This is especially helpful in production environments to make sure your users get the update.

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

---

I fixed the issue by creating my own .ico file and created a assets folder and put the file over there. Then changed the link href in Index.html

참고URL : https://stackoverflow.com/questions/40817280/how-to-change-angular-cli-favicon