Как изменить Angular CLI favicon

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

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

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

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

Ответы

Ответ 1

Я также сталкиваюсь с этой проблемой, а затем попробую

1) Перезапустите приложение, если все еще не изменилось

2) Перезапустите систему (я не знаю, что это лучший способ или нет, но это работает для меня)

Ответ 2

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

index.html:

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

angular-cli.json:

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

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

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

Ответ 3

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

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

Ярлыки очистки кэша: (Источник)

Windows
IE: Ctrl + R; Firefox: Ctrl + Shift + R; Хром: Ctrl + R или Ctrl + F5, или Shift + F5.

макинтош
Сафари: ⌘ + R; Firefox/Chrome: ⌘ + Shift + R.

Ответ 4

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

Я попытался обновить, остановить и запустить ng serve снова, и "Empty Cache and Hard Reload", ни один не работал.

Ответ 5

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

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

Ответ 6

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

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

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

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

Ответ 7

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

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

Ответ 8

Для Angular 6 поместите favicon.png размером 32x32 в папку ресурсов и измените путь в index.html. Затем,

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

Ответ 9

Нажмите Ctrl + F5 в окне браузера

Ответ 10

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

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

Ответ 11

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

Ответ 12

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

Следуй этим шагам:

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

Исправлена.

Ответ 13

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

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

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

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

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

Ответ 14

Пожалуйста, следуйте приведенным ниже инструкциям, чтобы изменить значок приложения:

  1. Добавьте ваш .ico файл в проект.
  2. Перейдите в angular.json и в этом "projects" → "architect" → "build" → "options" → "assets" и здесь сделайте запись для вашего файла значка. Обратитесь к существующей записи favicon.ico, чтобы узнать, как это сделать.

  3. Перейдите в index.html и обновите путь к файлу значка. Например,

  4. Перезагрузите сервер.

  5. Хард обновил браузер и все готово.

Ответ 15

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

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

Ответ 16

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

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

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

3.Rerun Angular с помощью приложения ng и обновления.

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

Ответ 17

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

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

Ответ 18

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

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

Ответ 19

Следующие шаги спомогли мне.

  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.

Ответ 20

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

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

что сделано

Ответ 21

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

"assets": [

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

  ],

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

Ответ 22

В моем случае проблема заключалась в том, что у меня были разные размеры по сравнению с обычным. У меня было 48x48 px тогда как ожидалось 32x32 px и мое расширение было png, поэтому мне пришлось изменить его на ico

Ответ 23

Для тех, кому нужен динамически добавленный значок, вот что я сделал с инициализатором приложения:

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

Ответ 24

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

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

Ответ 25

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

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

Ответ 26

Я пробовал многие из этих решений, но безуспешно. Тот, который работал для моего углового 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 внутри exr: (C:\Dev\EPS\src). Вам НЕ нужно иметь его в папке с активами, поскольку вы не ссылаетесь на него.

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

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

Ответ 27

Создайте изображение значка с расширением .ico, скопируйте и замените его файлом значка по умолчанию в папке src.

index.html:

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

angular.json:

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

Ответ 28

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

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

Ответ 29

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

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

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

Ответ 30

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