Як змінити кутовий фаворит CLI

Як я можу змінити фавікон за замовчуванням, встановлений Angular CLI?

Я спробував багато речей, але він завжди показує логотип Angular як фавікон, навіть якщо я видалив цей значок (favicon.ico у папці src). Це все ще показує, і я не знаю, звідки це завантажено.

Я замінив цю піктограму іншою піктограмою, але вона все ще показує кутовий логотип:

<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, якщо більше цього він не відображатиметься.

ПРИМІТКА. Це не буде працювати з кутом 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; Chrome: Ctrl+ R, або Ctrl+ F5, або Shift+ F5.

Mac
Safari: ⌘+ R; Firefox / Chrome: ⌘+ Shift+ R.

Навігація до файлу остаточно виправила це для мене. У моєму випадку: http: // localhost: 4200 / favicon.ico

Я намагався оновити, зупинити і запустити ng serveзнову, і "Порожній кеш і жорстке перезавантаження" жоден не спрацював.

Переконайтесь, що браузер завантажує нову версію фавікону і не використовує кешовану версію, ви можете додати фіктивний параметр до URL-адреси favicon:

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

ми можемо змінити кутовий значок CLI favicon. ми повинні помістити файл значків у папку "Активи" і дати цей шлях у 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, потім Favicons перезапустіть chrome (з панелі завдань, kill all instances).

У цій публікації є багато інших хороших пропозицій, якщо це не працює для вас.

Для кута 6 введіть favicon.pngрозмір 32x32у папку активів та змініть шлях у index.html. Тоді,

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

Створіть зображення значка з розширенням .ico та скопіюйте та замініть його файлом favicon за замовчуванням у папці 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у вікні браузера

ВІДПОВІДАТИ ФАВІКОН ДЛЯ будь-якого веб-проекту:

Клацніть правою кнопкою миші на фавікон і натисніть «Перезавантажити». Працює кожен раз.

Для майбутніх читачів, якщо це трапиться з вами, ваш веб-переглядач хоче використовувати старий кешований фавікон.

Виконайте такі дії:

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

Виправлено.

Щоб змінити піктограму програми, виконайте наведені нижче дії.

1. Додайте файл .ico у проект.
2. Перейдіть на angular.json, і в цьому "проектах" -> "архітектор" -> "скласти" -> "параметри" -> "активи" і тут введіть запис для вашого файла значків. Зверніться до наявного запису favicon.ico, щоб знати, як це зробити.

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

4. Перезавантажте сервер.

5. Веб-переглядач із оновленням, і ви готові йти.

Я трохи погрався з цим. Виявляється, фавікон очевидно обробляється модулем вузла, який називається @scematics (принаймні, в Angular5).

Ви можете змінити свій фавікон у цій папці:

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

У цій папці має бути favicon.ico, саме такий завантажений. Я досить shure це не стосується всіх, але це склалося для мене.

Сподіваюся, що це допомогло. Щасливого кодування! : 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 (наприклад, оновіть 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

Що для мене справді працює, це введення мого фавікону в папку активів і автоматично з’являтися у браузері.

1. змінити розташування на папку активів у папці src.
2. змінити index.html, як це <link rel="icon" type="image/x-icon" href="assets/favicon.png">

Гаразд, ось у 2020 році 9.1.12. Я не розумію, чому саме цей процес такий складний. Я дотримувався майже кожного повідомлення вище, і жоден з них не працював на мене.

Що таке DID робота: Це повністю видалення посилання на 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, фавікон є. Відображається і на моєму прямому сервері.

Для мене працювали видалення Chrome cavic favicon і перезапуск браузера на 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