CODEWITHSUNDEEP
angular-cli
user4914839
user4914839

Reputation:

How to change Angular CLI favicon

How can I change the default favicon that is set by the Angular CLI?

I have tried many things, but it always shows the Angular logo as the favicon, even though I have deleted that icon (favicon.ico in src folder). It still shows, and I don't know from where it's loaded from.

I have replaced that icon with another icon, but it still show the Angular logo:

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

Upvotes: 204

Views: 310128

Answers (30)

EdwardFunnyHands
EdwardFunnyHands

Reputation: 153

Follow these steps to change icon from default angular to an application specific one.

  1. For AngularJS Projects: Add the icon inside the webapps. Inside the index.html file add the following line

<link rel = "icon" type = "image/x-icon" href = "location of specifed icon inside webapps directory"> in the head tag.

  1. For projects based on Angular 7/8: Add the icon image to assets folder. Go to index.html file inside the project. Change the following link tag

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

This should modify the default angular icon to your specified icon.

Upvotes: 1

Steve Nginyo
Steve Nginyo

Reputation: 301

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

single period

Upvotes: 2

Jarek Wichrowski
Jarek Wichrowski

Reputation: 256

If upgarde angular to 8+ you must change in angular.json

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

to

"assets": [
  {
    "glob": "**/*",
    "input": "src/assets/",
    "output": "/assets/"
  },
  {
    "glob": "favicon.ico",
    "input": "src/",
    "output": "/"
  }
]

Upvotes: 0

Артур Гудиев
Артур Гудиев

Reputation: 1144

An editor (in my case IDEA 2020.2) can sometimes add src/ prefix to icon location in href. I mean

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

instead of

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

So in this case you should remove this src/ part in href. This solved the problem for me.

Upvotes: 0

user2619824
user2619824

Reputation: 478

Ok, here in 2020 on 9.1.12. I don't understand why exactly this process is so difficult. I followed almost every post above and none of them worked for me.

What DID work was this: Totally removing the favicon reference in index.html. It's totally counter intuitive but it works. You DON'T need to put it in the assets folder. I tried all of that but unfortunately none of those suggestions worked.

index.html

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

angular.json

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

and when I run ng build --prod, the favicon is there. Displays on my live server too.

Upvotes: 3

Sukhveer Singh
Sukhveer Singh

Reputation: 3077

Make a png image with same name (favicon.png) and change the name in these files:

index.html:

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

angular-cli.json:

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

And you will never see the angular default icon again.

Size should be 32x32, if more than this it will not display.

NOTE: This will not work with Angular 9

For angular 9 you have to put favicon inside assets then give path like

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

Upvotes: 292

Aathil Ahamed
Aathil Ahamed

Reputation: 474

Make a icon image with the extension .ico and copy and replace it with default favicon file in src folder.

index.html:

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

angular.json:

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

Upvotes: 8

Rut Shah
Rut Shah

Reputation: 1278

Please follow below steps to change app icon:

  1. Add your .ico file in the project.
  2. Go to angular.json and in that "projects" -> "architect" -> "build" -> "options" -> "assets" and here make an entry for your icon file. Refer to the existing entry of favicon.ico to know how to do it.

  3. Go to index.html and update the path of the icon file. For example,

  4. Restart the server.

  5. Hard refresh browser and you are good to go.

Upvotes: 3

user1795667
user1795667

Reputation: 423

For Angular 6, put favicon.png of size 32x32 in the asset folder and change the path in index.html. Then, 

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

Upvotes: 14

Maurizio L
Maurizio L

Reputation: 43

I tried many of these solution but was unsuccessful. The one that worked for my angular 5 application was the below:

index.html: Comment out your link tag

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

.angular-cli.json: leave the item type as ".ico" 

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

LASTLY..

  • In your project folder structure, have the favicon.ico inside the src ex: (C:\Dev\EPS\src). You do NOT need to have it in your asset folder since you aren't referencing it.

  • Make sure your icon is not broken (Your icon should be readable if viewed through window explorer aka no broken window icon)

  • must be 32 x 32 dimension

Upvotes: 1

Okyam
Okyam

Reputation: 730

What really works for me was putting my favicon into assets folder and apear automatically in the browser.

  1. change location to assets folder inside src folder.
  2. change index.html like this <link rel="icon" type="image/x-icon" href="assets/favicon.png">

Upvotes: 0

Brian B
Brian B

Reputation: 310

TO RELOAD FAVICON FOR ANY WEB PROJECT:

Right click on the favicon and click 'reload'. Works every time.

Upvotes: 5

Adeel
Adeel

Reputation: 143

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

Add source of your icon and restart app it will change.

Upvotes: 2

user4158347
user4158347

Reputation:

For future readers, if this happens to you, your browser wants to use the old cached favicon.

Follow these steps:

  1. Hold CTRL and click the "Refresh" button in your browser.
  2. Hold Shift and click the "Refresh" button in your browser.

Fixed.

Upvotes: 3

Danny Fenstermaker
Danny Fenstermaker

Reputation: 934

For those needing a dynamically added favicon here is what I did with an app initializer:

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

Just remove fav.ico file under src/ and add this. The favicon will be added before app start

Upvotes: 1

Black Mamba
Black Mamba

Reputation: 15545

In my case, the problem was that I had different dimensions compared to normal one. I had 48x48 px whereas it was expecting 32x32 px and my extension was png so I had to change it to ico

Upvotes: 0

Jerin Kurian
Jerin Kurian

Reputation: 174

I fixed the issue by creating my own .ico file and created a assets folder and put the file over there. Then changed the link href in Index.html

Upvotes: -1

Ester Vardan
Ester Vardan

Reputation: 1

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

"assets": [

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

  ],

this worked for me.

Upvotes: 0

user7878464
user7878464

Reputation:

I was playing around with this for a little while. Turns out that the favicon is apparently handled by a node module called @scematics (at least in Angular5).

You can change your favicon in this folder:

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

In that folder there should be a favicon.ico, that's the one that is loaded. Im pretty shure this doesnt apply to everyone but it worked out for me.

Hope this helped. Happy coding! :D

Upvotes: 1

gxmad
gxmad

Reputation: 2210

as simple and easy as :

  1. add your icon or png in the same directory as favicon
  2. edit .angular-cli.json, in assets remove favicon.ico put yours in place
  3. edit index.html, search favicon and put yours in place
  4. run ng serve again

that's done

Upvotes: 1

Dheerendra Pandey
Dheerendra Pandey

Reputation: 41

Following steps worked for me.

  1. Remove default "favicon.ico" file with a new one with different name i.e. "_favicon.ico" in my case.

    Note :: Don't keep the default name, as it's get's cached in your browser and difficult to overwrite with new icon.

  2. Update index.html with new link tag i.e.

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

  3. Update .angular-cli.json with new icon name i.e. "_favicon.ico".

  4. Build & launch your app, and do a hard refresh Ctrl+F5.

Upvotes: 0

Sri Vivek
Sri Vivek

Reputation: 535

  1. Remove your existing favicon.ico
  2. Add new icon into the src folder with name as "favico.ico"
  3. Clear Cache in your browser.

The icon does not reflect only because of your browser cache. Sometimes try restarting the application

Upvotes: 0

maia
maia

Reputation: 4360

I had the same issue, and solved it by forcing the refreshby the method described here:

To refresh your site's favicon you can force browsers to download a new version using the link tag and a querystring on your filename. This is especially helpful in production environments to make sure your users get the update.

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

Upvotes: -1

Padawan
Padawan

Reputation: 820

Deleting chromes favicon cache and restarting the browser on the mac worked for me.

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

Upvotes: -1

Yuri
Yuri

Reputation: 4478

Since you have replaced the favicon.ico file physically, there must be a caching issue somewhere. There is a cache in your browser. Force it to get flushed by pressing Ctrl+F5.

If the default icon is still displayed, try another browser with a clean cache (i.e. you haven't visited the page with that browser yet).

Clear Cache Shortcuts: (Source)

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

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

Upvotes: 81

alang
alang

Reputation: 1

I had the same problem.

If you are using a Mac, you will need to empty the Cache (Option+⌘+E) and reload the page in addition to restarting the app (and of course changing the path in index.html).

Upvotes: 0

Tobi
Tobi

Reputation: 2040

The ensure the browser downloads a new version of the favicon and does not use a cached version you can add a dummy parameter to the favicon url:

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

Upvotes: 34

jaimin patel
jaimin patel

Reputation: 219

we can change angular CLI favicon icon. we have to put icon file in "assets" folder and give that path in index.html.

<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png"> It's work for me.

Upvotes: 22

dscanon
dscanon

Reputation: 303

1.Check your link tag on index.html file that it should look like this.

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

2.Check file name of favicon.ico in /src directory.

3.Rerun Angular with ng serve and refresh application.

4.If it doesn't show (or something look like it buffer old favicon.ico file). try to refresh path of favicon again to load favicon.ico file (eg. refresh yourdomain.com/favicon.ico)

Upvotes: 0

KGROZA
KGROZA

Reputation: 93

Move favicon.ico to your assets and then to img folder, and after that only change your icon link tag in header. It helps me when favicon was not displayed at all.

Upvotes: 4

Related Questions