ngx-favicon
Advanced tools
Install the library into your project:
npm i ngx-favicon
Put your favicon(s) somewhere into your project (/src for example) and don't forget to add them into angular.json file:
{
...
"projects": {
"[YOUR PROJECT NAME]": {
...
"architect": {
...
"build": {
...
"options": {
...
"assets": [
"src/favicon.ico",
+ "src/favicon-success.ico",
+ "src/favicon-error.ico",
"src/assets"
],
}
}
}
}
}
}
Create a new file called (for example) favicon.config.ts and put into it the following code:
// enum all your different favicons
// (for type safety)
export enum CustomFavicon {
FAVICON_SUCCESS = 'faviconSuccess',
FAVICON_ERROR = 'faviconError',
}
export type AvailableCustomFavicons = { [key in CustomFavicon]: string };
// -------------------------------------------------------------
// @warning do not forget to add your favicons to your bundle
// you should double check into angular.json file
// -------------------------------------------------------------
// map all the types of favicon to their href
export const customFavicons: AvailableCustomFavicons = {
// for some reason, impossible to use the syntax
// [CustomFavicon.FAVICON_SUCCESS]: 'favicon-success.ico',
// otherwise we end up with an AOT ERROR
faviconSuccess: 'favicon-success.ico',
faviconError: 'favicon-error.ico',
};
Open index.html file and add an ID to the link tag defining the favicon:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>NgxFaviconDemo</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
- <link rel="icon" type="image/x-icon" href="favicon.ico" />
+ <link id="favicon" rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<app-root></app-root>
</body>
</html>
Import the NgxFaviconModule with forRoot method and define your own config once only:
+ import { NgxFaviconModule } from 'ngx-favicon';
+ import { customFavicons, AvailableCustomFavicons } from './favicon.config';
@NgModule({
...
imports: [
...
+ NgxFaviconModule.forRoot<AvailableCustomFavicons>({
+ faviconElementId: 'favicon',
+ defaultUrl: 'favicon.ico',
+ custom: customFavicons,
+ }),
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
Once everything is setup, you can inject the NgxFaviconService and use either the setDefaultFavicon, setCustomFavicon or setFaviconByUrl methods.
Example from a component:
.ts file:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
+ public CustomFavicon: typeof CustomFavicon = CustomFavicon;
+ constructor(private ngxFaviconService: NgxFaviconService<CustomFavicon>) {}
+ public setDefaultFavicon(): void {
+ this.ngxFaviconService.setDefaultFavicon();
+ }
+ public setCustomFavicon(faviconName: CustomFavicon): void {
+ this.ngxFaviconService.setCustomFavicon(faviconName);
+ }
+ public setFaviconByUrl(faviconUrl: string): void {
+ this.ngxFaviconService.setFaviconByUrl(faviconUrl);
+ }
}
.html file:
+ <button (click)="setDefaultFavicon()" data-btn-default>Set default</button>
+ <button (click)="setCustomFavicon(CustomFavicon.FAVICON_SUCCESS)" data-btn-success>
+ Set success
+ </button>
+ <button (click)="setCustomFavicon(CustomFavicon.FAVICON_ERROR)" data-btn-error>
+ Set error
+ </button>
+ <button (click)="setFaviconByUrl('https://en.wikipedia.org/static/favicon/wikipedia.ico')" data-btn-url>
+ Set by URL
+ </button>
A complete example using the app is available in this repo, feel free to take a look into it (/src) and the source code of the library is located in /projects/ngx-favicon.
If you're willing to contribute to that project, feel free to do so.
yarngit checkout -b /feat/my-feature or git checkout -b /fix/my-fixyarn run prettier:write to make sure formatting is fineyarn run lib:build:prod to build the libraryyarn run demo:test to make sure all the tests are passingThanks!
FAQs
The npm package ngx-favicon receives a total of 276 weekly downloads. As such, ngx-favicon popularity was classified as not popular.
We found that ngx-favicon demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.