Merge pull request #562 from lumeland/fix/favicon

refactor(plugin/favicon): preferred svg icon
lumeland · Jan 27, 2024 · ae97ef4 · ae97ef4
2 parents 88f87ab + 5530455
commit ae97ef4
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,10 @@ Go to the `v1` branch to see the changelog of Lume 1.
 - New plugin: `fff` [#529].
 - New plugin: `redirects` [#534].
 - `onDemand` plugin: support async extraData function.
+- `favicon` plugin: [#562]
+  - Default ico size changed to 48.
+  - Add `sizes="any"` to the svg icon.
+  - Place the svg icon at end.
 
 ### Changed
 - BREAKING: Removed deprecated `--unstable` flag to the default `lume` task.
@@ -258,6 +262,7 @@ Go to the `v1` branch to see the changelog of Lume 1.
 [#550]: /~https://github.com/lumeland/lume/issues/550
 [#551]: /~https://github.com/lumeland/lume/issues/551
 [#552]: /~https://github.com/lumeland/lume/issues/552
+[#562]: /~https://github.com/lumeland/lume/issues/562
 
 [2.1.0]: /~https://github.com/lumeland/lume/compare/v2.0.3...HEAD
 [2.0.3]: /~https://github.com/lumeland/lume/compare/v2.0.2...v2.0.3

diff --git a/plugins/favicon.ts b/plugins/favicon.ts
@@ -31,7 +31,7 @@ export const defaults: Options = {
   favicons: [
     {
       url: "/favicon.ico",
-      size: [16, 32],
+      size: [48],
       rel: "icon",
       format: "ico",
     },
@@ -117,21 +117,22 @@ export default function (userOptions?: Options) {
       for (const page of pages) {
         const document = page.document!;
 
-        if (options.input.endsWith(".svg")) {
-          addIcon(document, {
-            rel: "icon",
-            href: site.url(options.input),
-            type: "image/svg+xml",
-          });
-        }
-
         for (const favicon of options.favicons) {
           addIcon(document, {
             rel: favicon.rel,
             sizes: favicon.size.map((s) => `${s}x${s}`).join(" "),
             href: site.url(favicon.url),
           });
         }
+
+        if (options.input.endsWith(".svg")) {
+          addIcon(document, {
+            rel: "icon",
+            sizes: "any",
+            href: site.url(options.input),
+            type: "image/svg+xml",
+          });
+        }
       }
     });
   };

diff --git a/tests/__snapshots__/favicon.test.ts.snap b/tests/__snapshots__/favicon.test.ts.snap
@@ -139,10 +139,10 @@ snapshot[`favicon plugin 3`] = `
     },
   },
   {
-    content: "Uint8Array(905)",
+    content: "Uint8Array(765)",
     data: {
       basename: "favicon",
-      content: "Uint8Array(905)",
+      content: "Uint8Array(765)",
       page: [
         "src",
         "data",
@@ -196,9 +196,9 @@ snapshot[`favicon plugin 3`] = `
     content: '<!DOCTYPE html>
 <html><head>
     <title>Hello world</title>
-  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
-<link rel="icon" sizes="16x16 32x32" href="/favicon.ico">
+  <link rel="icon" sizes="48x48" href="/favicon.ico">
 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+<link rel="icon" sizes="any" href="/favicon.svg" type="image/svg+xml">
 </head>
   <body>