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

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

.html:

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

угловой-cli.json:

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

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

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

переход к файлу, наконец, исправил это для меня. В моем случае: http://localhost:4200/favicon.ico

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

Так как вы заменили favicon.ico файл физически, где-то должна быть проблема с кэшированием. В вашем браузере есть кэш. Заставьте его покраснеть, нажав Ctrl+F5.

если значок по умолчанию все еще отображается, попробуйте другой браузер с чистым кэшем (т. е. вы еще не посетили страницу с этим браузером).

Очистить Кэш Ярлыков: (источник)

Windows
Т. е.:Ctrl+R; Firefox:Ctrl+ Shift+R; Chrome:Ctrl+R или Ctrl+F5 или Shift+F5.

Mac
Сафари:⌘+R; Firefox / Chrome:⌘+ Shift+R.

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

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

Я тоже боролся с этим, думая, что я делаю что-то не так с Angular, но моя проблема закончилась тем, что Chrome кэшировал значок. Стандартный "пустой кэш и жесткая перезагрузка" или перезапуск браузера не работали для меня, но этот пост указал мне в правильном направлении.

это специально работало для меня:

Если на windows и с помощью chrome,(exit chrome from taskbar), а затем перейти к C:\Users\your_username\AppData\Local\Google\Chrome\User Data\Default и удалить файлы Favicons-journal, Фавиконка заново запустить хром (от панели задач kill all instances).

есть много других хороших предложений в этом посте, если это не сработает для вас.

мы можем изменить угловой значок CLI favicon. мы должны поместить файл значка в папку" активы " и дать этот путь в индексе.формат html.

<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png"> Это работа для меня.

пресс Ctrl+F5 в окне браузера

переместить фавикон.ico к вашим активам, а затем в папку img, а после этого только измените тег ссылки на значок в заголовке. Это помогает мне, когда фавикон не отображается вообще.

для будущих читателей, если это произойдет с вами, ваш браузер хочет использовать старый кэшированный фавикон.

выполните следующие действия:

1. удерживайте CTRL и нажмите кнопку "Обновить" в вашем браузере.
2. удерживайте Shift и нажмите кнопку "Обновить" в вашем браузере.

исправлено.

ЧТОБЫ ПЕРЕЗАГРУЗИТЬ FAVICON ДЛЯ ЛЮБОГО ВЕБ-ПРОЕКТА:

щелкните правой кнопкой мыши на favicon и нажмите кнопку "Перезагрузить". Работает каждый раз.

Я играл с этим некоторое время. Оказывается, что фавикон, по-видимому, обрабатывается узловым модулем под названием @scematics (по крайней мере, в Angular5).

вы можете изменить свой фавикон в этой папке:

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

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

надеюсь, что это помогло. Счастливого кодирования! : D

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

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

1.Проверьте свой тег ссылки на индекс.html-файл, который должен выглядеть так.

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

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

3.Повторите угловой с ng служить и обновить приложение.

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

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

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

1. удалите существующий значок.ico
2. Добавить новый значок в папку src с именем " favico.ico"
3. очистить кэш в вашем браузере.

значок не отражает только из-за вашего кэша браузера. Иногда попробуйте перезапустить приложение

следующие шаги работал для меня.

1. удалить по умолчанию " favicon.ICO "файл с новым именем с другим именем т. е." _favicon.МБО" в моем случае.

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

2. обновить индекс.html с новым тегом link, т. е.

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

3. обновление .угловой-кли.json с новым именем значка т. е. "_фавикон.ico".

4. построить и запустить приложение, и сделать жесткий обновить Ctrl+F5.

Так же просто и легко, как :

1. добавить значок или png в том же каталоге, что и favicon
2. правка .угловой-кли.json, в активах удалить favicon.ico поставить ваш на место
3. индекс редактирование.html, поиск favicon и поставить ваш на место
4. запустите ng служить снова

Что сделано

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

"assets": [

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

  ],

это сработало для меня.

в моем случае проблема заключалась в том, что у меня были разные размеры по сравнению с обычным. У меня было 48x48 px, тогда как он ожидал 32x32 px и мое расширение было png, поэтому мне пришлось изменить его на 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: []
}

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

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

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

что действительно работает для меня, это поместить мой фавикон в папку assets и автоматически появиться в браузере.

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

я попробовал многие из этих решений, но безуспешно. Тот, который работал для моего приложения angular 5, был ниже:

.формат html: Закомментируйте свой тег ссылки

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

.угловой-кли.формат JSON: оставьте тип элемента как ".ico"

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

и наконец..

• в структуре папок вашего проекта есть значок.ico внутри src ex: (C:\Dev\EPS\src). Вам не нужно иметь его в папке активов, так как вы не являетесь ссылаясь на него.

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

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

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

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

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

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

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

я исправил проблему, создав свой собственный .ICO файл и создал папку assets и поместить файл туда. Затем изменил ссылку href в индексе.HTML-код