Как изменить Угловой CLI favicon

Как я могу изменить значок по умолчанию, который установлен Angular CLI?

Я пробовал много вещей, но он всегда показывает логотип Angular в качестве значка, хотя я удалил этот значок (favicon.ico в папке src). Это все еще показывает, и я не знаю, откуда это загружено.

Я заменил этот значок на другой, но на нем все еще отображается логотип Angular:

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

Создайте изображение png с тем же именем ( favicon.png) и измените имя в этих файлах:

index.html:

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

angular-cli.json:

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

И вы больше никогда не увидите угловой значок по умолчанию.

Размер должен быть 32х32, если больше этого не будет отображаться.

ПРИМЕЧАНИЕ: это не будет работать с Angular 9

Для углового 9 вы должны поместить favicon в активы, а затем указать путь, как

<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снова, и «Очистить кэш и полная перезагрузка », ни один не работал.

Убедившись, что браузер загружает новую версию favicon и не использует кэшированную версию, вы можете добавить фиктивный параметр в URL favicon:

<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 используется 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в окне браузера

ПЕРЕЗАГРУЗИТЬ 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, который загружен. Я уверен, что это не относится ко всем, но для меня это сработало.

Надеюсь, это помогло. Удачного кодирования! : 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: []
}

Просто удалите файл fav.ico в разделе src / и добавьте его. Фавикон будет добавлен до запуска приложения

<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"
    ],

НАКОНЕЦ ..

• В структуре папок вашего проекта, файл favicon.ico находится внутри src ex: (C: \ Dev \ EPS \ src). Вам НЕ нужно иметь его в папке с активами, поскольку вы не ссылаетесь на него.

• Убедитесь, что ваша иконка не повреждена (ваша иконка должна быть читаемой, если смотреть через проводник окон, так же как и иконку не битого окна)

• должен быть размером 32 x 32

Убедитесь, что при использовании значка изображения это не манипулируемое расширение, например, если вы загружаете pngизображение, а затем вручную изменяете его расширение pngнаicon . В этом случае ваше изображение будет повреждено. И браузер не понимает.

Я сделал эту ошибку, но после использования оригинального изображения значка его начала работать.

1. Проверьте тэг ссылки в файле index.html, чтобы он выглядел следующим образом.

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

2. Проверьте имя файла favicon.ico в каталоге / src.

3.Rerun Angular с подачей и обновлением приложения.

4.Если он не отображается (или что-то похожее на буфер старого файла favicon.ico). попробуйте обновить путь favicon еще раз, чтобы загрузить файл favicon.ico (например, refresh yourdomain.com/favicon.ico)

У меня такая же проблема.

Если вы используете Mac, вам нужно очистить кэш ( Option+ ⌘+ E) и перезагрузить страницу в дополнение к перезапуску приложения (и, конечно, изменению пути в index.html).

1. Удалите свой существующий favicon.ico
2. Добавьте новый значок в папку src с именем «favico.ico».
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 в тот же каталог, что и favicon
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

То, что действительно работает для меня, было поместить мой favicon в папку активов и автоматически появиться в браузере.

1. изменить местоположение на папку ресурсов внутри папки src.
2. измените index.html вот так <link rel="icon" type="image/x-icon" href="assets/favicon.png">

Хорошо, здесь в 2020 году 9.1.12. Я не понимаю, почему именно этот процесс так сложен. Я следил почти за каждым постом выше, и ни один из них не работал для меня.

То, что ДЕЙСТВИТЕЛЬНО работало, было этим: Полное удаление ссылки favicon в 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, там есть иконка. Отображается на моем живом сервере тоже.

Удаление кеша favicon для chromes и перезапуск браузера на Mac работали для меня.

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

У меня возникла та же проблема, и я решил ее путем принудительного обновления описанным здесь способом :

Чтобы обновить значок сайта, вы можете заставить браузеры загружать новую версию, используя тег ссылки и строку запроса в вашем имени файла. Это особенно полезно в производственных средах, чтобы пользователи могли получать обновления.

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

Я исправил проблему, создав свой собственный файл .ico, создал папку ресурсов и поместил туда файл. Затем изменил ссылку href в Index.html