कोणीय सीएलआई फ़ेविकॉन कैसे बदलें

140

मैं एंगुलर सीएलआई द्वारा निर्धारित डिफ़ॉल्ट फ़ेविकॉन को कैसे बदल सकता हूं?

मैंने कई चीजों की कोशिश की है, लेकिन यह हमेशा कोणीय लोगो को फेविकॉन के रूप में दिखाता है, भले ही मैंने उस आइकन (src फ़ोल्डर में favicon.ico) को हटा दिया हो। यह अभी भी दिखाता है, और मुझे नहीं पता कि यह कहाँ से लोड किया गया है।

मैंने उस आइकन को दूसरे आइकन से बदल दिया है, लेकिन यह अभी भी कोणीय लोगो दिखाता है:

<link rel="icon" type="image/x-icon" href="favicon.ico">
angular-cli 
— chrisly
स्रोत
3
— फेविकॉन
विभिन्न पोर्ट के साथ रनिंग ऐप समस्या का समाधान करता है। उदाहरण:ng s --port 4201
— सज्जाद
मैं एक ही मुद्दा रहा हूँ। मेरे मामले में स्थानीय रूप से सब कुछ अच्छा है, लेकिन जब मैं सर्वर पर तैनात होता हूं तो मुझे 500 आंतरिक सर्वर त्रुटि मिलती है ...
— Ziggler
मैंने सभी उत्तर पढ़े जिससे मुझे थोड़ी मदद मिली लेकिन ईमानदारी से कि इतनी बुनियादी ज़रूरत के लिए इतना जटिल नहीं होना चाहिए: बस छवि को कॉपी करने का एक रास्ता, फिर संभवतः एक कॉन्फ़िगर फ़ाइल, फिर पुनरारंभ। "ताज़ा" उत्तर मदद नहीं कर रहा है।
— pdem
एक फ़ेविकॉन एक स्थिर फ़ाइल है जिसे विशेष रूप से angular.json में कॉन्फ़िगर किया गया है, बस डिफ़ॉल्ट करें और यहां देखें कि यह कैसे काम करता है: stackoverflow.com/questions/40424907/…
— pdem

जवाबों:

159

उसी नाम से एक png छवि बनाएं ( favicon.png) और इन फ़ाइलों में नाम बदलें:

index.html:

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

angular-cli.json:

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

और आपको कोणीय डिफ़ॉल्ट आइकन फिर कभी नहीं दिखाई देगा।

आकार 32x32 होना चाहिए, अगर इससे अधिक यह प्रदर्शित नहीं होगा।

नोट: यह कोणीय 9 के साथ काम नहीं करेगा

कोणीय 9 के लिए आपको परिसंपत्तियों के अंदर फ़ेविकॉन रखना होगा फिर रास्ता देना होगा

<link rel="icon" type="image/x-icon" href="assets/favicon.png">
स्निपेट का विस्तार करें

— सुखवीर सिंह
स्रोत
2
शुक्रिया सुखवीर। यह पूरी तरह से काम करता है, यह सिर्फ angular-cli.jsonफ़ाइल में आइकन जोड़ने के बाद एप्लिकेशन को पुनरारंभ करना है ।
— अजय सिवान
1
यह स्वीकार किया जाना चाहिए जवाब! कुछ भी काम नहीं किया लेकिन यह चाल चली! शुक्रिया सुखवीर सिंह!
— जूनिया मोंटाना
मुझे पीएनजी का रास्ता भी बदलना पड़ा<link rel="icon" type="image/png" href="./favicon.png" />
— ड्यूड पास्कलॉ
1
कोणीय 9 चाल के लिए धन्यवाद
— शान्ति
56

चूंकि आपने favicon.icoफ़ाइल को भौतिक रूप से बदल दिया है , इसलिए कहीं न कहीं कैशिंग मुद्दा होना चाहिए। आपके ब्राउज़र में कैश है। इसे Ctrl+ दबाकर फ्लश करने के लिए मजबूर करें F5।

यदि डिफ़ॉल्ट आइकन अभी भी प्रदर्शित होता है, तो एक अन्य ब्राउज़र को क्लीन कैश के साथ आज़माएं (यानी आपने उस ब्राउज़र के साथ पृष्ठ पर अभी तक नहीं गए हैं)।

स्पष्ट कैश शॉर्टकट: ( स्रोत )

विंडोज
IE: Ctrl+ R; फ़ायरफ़ॉक्स: Ctrl+ Shift+ R; क्रोम: Ctrl+ R, या Ctrl+ F5, या Shift+ F5।

मैक
सफारी: ⌘+ R; फ़ायरफ़ॉक्स / क्रोम: ⌘+ Shift+ R।

— यूरी
स्रोत
1
धन्यवाद आदमी ने तुरंत काम किया - जीत के लिए CTRL F5 - अनुक्रमिक रूप में उसी dir में favicon के साथ Angular 6 के साथ काम किया और index.html में यह पंक्ति ... <लिंक rel = "आइकन" प्रकार = "छवि / x-icon" href = "favicon.ico">
— danday74
शॉर्टकट अद्भुत हैं!
— गेरार्डो
36

फ़ाइल पर नेविगेट करना आखिरकार मेरे लिए तय हो गया। मेरे मामले में: http: // localhost: 4200 / favicon.ico

मैंने ताज़ा करने, रोकने और फिर ng serveसे शुरू करने की कोशिश की थी , और "खाली कैश और हार्ड रीलोड", कोई भी काम नहीं किया।

— चौ en गुयेन
स्रोत
1
यही एकमात्र उत्तर है जिसने मेरे लिए काम किया। उसके लिए धन्यवाद!
— इवान
2
फ़ेविकॉन में नेविगेट करने के बाद, मैंने होम पेज को फिर से लोड किया और ctrl + f5 (क्रोम) - फिर मैंने काम किया। चीयर्स।
— ब्लूप्रिंट
1
मेरे लिए यही एकमात्र काम है। अविश्वसनीय!
— यानिव एलियाव
28

सुनिश्चित करें कि ब्राउज़र फ़ेविकॉन का एक नया संस्करण डाउनलोड करता है और कैश्ड संस्करण का उपयोग नहीं करता है आप फ़ेविकॉन यूआरएल में डमी पैरामीटर जोड़ सकते हैं:

<link rel="icon" type="image/x-icon" href="favicon.ico?any=param">
— टोबी
स्रोत
मेरे लिए काम किया धन्यवाद
— Venky559
धन्यवाद ...? कोई भी =
— कैच
यह केवल एक चीज है जो मेरे लिए काम करती है। नहीं ctrl + f5, और न ही अन्य सभी अनुमानों का जवाब है, यह वह चीज है जो काम कर रही है!
— सुरक्षित
14

हम कोणीय CLI फ़ेविकॉन आइकन बदल सकते हैं। हमें "संपत्ति" फ़ोल्डर में आइकन फ़ाइल डालनी होगी और उस पथ को index.html में देना होगा।

<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png"> यह मेरे लिए काम है।

— jaimin patel
स्रोत
हाँ, यहाँ मेरे लिए और कुछ नहीं काम किया, लेकिन संपत्ति फ़ोल्डर में इसे पूरी तरह से काम करना। चीयर्स।
— scohe001
10

मैं इस के साथ भी संघर्ष कर रहा था, सोच रहा था कि मैं कोणीय के साथ कुछ गलत कर रहा हूं, लेकिन मेरा मुद्दा क्रोम को आइकन को कैच करने से समाप्त हो गया। मानक "खाली कैश और हार्ड रीलोड" या ब्राउज़र को पुनरारंभ करना मेरे लिए काम नहीं कर रहा था, लेकिन इस पोस्ट ने मुझे सही दिशा में इंगित किया।

यह मेरे लिए विशेष रूप से काम करता है:

यदि विंडोज़ पर और क्रोम का उपयोग करते हुए, (exit chrome from taskbar) तो C:\Users\your_username\AppData\Local\Google\Chrome\User Data\Default फ़ेविकोंस-जर्नल, फ़ेविकोंस को हटाएं और फिर क्रोम (टास्कबार से kill all instances) को फिर से शुरू करें ।

उस पोस्ट में बहुत सारे अन्य अच्छे सुझाव हैं यदि यह आपके लिए काम नहीं करता है।

— Jdevince
स्रोत
1
यह किसी भी मौजूदा बुकमार्क किए गए पृष्ठों के लिए आइकन भी हटा देगा, जब तक आप अगले पृष्ठ पर नहीं जाते हैं। हालांकि यह मेरे लिए चाल चली गई।
— डेविड बी
9

कोणीय 6 के लिए, परिसंपत्ति फ़ोल्डर में favicon.pngआकार डालें 32x32और पथ को अंदर बदलें index.html। फिर,

<link rel="icon" type="image/x-icon" href="./assets/favicon.png">
— user1795667
स्रोत
वास्तव में: मुझे संपत्ति फ़ोल्डर में खदान डालकर index.html और angular.json फाइल में पथ बदलना पड़ा।
— जी। डेलिवेने
5

एक्सटेंशन .ico के साथ एक आइकन छवि बनाएं और इसे src फ़ोल्डर में डिफ़ॉल्ट फ़ेविकॉन फ़ाइल के साथ कॉपी और बदलें।

index.html:

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

angular.json:

**"assets": [
          "src/favicon.ico",
          "src/assets"
        ],**
— आथिल अहमद
स्रोत
जीवन रक्षक! thx
— koo9
4

Favicon.ico को अपनी संपत्ति में ले जाएं और फिर फ़ोल्डर को img करें, और उसके बाद केवल हेडर में अपना आइकन लिंक टैग बदलें। यह मेरी मदद करता है जब फ़ेविकॉन बिल्कुल भी प्रदर्शित नहीं किया गया था।

— KGROZA
स्रोत
क्रोम और फ़ायरफ़ॉक्स में, यह एक कैशिंग समस्या नहीं थी। मैंने अपनी ICO फ़ाइल, और Chrome और Firefox दोनों को तुरंत अपडेट कर दिया।
— स्टीव १२३५
मैंने अपनी favicon.ico फ़ाइल अपडेट की और यह लोड नहीं होगी। मैंने ऐसा किया (संपत्ति और अद्यतन लिंक पर स्थानांतरित) और ठीक काम किया।
— डेविड
4

ब्राउज़र विंडो में Ctrl+ दबाएंF5

— Andrey.Kostyuchenko
स्रोत
हाय एंड्री, अच्छा जवाब लेकिन आप यह समझाना चाहते हैं कि यह कैश को ताज़ा करता है, अन्यथा इसका सिर्फ एक "जादू" जवाब है।
— टॉम
1
यह उत्तर बिल्कुल यूरी के समान है (उत्तर 26 नवंबर 16 को 19:12 पर) बहुत उपयोगी व्याख्या करता है।
— 3
4

किसी भी वेब परियोजना के लिए फेलावोन का स्वागत करने के लिए:

फेविकॉन पर राइट क्लिक करें और load रीलोड ’पर क्लिक करें। हर बार काम करता है।

— ब्रायन बी
स्रोत
1
दीवार के खिलाफ मेरे सिर को पीटने के 20 मिनट के बाद, यह एकमात्र समाधान है जिसने काम किया। धन्यवाद!!
— २३:३१
2

भविष्य के पाठकों के लिए, यदि आपके साथ ऐसा होता है, तो आपका ब्राउज़र पुराने कैश्ड फ़ेविकॉन का उपयोग करना चाहता है।

इन कदमों का अनुसरण करें:

  1. CTRL दबाए रखें और अपने ब्राउज़र में "ताज़ा करें" बटन पर क्लिक करें।
  2. Shift दबाए रखें और अपने ब्राउज़र में "ताज़ा करें" बटन पर क्लिक करें।

फिक्स्ड।

— KeplerIO
स्रोत
2

ऐप आइकन बदलने के लिए कृपया नीचे दिए गए चरणों का पालन करें:

  1. प्रोजेक्ट में अपनी .ico फ़ाइल जोड़ें।
  2. कोणीय.जॉन पर जाएं और उस "प्रोजेक्ट्स" -> "आर्किटेक्ट" -> "बिल्ड" -> "विकल्प" -> "एसेट्स" में और यहां अपनी आइकन फाइल के लिए एक प्रविष्टि करें। यह कैसे करना है जानने के लिए favicon.ico की मौजूदा प्रविष्टि का संदर्भ लें।

  3. Index.html पर जाएं और आइकन फ़ाइल का पथ अपडेट करें। उदाहरण के लिए,

  4. सर्वर को पुनरारंभ करें।

  5. हार्ड रिफ्रेश ब्राउज़र और आप जाने के लिए अच्छे हैं।
— रुत शाह
स्रोत
1

मैं थोड़ी देर तक इसी के साथ खेलता रहा। पता चलता है कि फेविकॉन जाहिरा तौर पर @scematics नामक नोड मॉड्यूल (कम से कम Angular5) द्वारा नियंत्रित किया जाता है।

आप इस फ़ोल्डर में अपना फ़ेविकॉन बदल सकते हैं:

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

उस फ़ोल्डर में एक favicon.ico होना चाहिए, जो कि लोड किया गया है। Im सुंदर shure यह सब पर लागू नहीं होता है, लेकिन यह मेरे लिए काम करता है।

उम्मीद है कि इससे मदद मिली। हैप्पी कोडिंग! : डी

1

उन लोगों के लिए जो डायनेमिक रूप से जोड़े गए फ़ेविकॉन की आवश्यकता है, जो मैंने एक ऐप इनिशलाइज़र के साथ किया था:

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

बस src / के तहत fav.ico फ़ाइल निकालें और इसे जोड़ें। ऐप शुरू होने से पहले फ़ेविकॉन जोड़ा जाएगा

— डैनी फेन्स्टरमेकर
स्रोत
1 
<link rel="icon" type="image/x-icon" href="#">

अपने आइकन का स्रोत जोड़ें और पुनः आरंभ करें ऐप इसे बदल देगा।

— Adeel
स्रोत
1

मैंने इनमें से कई उपाय आजमाए लेकिन असफल रहा। मेरे कोणीय 5 अनुप्रयोग के लिए काम करने वाला नीचे था:

index.html: अपना लिंक टैग कमेंट करें

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

.angular-cli.json: आइटम प्रकार को ".ico" के रूप में छोड़ दें 

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

अंततः..

  • आपकी प्रोजेक्ट फ़ोल्डर संरचना में, src ex: (C: \ Dev \ EPS \ src) के अंदर favicon.ico है। जब से आप इसे संदर्भित नहीं कर रहे हैं, तो आपको इसे अपने परिसंपत्ति फ़ोल्डर में रखने की आवश्यकता नहीं है।

  • सुनिश्चित करें कि आपका आइकन टूटा हुआ नहीं है (विंडो आइकॉन उर्फ ​​नो ब्रेक विंडो आइकन के माध्यम से देखे जाने पर आपका आइकन पठनीय होना चाहिए)

  • 32 x 32 आयाम होना चाहिए
— मौरिजियो एल
स्रोत
0

सुनिश्चित करें कि जब आप आइकन छवि का उपयोग करते हैं, तो यह जोड़-तोड़ एक्सटेंशन नहीं है, जैसे कि यदि आप एक pngछवि डाउनलोड करते हैं और फिर मैन्युअल रूप से इसके एक्सटेंशन को बदल pngदेते हैं icon। इस स्थिति में, आपकी छवि दूषित हो जाएगी। और ब्राउज़र समझ में नहीं आता है।

मैंने यह गलती की, लेकिन मूल आइकन छवि का उपयोग करने के बाद इसकी शुरुआत हुई।

— पायल त्यागी
स्रोत
0

1. अपने लिंक टैग को index.html फ़ाइल पर देखें कि उसे इस तरह दिखना चाहिए।

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

2.Check फ़ाइल का नाम favicon.ico / src डायरेक्टरी में है।

3.Rerun कोणीय सेवा एनजी सेवा और ताज़ा आवेदन के साथ।

4.अगर यह नहीं दिखा (या कुछ ऐसा लगता है जैसे यह पुराने favicon.ico फ़ाइल बफर)। favicon.ico फ़ाइल लोड करने के लिए फ़ेविकॉन के पथ को फिर से ताज़ा करने का प्रयास करें (उदा। yourdomain.com/favicon.ico रिफ़र करें)

— dscanon
स्रोत
0

मुझे भी यही समस्या थी।

यदि आप एक मैक का उपयोग कर रहे हैं, तो आपको ऐप को पुनरारंभ करने के अलावा (और निश्चित रूप से index.html में पथ को बदलने) के अलावा पेज को खाली करने ( Option+ ⌘+ E) को फिर से लोड करना होगा।

— अलंग
स्रोत
0
  1. अपने मौजूदा favicon.ico को हटा दें
  2. "Favico.ico" नाम के साथ src फ़ोल्डर में नया आइकन जोड़ें
  3. अपने ब्राउज़र में कैश साफ़ करें।

आइकन केवल आपके ब्राउज़र कैश के कारण प्रतिबिंबित नहीं होता है। कभी-कभी एप्लिकेशन को पुनरारंभ करने का प्रयास करें

— श्री विवेक
स्रोत
0

निम्नलिखित चरणों ने मेरे लिए काम किया।

  1. डिफ़ॉल्ट "favicon.ico" फ़ाइल को अलग-अलग नाम के साथ एक नई फ़ाइल के साथ हटाएं, अर्थात "_favicon.ico" मेरे मामले में।

    नोट :: डिफ़ॉल्ट नाम न रखें, क्योंकि यह आपके ब्राउज़र में कैश हो गया है और नए आइकन के साथ ओवरराइट करना मुश्किल है।

  2. नए लिंक टैग के साथ index.html अपडेट करें

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

  3. अद्यतन करें। नया आइकन नाम "_favicon.ico" के साथ। Cli.json

  4. अपना ऐप बनाएं और लॉन्च करें, और हार्ड रिफ्रेश Ctrl+ करें F5।

— धीरेंद्र पांडे
स्रोत
0

जितना सरल और आसान है:

  1. फ़ेविकॉन के समान निर्देशिका में अपना आइकन या पीएनजी जोड़ें
  2. .angular-cli.json को संपादित करें, संपत्ति में favicon.ico को हटा दें, जो आपकी जगह पर है
  3. index.html संपादित करें, फ़ेविकॉन खोजें और अपना स्थान दें
  4. फिर से एनजी सर्व करें

हो गया है

— amdan
स्रोत
0

मेरे मामले में, समस्या यह थी कि सामान्य एक की तुलना में मेरे पास विभिन्न आयाम थे। मेरे पास था 48x48 pxजबकि यह उम्मीद कर रहा था 32x32 pxऔर मेरा विस्तार png था इसलिए मुझे इसे बदलना पड़ाico

— ब्लैक मम्बा
स्रोत
0

मेरे लिए वास्तव में जो काम करता है वह मेरे favicon को संपत्ति फ़ोल्डर में डाल रहा है और ब्राउज़र में स्वचालित रूप से प्रकट होता है।

  1. src फ़ोल्डर के अंदर संपत्ति फ़ोल्डर में स्थान बदलें।
  2. index.html को इस तरह बदलें <link rel="icon" type="image/x-icon" href="assets/favicon.png">
— Okyam
स्रोत
0

ठीक है, यहाँ 2020 में 9.1.12 पर। मुझे समझ नहीं आता कि वास्तव में यह प्रक्रिया इतनी कठिन क्यों है। मैंने लगभग हर पोस्ट का अनुसरण किया और उनमें से किसी ने भी मेरे लिए काम नहीं किया।

यह क्या काम था: पूरी तरह से index.html में favicon संदर्भ को हटा रहा है। यह पूरी तरह से सहज है, लेकिन यह काम करता है। आपको इसे 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, तो फेविकॉन होता है। मेरे लाइव सर्वर पर भी प्रदर्शित करता है।

— user2619824
स्रोत
-1

क्रोम फ़ेविकॉन कैश को हटाना और मैक पर ब्राउज़र को पुनरारंभ करना मेरे लिए काम किया।

rm ~/Library/Application\ Support/Google/Chrome/Default/Favicons
— Padawan
स्रोत
-1

मेरे पास एक ही मुद्दा था, और इसे ताज़ा करने के लिए यहाँ बताए गए तरीके को मजबूर करके हल किया :

अपनी साइट के फ़ेविकॉन को ताज़ा करने के लिए आप लिंक टैग का उपयोग करके एक नए संस्करण को डाउनलोड करने के लिए ब्राउज़रों को बाध्य कर सकते हैं और अपने फ़ाइल नाम पर एक क्वेरिस्ट्रिंग कर सकते हैं। यह विशेष रूप से उत्पादन वातावरण में सहायक है ताकि यह सुनिश्चित किया जा सके कि आपके उपयोगकर्ताओं को अपडेट प्राप्त हो।

<link rel="icon" href="http://www.yoursite.com/favicon.ico?v=2" />
— Maia
स्रोत
-1

मैंने अपनी खुद की .ico फ़ाइल बनाकर समस्या को ठीक किया और एक संपत्ति फ़ोल्डर बनाया और फ़ाइल को वहाँ रख दिया। फिर Index.html में लिंक href बदल दिया

— जेरिन कुरियन
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.