From b65ad70f5358fbf5bef2875111d5f58bd39854b8 Mon Sep 17 00:00:00 2001 From: Jan-Eric Schober Date: Mon, 23 May 2022 17:54:48 +0200 Subject: [PATCH] Add the possibility to allow the user to have a favicon which differs from the main logo (#18542) * Changed the filename of the favicon SVG This allows the user to have a favicon which differs from the logo. * Added favicon.svg This is needed to accommodate the changes for allowing the user to have a differing logo and favicon * Adjusted page to accommodate what icon is used as favicon * Added functionality to also generate the favicon.svg via generate-images.js * Adjusted the description for the new favicon compatibility Co-authored-by: silverwind * Updated generate-images.js to generate favicons from a separate favicons.svg file This belongs to PR #18542. * Added description on how custom favicons can be generated * Replaced space indents with tabs * Synced changes with current state of the file * Synced changes with current state of the file Co-authored-by: silverwind Co-authored-by: zeripath Co-authored-by: Lunny Xiao Co-authored-by: Lauris BH --- assets/favicon.svg | 31 +++++++++++++++++++ build/generate-images.js | 17 +++++----- .../doc/advanced/customizing-gitea.en-us.md | 9 +++--- templates/base/head.tmpl | 2 +- 4 files changed, 47 insertions(+), 12 deletions(-) create mode 100644 assets/favicon.svg diff --git a/assets/favicon.svg b/assets/favicon.svg new file mode 100644 index 0000000000..9df6b83b56 --- /dev/null +++ b/assets/favicon.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + diff --git a/build/generate-images.js b/build/generate-images.js index b8284b1be2..0a91d896a8 100755 --- a/build/generate-images.js +++ b/build/generate-images.js @@ -8,6 +8,7 @@ import {fileURLToPath} from 'url'; const {readFile, writeFile} = fs.promises; const __dirname = dirname(fileURLToPath(import.meta.url)); const logoFile = resolve(__dirname, '../assets/logo.svg'); +const faviconFile = resolve(__dirname, '../assets/favicon.svg'); function exit(err) { if (err) console.error(err); @@ -68,15 +69,17 @@ async function generate(svg, outputFile, {size, bg}) { async function main() { const gitea = process.argv.slice(2).includes('gitea'); - const svg = await readFile(logoFile, 'utf8'); + const logoSvg = await readFile(logoFile, 'utf8'); + const faviconSvg = await readFile(faviconFile, 'utf8'); await Promise.all([ - generate(svg, resolve(__dirname, '../public/img/logo.svg'), {size: 32}), - generate(svg, resolve(__dirname, '../public/img/logo.png'), {size: 512}), - generate(svg, resolve(__dirname, '../public/img/favicon.png'), {size: 180}), - generate(svg, resolve(__dirname, '../public/img/avatar_default.png'), {size: 200}), - generate(svg, resolve(__dirname, '../public/img/apple-touch-icon.png'), {size: 180, bg: true}), - gitea && generate(svg, resolve(__dirname, '../public/img/gitea.svg'), {size: 32}), + generate(logoSvg, resolve(__dirname, '../public/img/logo.svg'), {size: 32}), + generate(logoSvg, resolve(__dirname, '../public/img/logo.png'), {size: 512}), + generate(faviconSvg, resolve(__dirname, '../public/img/favicon.svg'), {size: 32}), + generate(faviconSvg, resolve(__dirname, '../public/img/favicon.png'), {size: 180}), + generate(logoSvg, resolve(__dirname, '../public/img/avatar_default.png'), {size: 200}), + generate(logoSvg, resolve(__dirname, '../public/img/apple-touch-icon.png'), {size: 180, bg: true}), + gitea && generate(logoSvg, resolve(__dirname, '../public/img/gitea.svg'), {size: 32}), ]); } diff --git a/docs/content/doc/advanced/customizing-gitea.en-us.md b/docs/content/doc/advanced/customizing-gitea.en-us.md index ef798ddbf9..b97ba03482 100644 --- a/docs/content/doc/advanced/customizing-gitea.en-us.md +++ b/docs/content/doc/advanced/customizing-gitea.en-us.md @@ -60,14 +60,15 @@ the url `http://gitea.domain.tld/assets/image.png`. ## Changing the logo -To build a custom logo clone the Gitea source repository, replace `assets/logo.svg` and run -`make generate-images`. This will update below output files which you can then place in `$GITEA_CUSTOM/public/img` on your server: +To build a custom logo and/or favicon clone the Gitea source repository, replace `assets/logo.svg` and/or `assets/favicon.svg` and run +`make generate-images`. `assets/favicon.svg` is used for the favicon only. This will update below output files which you can then place in `$GITEA_CUSTOM/public/img` on your server: -- `public/img/logo.svg` - Used for favicon, site icon, app icon +- `public/img/logo.svg` - Used for site icon, app icon - `public/img/logo.png` - Used for Open Graph -- `public/img/favicon.png` - Used as fallback for browsers that don't support SVG favicons - `public/img/avatar_default.png` - Used as the default avatar image - `public/img/apple-touch-icon.png` - Used on iOS devices for bookmarks +- `public/img/favicon.svg` - Used for favicon +- `public/img/favicon.png` - Used as fallback for browsers that don't support SVG favicons In case the source image is not in vector format, you can attempt to convert a raster image using tools like [this](https://www.aconvert.com/image/png-to-svg/). diff --git a/templates/base/head.tmpl b/templates/base/head.tmpl index 7d64c88251..e75531746a 100644 --- a/templates/base/head.tmpl +++ b/templates/base/head.tmpl @@ -19,7 +19,7 @@ {{end}} - + {{template "base/head_script" .}}