refactored favicons (#212)

* fixed webmanifest, simplified icon

* standardised icon colors

* added a development favicon

angular.json

@@ -23,8 +23,9 @@
 						"polyfills": "src/polyfills.ts",
 						"tsConfig": "tsconfig.app.json",
 						"assets": [
+							"src/assets",
 							"src/favicon.ico",
-							"src/assets"
+							"src/.webmanifest"
 						],
 						"styles": [
 							"src/styles.scss"
@@ -97,8 +98,9 @@
 						"tsConfig": "tsconfig.spec.json",
 						"karmaConfig": "karma.conf.js",
 						"assets": [
+							"src/assets",
 							"src/favicon.ico",
-							"src/assets"
+							"src/.webmanifest"
 						],
 						"styles": [
 							"src/styles.scss"

resources/icon.ps1

@@ -5,31 +5,40 @@
 #$FaviconSizes = 256, 192, 128, 96, 64, 48, 40, 32, 24, 16;
 
 # Browser Legacy
-$FaviconSizes = 48, 32, 16;
+$FaviconSizes = 32, 16;
 
 $Out = "out";
 
 function export-favicon() {
-	Param ([Parameter(Mandatory = $true)][string] $SvgFile)
-
-	export-pngs $SvgFile;
-	compress-pngs;
-	convert-favicon;
+	Param (
+		[Parameter(Mandatory = $true)][string] $SvgFile,
+		[Parameter(Mandatory = $false)][int[]] $Sizes = $FaviconSizes
+	)
+
+	export-pngs $SvgFile $Sizes;
+	compress-pngs $Sizes;
+	convert-favicon $Sizes;
 	remove-out-directory;
 }
 
 function export-pngs() {
-	Param ([Parameter(Mandatory = $true)][string] $SvgFile)
+	Param (
+		[Parameter(Mandatory = $true)][string] $SvgFile,
+		[Parameter(Mandatory = $false)][int[]] $Sizes = $FaviconSizes
+	)
 
 	add-out-directory;
 
-	foreach ($FaviconSize in $FaviconSizes) {
-		export-png $SvgFile $FaviconSize;
+	foreach ($Size in $Sizes) {
+		export-png $SvgFile $Size;
 	}
 }
 
 function export-png() {
-	Param ([Parameter(Mandatory = $true)][string] $SvgFile, [Parameter(Mandatory = $true)][int] $Size)
+	Param (
+		[Parameter(Mandatory = $true)][string] $SvgFile,
+		[Parameter(Mandatory = $true)][int] $Size
+	)
 
 	inkscape `
 		-p "$SvgFile" `
@@ -39,9 +48,11 @@ function export-png() {
 }
 
 function compress-pngs() {
-	$Pngs = ($FaviconSizes | Foreach-Object { [string]::Format("$Out\favicon-{0}.png", $_) });
+	Param ([Parameter(Mandatory = $false)][int[]] $Sizes = $FaviconSizes)
+
+	$PngFiles = $Sizes | Foreach-Object { [string]::Format("$Out\favicon-{0}.png", $_) };
 
-	$Pngs | ForEach-Object { compress-png $_ }
+	$PngFiles | ForEach-Object { compress-png $_ }
 }
 
 function compress-png() {
@@ -52,14 +63,19 @@ function compress-png() {
 }
 
 function convert-favicon() {
-	$Pngs = ($FaviconSizes | Foreach-Object { [string]::Format("$Out\favicon-{0}.png", $_) });
+	Param ([Parameter(Mandatory = $false)][int[]] $Sizes = $FaviconSizes)
+
+	$PngFiles = $Sizes | Foreach-Object { [string]::Format("$Out\favicon-{0}.png", $_) };
 
-	magick convert $Pngs favicon.ico;
+	magick convert $PngFiles favicon.ico;
 }
 
 
 function export-favicon-only-magick() {
-	Param ([Parameter(Mandatory = $true)][string] $SvgFile)
+	Param (
+		[Parameter(Mandatory = $true)][string] $SvgFile,
+		[Parameter(Mandatory = $false)][int[]] $Sizes = $FaviconSizes
+	)
 
 	magick `
 		-density 256x256 `

src/.webmanifest

@@ -0,0 +1,28 @@
+{
+	"name": "inanity",
+	"short_name": "inanity",
+	"start_url": "/",
+	"display": "standalone",
+	"theme_color": "#036ea6",
+	"background_color": "#424242",
+	"icons": [
+		{
+			"src": "assets/icon/inanity.svg",
+			"sizes": "any",
+			"type": "image/svg+xml",
+			"purpose": "any"
+		},
+		{
+			"src": "assets/icon/inanity-192.png",
+			"sizes": "192x192",
+			"type": "image/png",
+			"purpose": "any"
+		},
+		{
+			"src": "assets/icon/inanity-512.png",
+			"sizes": "512x512",
+			"type": "image/png",
+			"purpose": "any"
+		}
+	]
+}

src/app/app.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
+import { FaviconService } from 'src/app/core/browser/favicon.service';
 import { ColorsService } from 'src/app/core/colors/services/colors.service';
 import { TitleService } from 'src/app/core/routing/title.service';
 import { FpsService } from 'src/app/core/screen/fps.service';
@@ -19,6 +20,7 @@ export class AppComponent {
 		private readonly navigationService: NavigationService,
 		private readonly titleService: TitleService,
 		private readonly colorsService: ColorsService,
+		private readonly faviconService: FaviconService,
 		private readonly fpsService: FpsService,
 		private readonly screenDetectorService: ScreenDetectorService,
 		private readonly svgIconService: SvgIconService,

src/app/core/browser/favicon.service.ts

@@ -0,0 +1,39 @@
+import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
+import { environment } from 'src/environments/environment';
+
+@Injectable({ providedIn: 'root' })
+export class FaviconService {
+
+	constructor(
+		@Inject(DOCUMENT) private readonly document: HTMLDocument,
+	) {
+		this.initializeFavicon();
+	}
+
+	private initializeFavicon(): void {
+		const favicon = this.document.getElementById('favicon');
+
+		if (favicon.getAttribute('href') !== environment.iconRef) {
+			this.removeFavicon();
+			this.addFavicon();
+		}
+	}
+
+	private removeFavicon(): void {
+		const favicon = this.document.getElementById('favicon');
+
+		favicon.parentNode.removeChild(favicon);
+	}
+
+	private addFavicon(): void {
+		const favicon = this.document.createElement('link');
+
+		favicon.setAttribute('id', 'favicon');
+		favicon.setAttribute('rel', 'icon');
+		favicon.setAttribute('type', 'image/svg+xml');
+		favicon.setAttribute('href', environment.iconRef);
+
+		this.document.head.appendChild(favicon);
+	}
+}

src/environments/environment.prod.ts

@@ -3,4 +3,5 @@ import packageInfo from 'package.json';
 export const environment = {
 	production: true,
 	version: packageInfo.version,
+	iconRef: 'assets/icon/inanity.svg',
 };

src/environments/environment.ts

@@ -7,6 +7,7 @@ import packageInfo from 'package.json';
 export const environment = {
 	production: false,
 	version: packageInfo.version,
+	iconRef: 'assets/icon/inanity.dev.svg',
 };
 
 /*

src/index.html

@@ -5,13 +5,11 @@
 		<title>inanity</title>
 		<base href="/">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<meta name="theme-color" content="#ff6d6A">
+		<meta name="theme-color" content="#036ea6">
 
-		<link rel="icon" type="image/svg+xml" href="assets/icon/inanity.svg">
-		<link rel="icon" type="image/png" sizes="32x32" href="assets/icon/inanity-32.png">
-		<link rel="icon" type="image/png" sizes="16x16" href="assets/icon/inanity-16.png">
-		<link rel="icon" type="apple-touch-icon" href="assets/icon/inanity-180.png">
-		<link rel="manifest" href="manifest.webmanifest">
+		<link rel="icon" type="image/svg+xml" sizes="any" href="assets/icon/inanity.svg" id="favicon">
+		<link rel="icon" type="apple-touch-icon" sizes="180x180" href="assets/icon/inanity-180.png">
+		<link rel="manifest" href=".webmanifest">
 
 		<link href="https://fonts.googleapis.com/css?family=Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
 		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">