Açısal CLI favicon nasıl değiştirilir

Açısal CLI tarafından ayarlanan varsayılan faviconu nasıl değiştirebilirim?

Birçok şeyi denedim, ancak bu simgeyi (src klasöründeki favicon.ico) silmiş olsam bile, her zaman açısal logoyu favicon olarak gösterir. Hala gösteriyor ve nereden yüklendiğini bilmiyorum.

Bu simgeyi başka bir simgeyle değiştirdim, ancak yine de Açısal logosunu gösteriyor:

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

Aynı ada ( favicon.png) sahip bir png resmi oluşturun ve bu dosyalarda adı değiştirin:

index.html:

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

angular-cli.json:

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

Ve açısal varsayılan simgeyi bir daha asla görmeyeceksiniz.

Boyut 32x32 olmalıdır, bundan daha fazlası gösterilmez.

NOT: Bu, Açısal 9 ile çalışmaz

Açısal 9 için varlıkların içine favicon koymanız ve

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

favicon.icoDosyayı fiziksel olarak değiştirdiğiniz için , bir yerde önbellek sorunu olması gerekir. Tarayıcınızda bir önbellek var. Ctrl+ Tuşuna basarak kızarmaya zorlayın F5.

Varsayılan simge hala görüntüleniyorsa, temiz bir önbelleğe sahip başka bir tarayıcı deneyin (yani sayfayı o tarayıcıyla henüz ziyaret etmediniz).

Önbellek Kısayollarını Temizle: ( Kaynak )

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

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

Dosyaya gitmek nihayet bunu benim için düzeltti. Benim durumumda: http: // localhost: 4200 / favicon.ico

Yenilemeyi, durdurmayı ve ng serveyeniden başlatmayı denedim ve "Önbelleği ve Sabit Yeniden Yükleme", hiçbiri işe yaramadı.

Tarayıcının favicon'un yeni bir sürümünü indirdiğinden ve önbelleğe alınmış bir sürüm kullanmadığından emin olmak için favicon url'sine sahte bir parametre ekleyebilirsiniz:

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

açısal CLI favicon simgesini değiştirebiliriz. simge dosyasını "varlıklar" klasörüne koymalıyız ve bu yolu index.html dosyasına vermeliyiz.

<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png"> Benim için iş.

Ben de bununla mücadele ediyordum, Angular ile yanlış bir şey yaptığımı düşünüyordum, ancak sorunum Chrome'un simgeyi önbelleğe almasıydı. Standart "Boş Önbellek ve Sabit Yeniden Yükleme" veya tarayıcıyı yeniden başlatma benim için çalışmadı, ancak bu yazı beni doğru yönde gösterdi.

Bu özellikle benim için çalıştı:

Windows'da ve chrome kullanıyorsanız (exit chrome from taskbar), ardından C:\Users\your_username\AppData\Local\Google\Chrome\User Data\Default Favicons-journal, Favicons dosyalarını (görev çubuğundan kill all instances) yeniden başlatın .

Bu yazı sizin için işe yaramıyorsa, bu yayında başka birçok iyi öneri var.

Açısal 6 için, varlık klasörüne favicon.pngboyut koyun 32x32ve içindeki yolu değiştirin index.html. Sonra,

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

.İco uzantılı bir simge resmi oluşturun ve kopyalayıp src klasöründeki varsayılan favicon dosyasıyla değiştirin.

index.html:

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

angular.json:

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

Favicon.ico öğesini varlıklarınıza ve ardından img klasörüne taşıyın ve bundan sonra yalnızca başlıktaki simge bağlantı etiketinizi değiştirin. Favicon hiç gösterilmediğinde bana yardımcı olur.

Tarayıcı penceresinde Ctrl+ tuşuna basınF5

HERHANGİ BİR WEB PROJESİ İÇİN FAVICON'U YENİDEN YAPMAK İÇİN:

Favicon'a sağ tıklayın ve 'yeniden yükle'ye tıklayın. Her zaman çalışır.

Gelecekteki okuyucular için, bu size olursa, tarayıcınız eski önbelleğe alınmış favicon'u kullanmak istiyor.

Bu adımları takip et:

1. CTRL tuşunu basılı tutun ve tarayıcınızdaki "Yenile" düğmesini tıklayın.
2. Shift tuşunu basılı tutun ve tarayıcınızdaki "Yenile" düğmesini tıklayın.

Sabit.

Uygulama simgesini değiştirmek için lütfen aşağıdaki adımları izleyin:

1. .İco dosyanızı projeye ekleyin.
2. Angular.json adresine gidin ve o "projeler" -> "mimar" -> "yapı" -> "seçenekler" -> "varlıklar" a gidin ve burada simge dosyanız için bir giriş yapın. Nasıl yapılacağını öğrenmek için mevcut favicon.ico girişine bakın.

3. İndex.html dosyasına gidin ve simge dosyasının yolunu güncelleyin. Örneğin,

4. Sunucuyu yeniden başlatın.

5. Sert yenileme tarayıcı ve gitmek için iyidir.

Bir süre bununla oynuyordum. Favicon'un görünüşe göre @scematics adlı bir düğüm modülü tarafından ele alındığı anlaşılıyor (en azından Angular5'te).

Favicon'unuzu şu klasörde değiştirebilirsiniz:

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

Bu klasörde yüklü olan bir favicon.ico olmalıdır. Im shure this herkes için geçerli değil ama benim için çalıştı.

Umarım bu yardımcı olmuştur. Mutlu kodlama! : D

Dinamik olarak eklenen bir favicon ihtiyacı olanlar için burada bir uygulama başlatıcısı ile yaptığım şey:

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

Sadece src / altındaki fav.ico dosyasını kaldırın ve ekleyin. Favicon uygulama başlamadan önce eklenecek

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

Simgenizin kaynağını ekleyin ve uygulamayı yeniden başlatın.

Bu çözümlerin çoğunu denedim ama başarısız oldu. Açısal 5 başvurum için çalışan biri aşağıdaydı:

index.html: Bağlantı etiketinizi yorumlayın

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

.angular-cli.json: öğe türünü ".ico" olarak bırakın

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

Son olarak ..

• Proje klasörü yapınızda, favicon.ico dosyasını src ex: (C: \ Dev \ EPS \ src) içine alın. Referans vermediğiniz için varlık klasörünüzde olması GEREKMEZ.

• Simgenizin bozuk olmadığından emin olun (Pencere gezgini üzerinden görüntülendiğinde simgenizin okunabilir olması gerekir, diğer bir deyişle kırık pencere simgesi yoktur)

• 32 x 32 boyut olmalıdır

Simge görüntüsünü kullandığınızda, pnggörüntüyü indirip uzantısını manuel pngolarakicon . Bu durumda, resminiz bozulur. Ve tarayıcı anlamıyor.

Bu hatayı yaptım, ancak orijinal simge görüntüsünü kullandıktan sonra çalışmaya başlıyor.

1. index.html dosyasındaki bağlantı etiketinizi şöyle görünmesi için kontrol edin.

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

2. / src dizinindeki favicon.ico dosya adını kontrol edin.

Açma ve yenileme uygulamasını kullanarak Açısal'ı tekrar çalıştırın.

Göstermezse (veya eski favicon.ico dosyasını arabelleğe alır gibi görünüyorsa). favicon.ico dosyasını yüklemek için favicon yolunu tekrar yenilemeyi deneyin (örn. refresh yourdomain.com/favicon.ico)

Ben de aynı problemi yaşadım.

Mac kullanıyorsanız , uygulamayı yeniden başlatmanın yanı sıra Önbelleği ( Option+ ⌘+ E) boşaltmanız ve sayfayı yeniden yüklemeniz (ve elbette index.html'deki yolu değiştirmeniz gerekir).

1. Mevcut favicon.ico'nuzu kaldırın
2. Src klasörüne "favico.ico" adıyla yeni simge ekleyin
3. Tarayıcınızda Önbelleği temizleyin.

Simge yalnızca tarayıcı önbelleğiniz nedeniyle yansıtılmaz. Bazen uygulamayı yeniden başlatmayı deneyin

Aşağıdaki adımlar benim için çalıştı.

1. Benim durumumda varsayılan "favicon.ico" dosyasını farklı bir adla yani "_favicon.ico" adıyla kaldırın.

   Not :: Tarayıcınızda önbelleğe alındığı ve yeni simgenin üzerine yazmak zor olduğu için varsayılan adı saklamayın.

2. İndex.html dosyasını yeni bağlantı etiketi ile güncelleyin yani

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

3. .Angular-cli.json dosyasını yeni simge adıyla güncelleyin: "_favicon.ico".

4. Uygulamanızı oluşturun ve başlatın ve sert bir yenileme Ctrl+ yapın F5.

kadar basit ve kolay:

1. simgenizi veya png'nizi favicon ile aynı dizine ekleyin
2. düzenlemek .angular-cli.json, varlıklarda kaldır favicon.ico
3. index.html dosyasını düzenleyin, favicon'da arama yapın ve kendinizinkini yerine koyun
4. tekrar hizmet vermek

bitti

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

"assets": [

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

  ],

bu benim için çalıştı.

Benim durumumda sorun, normal olandan farklı boyutlara sahip olmamdı. Ben 48x48 pxbekliyordum vardı 32x32 pxve benim uzantısı png idi, bu yüzden değiştirmek zorunda kaldımico

Benim için gerçekten işe yarayan şey, favicon'umu varlıklar klasörüne koymak ve otomatik olarak tarayıcıda görünmekti.

1. konumu src klasörü içindeki varlıklar klasörüne değiştir.
2. index.html'i böyle değiştirin <link rel="icon" type="image/x-icon" href="assets/favicon.png">

Tamam, burada 2020'de 9.1.12'de. Bu sürecin neden bu kadar zor olduğunu anlamıyorum. Hemen hemen her yazıyı takip ettim ve hiçbiri benim için çalışmadı.

Ne DID çalışması şuydu: index.html'deki favicon referansını tamamen kaldırmak. Tamamen karşı sezgisel ama işe yarıyor. assetsKlasöre koymanız gerekmez . Tüm bunları denedim ama maalesef bu önerilerin hiçbiri işe yaramadı.

index.html

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

angular.json

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

ve ng build --prodkoştuğumda favicon orada. Canlı sunucumda da görüntülenir.

Krom favicon önbelleğini silmek ve tarayıcıyı mac'ta yeniden başlatmak benim için çalıştı.

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

Aynı sorunu vardı ve burada açıklanan yöntemle refreshby zorlayarak çözdü :

Sitenizin favicon'unu yenilemek için, bağlantı etiketini ve dosya adınızdaki bir sorgu dizesini kullanarak tarayıcıları yeni bir sürüm indirmeye zorlayabilirsiniz. Bu, özellikle kullanıcılarınızın güncellemeyi aldığından emin olmak için üretim ortamlarında yardımcı olur.

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

Kendi .ico dosyamı oluşturarak sorunu çözdüm ve bir varlık klasörü oluşturdum ve dosyayı oraya koydum. Sonra Index.html bağlantı href değiştirildi