Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add SVG format option for favicon image #424

Merged
merged 2 commits into from
Mar 11, 2024
Merged

Add SVG format option for favicon image #424

merged 2 commits into from
Mar 11, 2024

Conversation

aduth
Copy link
Member

@aduth aduth commented Mar 11, 2024

🛠 Summary of changes

Adds a new SVG image format option to the set of existing favicon images.

Why?

  • Infinitely scalable
  • Smaller file size
  • With future browser support, simpler to implement vs. several size options (see current browser support)

The process for creating this was starting from login-gov-logo.svg, cropping to the badge shield (landed at 34x42 padded to 48x48), experimenting with padding options in-context, then minifying.

📜 Testing Plan

I tested this in identity-idp and compared against the live https://secure.login.gov

diff --git a/app/assets/images/favicons/favicon.svg b/app/assets/images/favicons/favicon.svg
new file mode 100644
index 0000000000..0ca5346abd
--- /dev/null
+++ b/app/assets/images/favicons/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#b51e23" d="M35.905 3h-11.91v42c11.3-5 15.25-11.48 16.25-13.5.187-.387.283-.811.28-1.24V7.62A4.62 4.62 0 0 0 35.905 3z"/><path fill="#e21d3e" d="M12.095 3a4.62 4.62 0 0 0-4.62 4.62v22.64a2.77 2.77 0 0 0 .28 1.24c1 2 5 8.53 16.24 13.5V3h-11.9z"/><path fill="#fff" d="M26.925 21.1c2.837-2.233 2.194-6.7-1.158-8.041s-6.899 1.45-6.384 5.023a4.69 4.69 0 0 0 1.742 3.018l-1.54 8.82c1.457.252 2.932.379 4.41.38 1.5.03 2.998-.07 4.48-.3l-1.55-8.9z"/></svg>
\ No newline at end of file
diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
index dfb2599f44..837d175790 100644
--- a/app/views/layouts/base.html.erb
+++ b/app/views/layouts/base.html.erb
@@ -46,2 +46,8 @@
       ) %>
+  <%= favicon_link_tag(
+        asset_path('favicons/favicon.svg'),
+        rel: 'icon',
+        sizes: 'any',
+        type: 'image/svg+xml',
+      ) %>
   <%= favicon_link_tag(

👀 Screenshots

In context comparison (left is SVG, right is current PNG):

Screenshot 2024-03-11 at 9 29 41 AM

SVG (294 bytes Brotli) PNG (413 bytes)
svg png

@aduth aduth requested a review from nickttng March 11, 2024 13:43
@aduth aduth merged commit b6f8f6a into main Mar 11, 2024
4 checks passed
@aduth aduth deleted the aduth-svg-favicon branch March 11, 2024 14:05
@aduth aduth mentioned this pull request Mar 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants