Cara mengubah favicon CLI Angular

Bagaimana cara mengubah favicon default yang ditetapkan oleh CLI Angular?

Saya sudah mencoba banyak hal, tetapi selalu menampilkan logo Angular sebagai favicon, padahal saya sudah menghapus ikon itu (favicon.ico di folder src). Itu masih terlihat, dan saya tidak tahu dari mana itu dimuat.

Saya telah mengganti ikon itu dengan ikon lain, tetapi masih menampilkan logo Angular:

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

Buat gambar png dengan nama yang sama ( favicon.png) dan ubah nama di file ini:

index.html:

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

angular-cli.json:

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

Dan Anda tidak akan pernah melihat ikon default bersudut lagi.

Ukuran harus 32x32, jika lebih dari ini maka tidak akan ditampilkan.

CATATAN: Ini tidak akan berfungsi dengan Angular 9

Untuk angular 9 Anda harus meletakkan favicon di dalam aset lalu beri path like

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

Karena Anda telah mengganti favicon.icofile secara fisik, pasti ada masalah cache di suatu tempat. Ada cache di browser Anda. Paksa untuk memerah dengan menekan Ctrl+F5 .

Jika ikon default masih ditampilkan, coba browser lain dengan cache bersih (misalnya, Anda belum mengunjungi halaman dengan browser itu).

Hapus Pintasan Cache: ( Sumber )

Windows
IE: Ctrl+ R; Firefox: Ctrl+ Shift+ R; Chrome: Ctrl+ R, atau Ctrl+ F5, atau Shift+F5 .

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

Menavigasi ke file akhirnya memperbaiki ini untuk saya. Dalam kasus saya: http: // localhost: 4200 / favicon.ico

Saya telah mencoba menyegarkan, berhenti dan memulai ng servelagi, dan "Empty Cache dan Hard Reload", tidak ada yang berhasil.

Untuk memastikan browser mengunduh versi baru favicon dan tidak menggunakan versi yang disimpan dalam cache, Anda dapat menambahkan parameter tiruan ke url favicon:

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

kita dapat mengubah ikon favicon CLI sudut. kita harus meletakkan file icon di folder "assets" dan memberikan path itu ke index.html.

<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png"> Ini bekerja untuk saya.

Saya berjuang dengan ini juga, mengira saya melakukan sesuatu yang salah dengan Angular, tetapi masalah saya akhirnya adalah Chrome menyimpan ikonnya. Standar "Empty Cache dan Hard Reload" atau memulai ulang browser tidak berfungsi untuk saya, tetapi posting ini mengarahkan saya ke arah yang benar.

Ini secara khusus bekerja untuk saya:

Jika di windows dan menggunakan chrome, (exit chrome from taskbar) buka C:\Users\your_username\AppData\Local\Google\Chrome\User Data\Default dan hapus file Favicons-journal, Favicons lalu jalankan kembali chrome (dari taskbar, kill all instances).

Ada banyak saran bagus lainnya di posting itu jika ini tidak berhasil untuk Anda.

Untuk Angular 6, masukkan favicon.pngukuran 32x32di folder aset dan ubah jalur masuk index.html. Kemudian,

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

Buat gambar icon dengan ekstensi .ico dan copy dan ganti dengan file favicon default di folder src.

index.html:

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

angular.json:

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

Pindahkan favicon.ico ke aset Anda dan kemudian ke folder img, dan setelah itu hanya ubah tag tautan ikon Anda di header. Ini membantu saya ketika favicon tidak ditampilkan sama sekali.

UNTUK MENGGANTI FAVICON UNTUK PROYEK WEB:

Klik kanan pada favicon dan klik 'muat ulang'. Bekerja setiap saat.

Tekan Ctrl+ F5di jendela browser

Untuk pembaca selanjutnya, jika ini terjadi pada Anda, browser Anda ingin menggunakan favicon lama yang disimpan dalam cache.

Ikuti langkah ini:

1. Tahan CTRL dan klik tombol "Refresh" di browser Anda.
2. Tahan Shift dan klik tombol "Segarkan" di browser Anda.

Tetap.

Ikuti langkah-langkah di bawah ini untuk mengubah ikon aplikasi:

1. Tambahkan file .ico Anda di proyek.
2. Pergi ke angular.json dan di "proyek" -> "arsitek" -> "membangun" -> "opsi" -> "aset" dan di sini buat entri untuk file ikon Anda. Lihat entri favicon.ico yang sudah ada untuk mengetahui cara melakukannya.

3. Buka index.html dan perbarui jalur file ikon. Sebagai contoh,

4. Mulai ulang server.

5. Segarkan browser dan Anda siap menggunakannya.

Saya bermain-main dengan ini sebentar. Ternyata favicon tersebut ditangani oleh modul node yang disebut @scematics (setidaknya di Angular5).

Anda dapat mengubah favicon Anda di folder ini:

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

Di folder itu harus ada favicon.ico, itulah yang dimuat. Saya cukup yakin ini tidak berlaku untuk semua orang tetapi itu berhasil bagi saya.

Semoga ini bisa membantu. Selamat membuat kode! : D

Bagi mereka yang membutuhkan favicon yang ditambahkan secara dinamis, inilah yang saya lakukan dengan penginisialisasi aplikasi:

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: []
}

Hapus saja file fav.ico di bawah src / dan tambahkan ini. Favicon akan ditambahkan sebelum aplikasi dimulai

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

Tambahkan sumber ikon Anda dan mulai ulang aplikasi itu akan berubah.

Saya mencoba banyak solusi ini tetapi tidak berhasil. Yang bekerja untuk aplikasi angular 5 saya adalah di bawah ini:

index.html: Komentari tag tautan Anda

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

.angular-cli.json: biarkan tipe item sebagai ".ico"

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

AKHIRNYA..

• Dalam struktur folder proyek Anda, masukkan favicon.ico di dalam src ex: (C: \ Dev \ EPS \ src). Anda TIDAK perlu menyimpannya di folder aset karena Anda tidak mereferensikannya.

• Pastikan ikon Anda tidak rusak (Ikon Anda harus dapat dibaca jika dilihat melalui window explorer alias tidak ada ikon jendela rusak)

• harus berdimensi 32 x 32

Oke, di sini di 2020 di 9.1.12. Saya tidak mengerti mengapa sebenarnya proses ini begitu sulit. Saya mengikuti hampir semua postingan di atas dan tidak ada yang berhasil untuk saya.

Pekerjaan DID adalah ini: Menghapus total referensi favicon di index.html. Ini benar-benar berlawanan dengan intuisi tetapi berhasil. Anda TIDAK perlu memasukkannya ke dalam assetsfolder. Saya mencoba semua itu tetapi sayangnya tidak ada saran yang berhasil.

index.html

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

angular.json

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

dan saat saya lari ng build --prod, favicon ada di sana. Ditampilkan di server langsung saya juga.

Pastikan ketika Anda menggunakan gambar ikon itu bukan ekstensi yang dimanipulasi, seperti jika Anda mengunduh pnggambar dan kemudian secara manual mengubah ekstensi dari pngmenjadiicon . Dalam kasus ini, gambar Anda akan rusak. Dan browser tidak mengerti.

Saya melakukan kesalahan ini, tetapi setelah menggunakan gambar ikon asli itu mulai berfungsi.

1. Periksa tag link Anda pada file index.html yang seharusnya terlihat seperti ini.

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

2. Periksa nama file favicon.ico di direktori / src.

3. Jalankan ulang Angular dengan ng serve dan refresh aplikasi.

4. Jika tidak muncul (atau sepertinya buffering file favicon.ico lama). coba segarkan jalur favicon lagi untuk memuat file favicon.ico (mis. segarkan domainanda.com/favicon.ico)

Saya memiliki masalah yang sama.

Jika Anda menggunakan Mac, Anda perlu mengosongkan Cache ( Option+ ⌘+ E) dan memuat ulang halaman selain memulai ulang aplikasi (dan tentu saja mengubah jalur di index.html).

1. Hapus favicon.ico Anda yang sudah ada
2. Tambahkan ikon baru ke dalam folder src dengan nama "favico.ico"
3. Hapus Cache di browser Anda.

Ikon tidak mencerminkan hanya karena cache browser Anda. Terkadang coba restart aplikasi

Langkah-langkah berikut berhasil untuk saya.

1. Hapus file default "favicon.ico" dengan yang baru dengan nama berbeda, misalnya "_favicon.ico" dalam kasus saya.

   Catatan :: Jangan simpan nama default, karena itu bisa di-cache di browser Anda dan sulit untuk ditimpa dengan ikon baru.

2. Perbarui index.html dengan tag tautan baru yaitu

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

3. Perbarui .angular-cli.json dengan nama ikon baru yaitu "_favicon.ico".

4. Bangun & luncurkan aplikasi Anda, dan lakukan segarkan Ctrl+ F5.

sesederhana dan semudah:

1. tambahkan ikon atau png Anda di direktori yang sama dengan favicon
2. edit .angular-cli.json, di aset, hapus favicon.ico, letakkan milik Anda di tempatnya
3. edit index.html, cari favicon dan tempatkan milik Anda
4. menjalankan servis lagi

itu selesai

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

"assets": [

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

  ],

ini berhasil untuk saya.

Dalam kasus saya, masalahnya adalah saya memiliki dimensi yang berbeda dengan dimensi normal. Saya memiliki 48x48 pxapa yang diharapkan 32x32 pxdan ekstensi saya png jadi saya harus mengubahnya menjadiico

Yang benar-benar berhasil bagi saya adalah meletakkan favicon saya ke dalam folder aset dan muncul secara otomatis di browser.

1. ubah lokasi ke folder aset di dalam folder src.
2. ubah index.html seperti ini <link rel="icon" type="image/x-icon" href="assets/favicon.png">

Editor (dalam kasus saya IDEA 2020.2) terkadang dapat menambahkan src/awalan ke lokasi ikon di href. maksudku

 <link rel="icon" ... href="src/favicon.ico">

dari pada

  <link rel="icon" ... href="favicon.ico">

Jadi dalam hal ini Anda harus menghapus src/bagian ini di href. Ini memecahkan masalah saya.

Menghapus cache favicon chromes dan memulai ulang browser di mac berhasil untuk saya.

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

Saya memiliki masalah yang sama, dan menyelesaikannya dengan memaksa penyegaran dengan metode yang dijelaskan di sini :

Untuk menyegarkan favicon situs Anda, Anda dapat memaksa browser untuk mengunduh versi baru menggunakan tag tautan dan string kueri pada nama file Anda. Ini sangat membantu dalam lingkungan produksi untuk memastikan pengguna Anda mendapatkan update.

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