README
ng-favicon
A simple angular service to change favicon or display unread messages and notifications on top of favicon
this.faviconService.set('iconName');
- Simple favicon changes
- Configurable icon sets
- Predefined renderers to display unread messages and notifications on top of default favicon
- Custom resolvers and icon generators can be plugged in
Examples/Demo
- Demo
- A simple example can be found under
src/app
directory of this repository.
Getting started
ng-favicon
:
Step 1: Install npm
npm install --save @enzedd/ng-favicon
yarn
yarn add @enzedd/ng-favicon
FaviconModule
:
Step 2: Import import {FaviconModule} from '@enzedd/ng-favicon';
@NgModule({
declarations: [AppComponent],
imports: [
...
FaviconModule,
],
bootstrap: [AppComponent]
})
export class AppModule {}
FaviconService
in component constructor
Step 3: Inject import {FaviconService} from '@enzedd/ng-favicon';
@Component({
...
})
export class AppComponent {
constructor(private faviconService: FaviconService) {
}
}
FaviconService
methods to set favicons
Step 4: Use import {FaviconService} from '@enzedd/ng-favicon';
@Component({
...
template: `<button type="button" (click)="setFavicon($event)">Set favicon</button>`,
})
export class AppComponent {
constructor(private faviconService: FaviconService) {
}
setFavicon($event) {
$event.preventDefault();
this.faviconService.setDot();
}
}
See API section for other FaviconService
methods
Configuration
All configuration items are optional
Named favicons configuration
Configure application favicons by providing values for FAVICON_CONFIG
token in a NgModule e.g. src/app/app.module.ts
import {FAVICON_CONFIG} from '@enzedd/ng-favicon';
@NgModule({
...
providers: [
{
provide: FAVICON_CONFIG,
useValue: {
icons: {
dotted: {
rel: 'icon',
type: 'image/png',
sizes: '32x32',
href: 'assets/images/favicons/favicon-dotted-32x32.png'
},
},
},
},
],
})
export class AppModule {
}
Values can be provided as a single icon or as icon set (multiple sizes of same icon for different devices). It is recommended to keep in sync icon count and types in html and configuration. Otherwise app icon may disappear on some devices when changed.
providers: [
{
provide: FAVICON_CONFIG,
useValue: {
icons: {
dotted: [{
rel: 'icon', type: 'image/png', sizes: '16x16',
href: 'assets/images/favicons/favicon-dotted-16x16.png'
}, {
rel: 'icon', type: 'image/png', sizes: '32x32',
href: 'assets/images/favicons/favicon-dotted-32x32.png'
}],
},
},
},
],
Colors configuration
Favicon notification text and background colors can be configured
providers: [
{
provide: FAVICON_CONFIG,
useValue: {
color: '#fff', // favicon notification text color
bgColor: '#00f', // favicon notification background color
icons: {
...
},
},
},
],
API
Methods
setDefault()
Resets favicon to default
set()
Sets favicon by name. Requires favicons to be configured. See configuration section for details.
Parameter | Type | Default | Required | Description |
---|---|---|---|---|
name | string | null | no | Name of icon or icon set. If name is null, resets to default. |
setIcon()
Set icon
Parameter | Type | Default | Required | Description |
---|---|---|---|---|
href | string | - | yes | Icon url or dataUrl |
rel | string | 'icon' | no | Icon rel |
type | string | null | no | Icon type |
sizes | string | null | no | Icon size |
cacheKey | string | null | no | Cache key. If set, icon is cached and accessible by name |
setIcons()
Set icon set
Parameter | Type | Default | Required | Description |
---|---|---|---|---|
icons | Icon[] | - | yes | Icon set |
cacheKey | string | null | no | Cache key. If set, icon set is cached and accessible by name |
setNumber()
Sets number overlay on default favicon. Use to display unread messages and notifications.
Parameter | Type | Default | Required | Description |
---|---|---|---|---|
num | number | - | yes | Number to set |
options | NumberRendererOptions | null | no | Options |
returns Icon set observable
setDot()
Sets dot overlay on default favicon. Use to indicate the presence of notifications.
Parameter | Type | Default | Required | Description |
---|---|---|---|---|
options | DotRendererOptions | null | no | Options |
returns Icon set observable
setCustom()
Sets custom favicon using GetIconFn. Use for custom implementations of favicon resolving or generation.
Parameter | Type | Default | Required | Description |
---|---|---|---|---|
getIconFn | GetIconFn | - | yes | Icon resolving or generating function |
options | any | null | no | Options |
cacheKey | string | null | no | Cache key. If set icon is cached and not regenerated again |
returns Icon set observable
Example 1: Resolve favicon
Do any icon handling to get new favicon url
setCustomFavicon1($event) {
function getIcon(options, defaultIcons?: IconMap): Observable<Icon[]> {
const icon: Icon = Object.values(defaultIcons)[0];
const url = icon.href.slice(0, icon.href.length - 9) + 'dotted' + icon.href.slice(icon.href.length - 10, icon.href.length);
return of([{
rel: icon.rel, type: icon.type, sizes: icon.sizes,
href: url,
}]);
}
$event.preventDefault();
this.faviconService.setCustom(getIcon);
}
Example 2: Generate favicon
Provide function to draw your own favicon
setCustomFavicon2($event) {
function dotRenderer(options, defaultIcons?: IconMap): Observable<Icon[]> {
const icon: Icon = Object.values(defaultIcons)[0];
const img: HTMLImageElement = new Image();
img.src = icon.href;
return fromEvent(img, 'load').pipe(
map((event: Event) => event.target),
map((image: HTMLImageElement) => {
const canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
const context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
context.fillStyle = 'blue';
context.beginPath();
context.arc(context.canvas.width * 0.7, context.canvas.height * 0.75,
context.canvas.width * 0.25, 0, Math.PI * 2);
context.closePath();
context.fill();
return [{
rel: icon.rel, type: icon.type, sizes: icon.sizes,
href: canvas.toDataURL(),
}];
})
);
}
$event.preventDefault();
this.faviconService.setCustom(dotRenderer);
}
cacheIcon()
Put icon to cache in runtime. May override configured icons.
Parameter | Type | Default | Required | Description |
---|---|---|---|---|
name | string | - | yes | Cache key |
href | string | - | yes | Icon url or dataUrl |
rel | string | 'icon' | no | Icon rel |
type | string | null | no | Icon type |
sizes | string | null | no | Icon size |
cacheIcons()
Put icon set to cache in runtime. May override configured icons.
Parameter | Type | Default | Required | Description |
---|---|---|---|---|
href | string | - | yes | Icon url or dataUrl |
iconSet | Icon[] | - | yes | Icon set |
resetCache()
Resets cache to configured only favicons
Interfaces
NumberRendererOptions
Field | Type | Default | Required | Description |
---|---|---|---|---|
color | string | '#fff' | no | Number color (hex format) |
bgColor | string | '#f00' | no | Number background color (hex format) |
Options can be configured globally, see configuration section for details.
DotRendererOptions
Field | Type | Default | Required | Description |
---|---|---|---|---|
color | string | '#f00' | no | Dot color (hex format). Can be configured globally, set bgColor in configuration. |
centerX | number | 0.7 | no | Relative position by x axis (from 0 to 1) |
centerY | number | 0.25 | no | Relative position by y axis (from 0 to 1) |
radius | number | 0.25 | no | Radius relative to icon size (from 0 to 1) |
GetIconFn
Parameter | Type | Default | Required | Description |
---|---|---|---|---|
options | any | yes | Options passed from setCustom | |
defaultIcons | [sizes: string]: Icon | yes | Default icons |
returns Observable<Icon[]>
Icon
Field | Type | Default | Required | Description |
---|---|---|---|---|
href | string | yes | Icon url or dataUrl | |
rel | string | null | no | Icon rel |
type | string | null | no | Icon type |
sizes | string | null | no | Icon size |
Development
Library location is under projects/ng-favicon
directory of this repository.
Demo application is under src
directory of this repository.
Development server
Run npm run lib:watch
to incrementally build library as a background process in your dev environment
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Build library
Run npm run lib:build
to build the project. The build artifacts will be stored in the dist/
directory.
Publishing
After building your library, go to the dist folder cd dist/ng-favicon
and run npm publish
.
Running unit tests
Run npm run lib:test
to execute the library unit tests via Karma.