วิธีการเปลี่ยน favicon ของ Angular CLI


140

ฉันจะเปลี่ยน favicon เริ่มต้นที่กำหนดโดย Angular CLI ได้อย่างไร

ฉันลองหลาย ๆ อย่างแล้ว แต่มันแสดงโลโก้ Angular ว่าเป็น favicon เสมอแม้ว่าฉันจะลบไอคอนนั้น (favicon.ico ในโฟลเดอร์ src) มันยังคงแสดงอยู่และฉันไม่รู้ว่ามันโหลดมาจากไหน

ฉันได้แทนที่ไอคอนนั้นด้วยไอคอนอื่น แต่มันยังคงแสดงโลโก้ Angular:

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


การเรียกใช้แอพที่มีพอร์ตต่าง ๆ แก้ปัญหาได้ ตัวอย่าง:ng s --port 4201
Sajad

ฉันมีปัญหาเดียวกัน ในกรณีของฉันทุกอย่างในประเทศเป็นสิ่งที่ดี แต่เมื่อฉันใช้กับเซิร์ฟเวอร์ที่ฉันได้รับข้อผิดพลาดภายในเซิร์ฟเวอร์ 500 ...
Ziggler

ฉันอ่านคำตอบทั้งหมดที่ช่วยฉันนิดหน่อย แต่โดยสุจริตที่ไม่ควรซับซ้อนสำหรับความต้องการขั้นพื้นฐาน: เพียงแค่เส้นทางที่จะคัดลอกรูปภาพไปแล้วอาจเป็นไฟล์กำหนดค่าจากนั้นเริ่มใหม่ คำตอบ "รีเฟรช" ไม่ได้ช่วยอะไร
pdem

favicon เป็นไฟล์สแตติกที่ได้รับการกำหนดค่าเป็นพิเศษใน 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 ถ้ามากกว่านี้มันจะไม่แสดง

หมายเหตุ: สิ่งนี้จะไม่ทำงานกับ Angular 9

สำหรับเชิงมุม 9 คุณต้องใส่ favicon ไว้ในสินทรัพย์แล้วให้เส้นทางเหมือน

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


2
ขอบคุณ Sukhveer ใช้งานได้อย่างสมบูรณ์แบบเพียงแค่รีสตาร์ทแอพหลังจากเพิ่มไอคอนในangular-cli.jsonไฟล์
Ajay Sivan

1
คำตอบนี้ควรได้รับการยอมรับ! ไม่มีอะไรทำงาน แต่เคล็ดลับนี้ได้! ขอบคุณ Sukhveer Singh!
Junia Montana

ฉันต้องเปลี่ยนเส้นทาง png<link rel="icon" type="image/png" href="./favicon.png" />
Dude Pascalou

1
ขอบคุณสำหรับเคล็ดลับเชิงมุม 9
shanti

56

เนื่องจากคุณได้เปลี่ยน favicon.icoไฟล์จริง ๆ แล้วจะต้องมีปัญหาการแคชบางแห่ง มีแคชในเบราว์เซอร์ของคุณ บังคับให้ล้างข้อมูลโดยกดCtrl+F5 +

หากไอคอนเริ่มต้นยังคงปรากฏให้ลองเบราว์เซอร์อื่นที่มีแคชสะอาด (เช่นคุณยังไม่ได้เยี่ยมชมหน้าเว็บด้วยเบราว์เซอร์นั้น)

ล้างทางลัดแคช: ( ที่มา )

Windows
IE: Ctrl+ R; Firefox: Ctrl+ Shift+ R; Chrome: Ctrl+ R, หรือCtrl+ F5, หรือShiftF5 +

Mac
Safari: + R; Firefox / Chrome: + +ShiftR


1
ขอบคุณคนทำงานทันที - CTRL F5 สำหรับผู้ชนะ - ทำงานกับ Angular 6 พร้อม favicon ใน dir เดียวกับ index.html และบรรทัดนี้ใน index.html ... <link rel = "icon" type = "image / x-icon" href = "favicon.ico">
danday74

ทางลัดที่น่าทึ่ง!
Gerardo Bautista

36

ในที่สุดการนำทางไปยังไฟล์จะแก้ไขสิ่งนี้ให้ฉัน ในกรณีของฉัน: http: // localhost: 4200 / favicon.ico

ฉันพยายามรีเฟรชหยุดและเริ่มng serveใหม่อีกครั้งและ "ล้างแคชและโหลดซ้ำ" ไม่ทำงาน


1
นั่นเป็นคำตอบเดียวที่เหมาะกับฉัน ขอบคุณสำหรับสิ่งนั้น!
อีวาน

2
หลังจากนำทางไปยัง favicon ฉันโหลดหน้าแรกอีกครั้งและกด ctrl + f5 (chrome) - สิ่งนี้ใช้ได้ ไชโย
blueprintchris

1
นี่เป็นสิ่งเดียวที่ใช้ได้ผลสำหรับฉัน เหลือเชื่อ!
Yaniv Eliav

28

การตรวจสอบให้แน่ใจว่าเบราว์เซอร์ดาวน์โหลดเวอร์ชันใหม่ของ favicon และไม่ได้ใช้เวอร์ชันแคชคุณสามารถเพิ่มพารามิเตอร์ดัมมี่ให้กับ URL favicon:

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

ทำงานให้ฉันขอบคุณ
Venky559

ขอบคุณ ... ? any = param ช่วยในการลบไอคอนก่อนหน้าแคช
ArunDhwaj IIITH

นี่เป็นสิ่งเดียวที่ทำงานให้ฉัน ไม่ใช่ ctrl + f5 หรือคำตอบอื่น ๆ ทั้งหมดนี่คือสิ่งที่ใช้งานได้!
saferJo

14

เราสามารถเปลี่ยนไอคอน favicon เชิงมุม CLI เราต้องใส่ไฟล์ไอคอนในโฟลเดอร์ "ทรัพย์สิน" และกำหนดพา ธ นั้นใน index.html

<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png"> มันใช้งานได้สำหรับฉัน


ใช่ไม่มีอะไรทำงานให้ฉันที่นี่อีกแล้ว แต่การติดไว้ในโฟลเดอร์สินทรัพย์ทำงานได้อย่างสมบูรณ์ ไชโย
scohe001

10

ฉันกำลังดิ้นรนกับสิ่งนี้เช่นกันโดยคิดว่าฉันกำลังทำอะไรผิดกับ Angular แต่ปัญหาของฉันก็จบลงด้วยการที่ Chrome ทำการแคชไอคอน "แคชเปล่าและโหลดซ้ำแบบยาก" หรือรีสตาร์ทเบราว์เซอร์ไม่ทำงานสำหรับฉัน แต่โพสต์นี้ซ้ำแบบชี้ให้ฉันในทิศทางที่ถูกต้อง

สิ่งนี้ได้ผลสำหรับฉันโดยเฉพาะ:

หากอยู่บน windows และใช้ chrome ให้(exit chrome from taskbarไปที่ C:\Users\your_username\AppData\Local\Google\Chrome\User Data\Default และลบไฟล์ Favicons-journal, Favicons แล้วเริ่ม chrome ใหม่ (จากทาสก์บาร์kill all instances)

มีคำแนะนำที่ดีอื่น ๆ อีกมากมายในโพสต์นั้นหากไม่ได้ผลสำหรับคุณ


1
นี่จะเป็นการลบไอคอนสำหรับหน้าที่คั่นหน้าใด ๆ ที่มีอยู่จนกว่าคุณจะไปที่หน้า นี่เป็นการหลอกลวงสำหรับฉัน
David B

9

สำหรับเชิงมุม 6 ใส่favicon.pngของขนาดในโฟลเดอร์สินทรัพย์และเปลี่ยนเส้นทางใน32x32 index.htmlจากนั้น

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

อันที่จริง: ฉันต้องใส่ของฉันลงในโฟลเดอร์สินทรัพย์และเปลี่ยนเส้นทางใน index.html และในไฟล์ angular.json
G. Delvigne

5

สร้างภาพไอคอนพร้อมด้วยนามสกุล. ico และคัดลอกและแทนที่ด้วยไฟล์ favicon ที่เป็นค่าเริ่มต้นในโฟลเดอร์ src

index.html:

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

angular.json:

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

ช่วยชีวิต! ขอบคุณ
koo9

4

ย้าย favicon.ico ไปที่เนื้อหาของคุณแล้วไปที่โฟลเดอร์ img จากนั้นเปลี่ยนแท็กลิงก์ไอคอนในส่วนหัวเท่านั้น มันช่วยฉันได้เมื่อ favicon ไม่แสดงเลย


ใน Chrome และ Firefox ไม่ใช่ปัญหาการแคช ฉันย้ายไฟล์ ICO ของฉันแล้วทั้ง Chrome และ Firefox ได้รับการอัปเดตทันที
Steve11235

ฉันอัพเดตไฟล์ favicon.ico ของฉันแล้วและจะไม่โหลด ฉันทำสิ่งนี้ (ย้ายไปที่เนื้อหาและลิงก์ที่อัปเดตแล้ว) และทำงานได้ดี
David

4

กดCtrl+ F5ในหน้าต่างเบราว์เซอร์


สวัสดี Andrey คำตอบที่ดี แต่คุณอาจต้องการอธิบายว่านี่เป็นการรีเฟรชแคชมิฉะนั้นเป็นเพียงคำตอบที่ "วิเศษ"
Tom

1
คำตอบนี้เหมือนกับของยูริ (ตอบ 26 พ.ย. '16 ที่ 19:12) ลบคำอธิบายที่มีประโยชน์มาก
robinCTS

4

เพื่อ RELOAD FAVICON สำหรับโครงการใด ๆ ของเว็บ:

คลิกขวาที่ favicon และคลิก 'โหลดซ้ำ' ทำงานได้ทุกครั้ง


1
หลังจาก 20 นาทีของการต่อสู้กับหัวของฉันกับกำแพงนี่เป็นทางออกเดียวที่ทำงาน ขอบคุณ!!
wooldridgetm

2

สำหรับผู้อ่านในอนาคตหากสิ่งนี้เกิดขึ้นกับคุณเบราว์เซอร์ของคุณต้องการใช้ favicon ที่เก็บไว้ในแคชเก่า

ทำตามขั้นตอนเหล่านี้:

  1. กด CTRL ค้างไว้แล้วคลิกปุ่ม "รีเฟรช" ในเบราว์เซอร์ของคุณ
  2. กด Shift ค้างไว้แล้วคลิกปุ่ม "รีเฟรช" ในเบราว์เซอร์ของคุณ

แก้ไขแล้ว.


2

โปรดทำตามขั้นตอนด้านล่างเพื่อเปลี่ยนไอคอนแอพ:

  1. เพิ่มไฟล์. ico ของคุณในโครงการ
  2. ไปที่ angular.json และใน "โครงการ" -> "สถาปนิก" -> "สร้าง" -> "ตัวเลือก" -> "สินทรัพย์" และที่นี่ทำรายการสำหรับไฟล์ไอคอนของคุณ อ้างถึงรายการที่มีอยู่ของ favicon.ico เพื่อทราบวิธีการทำ
  3. ไปที่ index.html และอัปเดตพา ธ ของไฟล์ไอคอน ตัวอย่างเช่น,

  4. รีสตาร์ทเซิร์ฟเวอร์

  5. รีเฟรชเบราว์เซอร์อย่างหนักและคุณพร้อมแล้วที่จะไป

1

ฉันเล่นรอบนี้สักครู่ ปรากฎว่า favicon ถูกจัดการโดยโมดูลโหนดที่ชื่อ @scematics (อย่างน้อยใน Angular5)

คุณสามารถเปลี่ยน favicon ของคุณในโฟลเดอร์นี้:

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

ในโฟลเดอร์นั้นควรมี favicon.ico นั่นคือโฟลเดอร์ที่โหลด ฉันไม่คิดว่ามันจะใช้ได้กับทุกคน แต่มันก็ใช้ได้สำหรับฉัน

หวังว่านี่จะช่วยได้ การเข้ารหัสที่มีความสุข! : D


1

สำหรับผู้ที่ต้องการ favicon เพิ่มแบบไดนามิกนี่คือสิ่งที่ฉันทำกับตัวเริ่มต้นแอพ:

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 / และเพิ่มไฟล์นี้ favicon จะถูกเพิ่มก่อนเริ่มแอพ


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

เพิ่มแหล่งที่มาของไอคอนของคุณแล้วรีสตาร์ทแอพที่มันจะเปลี่ยน


1

ฉันลองใช้วิธีการแก้ปัญหาหลายอย่าง แต่ก็ไม่ประสบความสำเร็จ อันที่ทำงานให้กับแอปพลิเคชันเชิงมุม 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) คุณไม่จำเป็นต้องมีมันในโฟลเดอร์ทรัพย์สินของคุณเพราะคุณไม่ได้อ้างอิงมัน

  • ตรวจสอบให้แน่ใจว่าไอคอนของคุณไม่เสียหาย (ไอคอนของคุณควรอ่านได้หากมองผ่าน window explorer หรือที่ไม่มีไอคอนหน้าต่างเสีย)

  • ต้องมีขนาด 32 x 32

0

ตรวจสอบให้แน่ใจเมื่อคุณใช้ภาพไอคอนมันไม่ได้จัดการส่วนขยายเช่นถ้าคุณดาวน์โหลดpngภาพและจากนั้นเปลี่ยนนามสกุลจากpngเป็นiconไปในกรณีนี้ภาพของคุณจะเสียหาย และเบราว์เซอร์ไม่เข้าใจ

ฉันทำผิดพลาด แต่หลังจากใช้รูปไอคอนดั้งเดิมแล้วมันก็เริ่มทำงานได้


0

1. ตรวจสอบแท็กลิงค์ของคุณในไฟล์ index.html ว่าควรมีลักษณะเช่นนี้

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

2. ตรวจสอบชื่อไฟล์ของ favicon.ico ในไดเรกทอรี / src

3. เปิดใช้งาน Angular อีกครั้งด้วย ng บริการและรีเฟรชแอปพลิเคชัน

4. หากไม่ปรากฏขึ้น (หรือมีลักษณะคล้ายกับบัฟเฟอร์ไฟล์ favicon.ico เก่า) ลองรีเฟรชพา ธ ของ favicon อีกครั้งเพื่อโหลดไฟล์ favicon.ico (เช่นรีเฟรช yourdomain.com/favicon.ico)


0

ผมมีปัญหาเหมือนกัน.

หากคุณใช้ Mac คุณจะต้องล้างแคช ( Option+ + E) และโหลดหน้าเว็บนั้นนอกเหนือจากการรีสตาร์ทแอป (และแน่นอนว่าจะเปลี่ยนเส้นทางใน index.html)


0
  1. ลบ favicon.ico ที่มีอยู่ของคุณ
  2. เพิ่มไอคอนใหม่ลงในโฟลเดอร์ src ที่มีชื่อเป็น "favico.ico"
  3. ล้างแคชในเบราว์เซอร์ของคุณ

ไอคอนไม่ได้สะท้อนถึงเพียงเพราะแคชเบราว์เซอร์ของคุณ บางครั้งลองรีสตาร์ทแอปพลิเคชัน


0

ขั้นตอนต่อไปนี้ใช้ได้สำหรับฉัน

  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. รูปร่างและเปิด app ของคุณและทำรีเฟรชยาก+CtrlF5


0

ง่ายและง่ายเหมือน:

  1. เพิ่มไอคอนหรือ png ของคุณในไดเรกทอรีเดียวกับ favicon
  2. แก้ไข .angular-cli.json ในเนื้อหาลบ favicon.ico ใส่ของคุณไว้
  3. แก้ไข index.html ค้นหา favicon และใส่ของคุณไว้
  4. เรียกใช้บริการอีกครั้ง

เสร็จแล้ว


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

"assets": [

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

  ],

สิ่งนี้ใช้ได้สำหรับฉัน


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

0

ในกรณีของฉันปัญหาคือว่าฉันมีมิติที่แตกต่างเมื่อเทียบกับปกติ ฉันมี48x48 pxในขณะที่มันคาดหวัง32x32 pxและนามสกุลของฉันคือ png ดังนั้นฉันจึงต้องเปลี่ยนเป็นico


0

สิ่งที่ใช้งานได้จริงสำหรับฉันคือการใส่ favicon ลงในโฟลเดอร์สินทรัพย์และ apear อัตโนมัติในเบราว์เซอร์

  1. เปลี่ยนตำแหน่งไปยังโฟลเดอร์สินทรัพย์ภายในโฟลเดอร์ src
  2. เปลี่ยน index.html เช่นนี้ <link rel="icon" type="image/x-icon" href="assets/favicon.png">

0

ตกลงที่นี่ในปี 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 --prodfavicon ก็อยู่ที่นั่น แสดงบนเซิร์ฟเวอร์สดของฉันด้วย


-1

การลบ favicon แคช Chromes และรีสตาร์ทเบราว์เซอร์บน mac ที่ใช้งานได้สำหรับฉัน

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

-1

ฉันมีปัญหาเดียวกันและแก้ไขได้โดยการบังคับให้รีเฟรชโดยวิธีที่อธิบายไว้ที่นี่ :

ในการรีเฟรช favicon ของเว็บไซต์ของคุณคุณสามารถบังคับให้เบราว์เซอร์ดาวน์โหลดเวอร์ชันใหม่โดยใช้แท็กลิงก์และการสอบถามชื่อไฟล์ของคุณ สิ่งนี้มีประโยชน์อย่างยิ่งในสภาพแวดล้อมการผลิตเพื่อให้แน่ใจว่าผู้ใช้ของคุณได้รับการอัปเดต

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

-1

ฉันแก้ไขปัญหาด้วยการสร้างไฟล์. ico ของฉันเองและสร้างโฟลเดอร์ทรัพย์สินและวางไฟล์ไว้ตรงนั้น จากนั้นเปลี่ยนลิงค์ href ใน Index.html

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.