fixed apple-touch-icon rel (#214)

* fixed apple-touch-icon * fix `removeFavicon` check
kubikowski · Aug 3, 2021 · 8db6116 · 8db6116
1 parent 18f96e1
commit 8db6116
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git a/src/app/core/browser/favicon.service.ts b/src/app/core/browser/favicon.service.ts
@@ -18,7 +18,7 @@ export class FaviconService {
 	}
 
 	private replaceFavicon(faviconRef: FaviconRef): void {
-		const favicon = this.svgFavicon;
+		const favicon = this.favicon;
 
 		if (favicon?.getAttribute('href') !== faviconRef) {
 			this.removeFavicon(favicon);
@@ -27,33 +27,25 @@ export class FaviconService {
 	}
 
 	private removeFavicon(favicon: HTMLLinkElement): void {
-		if (typeof favicon !== 'undefined') {
+		if (favicon instanceof HTMLLinkElement) {
 			this.renderer.removeChild(this.head, favicon);
 		}
 	}
 
 	private addFavicon(faviconRef: FaviconRef): void {
 		const favicon = this.renderer.createElement('link');
 
-		this.renderer.setAttribute(favicon, 'rel', 'icon');
-		this.renderer.setAttribute(favicon, 'type', 'image/svg+xml');
-		this.renderer.setAttribute(favicon, 'sizes', 'any');
-		this.renderer.setAttribute(favicon, 'href', faviconRef);
+		FaviconRef.getAttributes(faviconRef).forEach(([ attribute, value ]) =>
+			this.renderer.setAttribute(favicon, attribute, value));
 
 		this.renderer.insertBefore(this.head, favicon, this.appleTouchIcon);
 	}
 
-	private get svgFavicon(): HTMLLinkElement {
-		return Array.from(this.favicons)
-			.find(favicon => favicon.getAttribute('type') === 'image/svg+xml');
+	private get favicon(): HTMLLinkElement {
+		return this.head.querySelector('link[rel="icon"]');
 	}
 
 	private get appleTouchIcon(): HTMLLinkElement {
-		return Array.from(this.favicons)
-			.find(favicon => favicon.getAttribute('type') === 'apple-touch-icon');
-	}
-
-	private get favicons(): NodeListOf<HTMLLinkElement> {
-		return this.head.querySelectorAll('link[rel="icon"]');
+		return this.head.querySelector('link[rel="apple-touch-icon"]');
 	}
 }
diff --git a/src/app/core/svg/favicon-ref.enum.ts b/src/app/core/svg/favicon-ref.enum.ts
@@ -11,4 +11,13 @@ export namespace FaviconRef {
 			? FaviconRef.PROD_DEFAULT
 			: FaviconRef.DEV_DEFAULT;
 	}
+
+	export function getAttributes(faviconRef: FaviconRef): [ string, string ][] {
+		return Object.entries({
+			rel: 'icon',
+			type: 'image/svg+xml',
+			sizes: 'any',
+			href: faviconRef,
+		});
+	}
 }
diff --git a/src/index.html b/src/index.html
@@ -8,7 +8,7 @@
 		<meta name="theme-color" content="#036ea6">
 
 		<link rel="icon" type="image/svg+xml" sizes="any" href="assets/icon/inanity.svg">
-		<link rel="icon" type="apple-touch-icon" sizes="180x180" href="assets/icon/inanity-180.png">
+		<link rel="apple-touch-icon" type="image/png" 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">