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; 크롬 : Ctrl+ R나 Ctrl+ F5나 Shift+ F5.

맥
사파리 : ⌘+ R; Firefox / Chrome : ⌘+ Shift+ R.

파일을 탐색하면 마침내이 문제가 해결되었습니다. 제 경우에는 http : // localhost : 4200 / favicon.ico

새로 고침을 중지하고 ng serve다시 시작한 후 "Empty Cache and Hard Reload"는 작동하지 않았습니다.

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

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

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

<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png"> 그것은 나를 위해 일하고 있습니다.

Angular에 문제가 있다고 생각하면서 이것으로도 어려움을 겪었지만 Chrome의 아이콘을 캐싱하는 문제가 발생했습니다. 표준 "빈 캐시 및 하드 다시로드"또는 브라우저를 다시 시작하는 것이 효과가 없었지만 이 게시물 에서 올바른 방향으로 지시했습니다.

이것은 특히 나를 위해 일했다 :

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

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

Angular 6의 경우 favicon.png32x32 경우 자산 폴더 에 크기 를 에서 경로를 변경하십시오 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를 누르십시오

모든 웹 프로젝트를위한 FAVICON을 다시 장착하려면 :

즐겨 찾기 아이콘을 마우스 오른쪽 버튼으로 클릭하고 '다시로드'를 클릭하십시오. 매번 작동합니다.

미래 독자들을 위해, 이런 일이 발생하면, 브라우저는 오래된 캐시 된 즐겨 찾기 아이콘을 사용하려고합니다.

다음과 같이하세요:

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

결정된.

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

1. 프로젝트에 .ico 파일을 추가하십시오.
2. angular.json으로 이동하여 "projects"-> "architect"-> "build"-> "options"-> "assets"에서 아이콘 파일을 입력하십시오. favicon.ico의 기존 항목을 참조하여 수행 방법을 확인하십시오.

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

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

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

나는 이것을 잠시 동안 놀고있었습니다. 파비콘이 @scematics (적어도 Angular5)라는 노드 모듈에 의해 처리되는 것으로 나타났습니다.

이 폴더에서 즐겨 찾기 아이콘을 변경할 수 있습니다.

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

해당 폴더에는 favicon.ico가 있어야합니다. 나는 이것이 모든 사람에게 적용되는 것은 아니라고 생각하지만 그것은 나를 위해 일했다.

이것이 도움이 되었기를 바랍니다. 행복한 코딩! :디

동적으로 추가 된 파비콘이 필요한 사람들을 위해 여기 앱 초기화 프로그램으로 수행 한 작업이 있습니다.

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="#">

아이콘 소스를 추가하고 앱을 다시 시작하면 변경됩니다.

나는이 솔루션 중 많은 것을 시도했지만 성공하지 못했습니다. 내 각도 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 안에 favicon.ico를 넣으십시오 (C : \ Dev \ EPS \ src). 참조하지 않기 때문에 자산 폴더에 필요하지 않습니다.

• 아이콘이 깨지지 않았는지 확인하십시오 (창 탐색기를 통해 볼 경우 아이콘이 깨진 창 아이콘이 아님).

• 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를 다시 실행하고 응용 프로그램을 새로 고칩니다.

표시되지 않는 경우 (또는 오래된 favicon.ico 파일을 버퍼링하는 것처럼 보이는 경우) favicon.ico 파일을로드하려면 favicon의 경로를 다시 새로 고치십시오 (예 : refresh yourdomain.com/favicon.ico)

나는 같은 문제가 있었다.

Mac을 사용하는 경우 캐시를 비우고 ( Option+ ⌘+ E) 앱을 다시 시작하는 것 외에도 페이지를 다시로드해야합니다 (물론 index.html의 경로 변경).

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. 새 아이콘 이름 (예 : "_favicon.ico")으로 .angular-cli.json을 업데이트하십시오.

4. 앱을 빌드 및 시작하고 하드 새로 고침 Ctrl+을 수행하십시오 F5.

간단하고 쉽게 :

1. favicon과 같은 디렉토리에 아이콘 또는 png를 추가하십시오.
2. .angular-cli.json을 편집하고 자산에서 favicon.ico를 제거하십시오.
3. index.html을 편집하고 favicon을 검색하여 원하는 위치에 배치하십시오.
4. ng serve 다시 실행

끝났어

<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 폴더 안의 자산 폴더로 위치를 변경하십시오.
2. 다음과 같이 index.html을 변경하십시오. <link rel="icon" type="image/x-icon" href="assets/favicon.png">

좋아, 여기 2020 년 9.1.12에. 이 프로세스가 왜 그렇게 어려운지 이해할 수 없습니다. 나는 위의 거의 모든 게시물을 따르고 그들 중 누구도 나를 위해 일하지 않았습니다.

DID 작동 방식 : index.html에서 favicon 참조를 완전히 제거했습니다. 완전히 반 직관적이지만 작동합니다. 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하면 파비콘이 있습니다. 내 라이브 서버에도 표시됩니다.

크롬 파비콘 캐시를 삭제하고 Mac에서 브라우저를 다시 시작하면 나에게 도움이되었습니다.

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

나는 같은 문제가 있었고 여기에 설명 된 방법을 새로 고침하여 해결했습니다 .

사이트의 즐겨 찾기 아이콘을 새로 고치려면 파일 이름의 링크 태그와 쿼리 문자열을 사용하여 브라우저가 새 버전을 다운로드하도록 할 수 있습니다. 이는 프로덕션 환경에서 특히 사용자가 업데이트를 받도록하는 데 유용합니다.

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

내 자신의 .ico 파일을 만들어 문제를 해결하고 자산 폴더를 만든 다음 파일을 그 위에 놓습니다. 그런 다음 Index.html에서 링크 href를 변경하십시오.