tea/browsertrix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adds favicons! (#1584)

Browse Source 
Closes #328 

## Changes

The app has favicons now!

Added:
- SVG 
- Changes to slightly brighter colours in dark mode for better contrast!
- Fallback ICO
- `apple-touch-icon` (some browsers also use this, not just iOS)
- Web manifest with app description
- Two web manifest icon sizes should users add the app to their local
launcher (Windows' Start or macOS' Dock / Launchpad
  - Lighting & render by @emma-sg, thanks!

The manifest and icons are copied to the root directory at build time by
webpack. All of the dedicated ways of doing this seemed more complicated
than this?

---------
Co-authored-by: emma <hi@emma.cafe>
This commit is contained in:
Henry Wilkinson 2024-03-16 18:11:31 -04:00 committed by GitHub
parent fa194c3d0d
commit 1093aa959f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 28 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/package.json
View File

@ -116,7 +116,7 @@
"prettier --write",
"eslint --fix --quiet"
],
"*.{html,css,json}": "prettier --write"
"*.{html,css,json,webmanifest}": "prettier --write"
},
"husky": {
"hooks": {

BIN
frontend/src/assets/favicons/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
frontend/src/assets/favicons/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

1
frontend/src/assets/favicons/favicon.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><style>.b{fill:#0891b2}.g{fill:#4d7c0f}@media (prefers-color-scheme:dark){.b{fill:#0aaed7}.g{fill:#65a414}}</style><path d="M28.47 17.03a.33.33 0 0 0 0 .6 3.67 3.67 0 0 1 0 6.73.33.33 0 0 0 0 .61 3.67 3.67 0 1 1-4.83 4.83.33.33 0 0 0-.61 0 3.67 3.67 0 0 1-6.73 0 .33.33 0 0 0-.6 0 3.67 3.67 0 0 1-6.73 0 .33.33 0 0 0-.6 0 3.67 3.67 0 1 1-4.84-4.83.33.33 0 0 0 0-.6 3.67 3.67 0 0 1 0-6.73.33.33 0 0 0 0-.61 3.67 3.67 0 1 1 4.83-4.83.33.33 0 0 0 .61 0 3.67 3.67 0 0 1 6.72 0 .33.33 0 0 0 .62 0 3.67 3.67 0 0 1 6.72 0 .33.33 0 0 0 .6 0 3.67 3.67 0 1 1 4.84 4.83m-19.5-1.9a.33.33 0 0 0-.6 0 3.68 3.68 0 0 1-1.9 1.9.33.33 0 0 0 0 .6 3.68 3.68 0 0 1 1.9 1.9.33.33 0 0 0 .6 0 3.68 3.68 0 0 1 1.9-1.9.33.33 0 0 0 0-.6 3.68 3.68 0 0 1-1.9-1.9m14.67 7.34a.33.33 0 0 0-.61 0 3.68 3.68 0 0 1-1.9 1.9.33.33 0 0 0 0 .6 3.68 3.68 0 0 1 1.9 1.9.33.33 0 0 0 .6 0 3.68 3.68 0 0 1 1.9-1.9.33.33 0 0 0 0-.6 3.68 3.68 0 0 1-1.9-1.9Zm0-7.34a.33.33 0 0 0-.61 0 3.68 3.68 0 0 1-1.9 1.9.33.33 0 0 0 0 .6 3.68 3.68 0 0 1 1.9 1.9.33.33 0 0 0 .6 0 3.68 3.68 0 0 1 1.9-1.9.33.33 0 0 0 0-.6 3.68 3.68 0 0 1-1.9-1.9Zm-7.34 0a.33.33 0 0 0-.6 0 3.7 3.7 0 0 1-1.9 1.9.33.33 0 0 0 0 .6 3.7 3.7 0 0 1 1.9 1.9.33.33 0 0 0 .6 0 3.7 3.7 0 0 1 1.9-1.9.33.33 0 0 0 0-.6 3.7 3.7 0 0 1-1.9-1.9m-7.33 7.34a.33.33 0 0 0-.6 0 3.68 3.68 0 0 1-1.9 1.9.33.33 0 0 0 0 .6 3.68 3.68 0 0 1 1.9 1.9.33.33 0 0 0 .6 0 3.68 3.68 0 0 1 1.9-1.9.33.33 0 0 0 0-.6 3.68 3.68 0 0 1-1.9-1.9m7.33 0a.33.33 0 0 0-.6 0 3.7 3.7 0 0 1-1.9 1.9.33.33 0 0 0 0 .6 3.7 3.7 0 0 1 1.9 1.9.33.33 0 0 0 .6 0 3.7 3.7 0 0 1 1.9-1.9.33.33 0 0 0 0-.6 3.7 3.7 0 0 1-1.9-1.9" class="g"/><path d="M23.64 5.13a.33.33 0 0 0-.61 0 3.67 3.67 0 0 1-6.73 0 .33.33 0 0 0-.6 0 3.67 3.67 0 0 1-6.73 0 .33.33 0 0 0-.6 0 3.67 3.67 0 1 1 0-2.93.33.33 0 0 0 .6 0 3.67 3.67 0 0 1 6.72 0 .33.33 0 0 0 .62 0 3.67 3.67 0 0 1 6.72 0 .33.33 0 0 0 .6 0 3.67 3.67 0 1 1 0 2.93Z" class="b"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
frontend/src/assets/favicons/icon-192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
frontend/src/assets/favicons/icon-512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

5
frontend/src/index.ejs
View File

@ -13,6 +13,11 @@
src="https://browser.sentry-cdn.com/5.5.0/bundle.min.js"
crossorigin="anonymous"
></script>
<meta name="theme-color" content="#ffffff">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
</head>
<body>
<browsertrix-app

11
frontend/src/manifest.webmanifest Normal file
View File

@ -0,0 +1,11 @@
{
"name": "Browsertrix",
"short_name": "Browsertrix",
"display": "browser",
"background_color": "#fff",
"description": "Automated Browser-Based Crawling at Scale.",
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}

10
frontend/webpack.config.js
View File

@ -201,6 +201,16 @@ const main = {
from: path.resolve(__dirname, "src/assets/icons"),
to: path.resolve(__dirname, "dist", "assets/icons"),
},
// Copy favicons to root
{
from: path.resolve(__dirname, "src/assets/favicons"),
to: path.resolve(__dirname, "dist"),
},
// Copy app manifest
{
from: path.resolve(__dirname, "src/manifest.webmanifest"),
to: path.resolve(__dirname, "dist"),
},
],
}),
...(process.env.BUNDLE_ANALYZER