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 <me@silverwind.io> * 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 <me@silverwind.io> Co-authored-by: zeripath <art27@cantab.net> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Lauris BH <lauris@nix.lv>
This commit is contained in:
parent
d2a91e5e59
commit
b65ad70f53
4 changed files with 47 additions and 12 deletions
31
assets/favicon.svg
Normal file
31
assets/favicon.svg
Normal file
|
@ -0,0 +1,31 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" id="main_outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||||
|
y="0px" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640;" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<path id="teabag" style="fill:#FFFFFF" d="M395.9,484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5,21.2-17.9,33.8-11.8
|
||||||
|
c17.2,8.3,27.1,13,27.1,13l-0.1-109.2l16.7-0.1l0.1,117.1c0,0,57.4,24.2,83.1,40.1c3.7,2.3,10.2,6.8,12.9,14.4
|
||||||
|
c2.1,6.1,2,13.1-1,19.3l-61,126.9C423.6,484.9,408.4,490.3,395.9,484.2z"/>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path style="fill:#609926" d="M622.7,149.8c-4.1-4.1-9.6-4-9.6-4s-117.2,6.6-177.9,8c-13.3,0.3-26.5,0.6-39.6,0.7c0,39.1,0,78.2,0,117.2
|
||||||
|
c-5.5-2.6-11.1-5.3-16.6-7.9c0-36.4-0.1-109.2-0.1-109.2c-29,0.4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5
|
||||||
|
c-9.8-0.6-22.5-2.1-39,1.5c-8.7,1.8-33.5,7.4-53.8,26.9C-4.9,212.4,6.6,276.2,8,285.8c1.7,11.7,6.9,44.2,31.7,72.5
|
||||||
|
c45.8,56.1,144.4,54.8,144.4,54.8s12.1,28.9,30.6,55.5c25,33.1,50.7,58.9,75.7,62c63,0,188.9-0.1,188.9-0.1s12,0.1,28.3-10.3
|
||||||
|
c14-8.5,26.5-23.4,26.5-23.4s12.9-13.8,30.9-45.3c5.5-9.7,10.1-19.1,14.1-28c0,0,55.2-117.1,55.2-231.1
|
||||||
|
C633.2,157.9,624.7,151.8,622.7,149.8z M125.6,353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6,321.8,60,295.4
|
||||||
|
c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5,38.5-30c13.8-3.7,31-3.1,31-3.1s7.1,59.4,15.7,94.2c7.2,29.2,24.8,77.7,24.8,77.7
|
||||||
|
S142.5,359.9,125.6,353.9z M425.9,461.5c0,0-6.1,14.5-19.6,15.4c-5.8,0.4-10.3-1.2-10.3-1.2s-0.3-0.1-5.3-2.1l-112.9-55
|
||||||
|
c0,0-10.9-5.7-12.8-15.6c-2.2-8.1,2.7-18.1,2.7-18.1L322,273c0,0,4.8-9.7,12.2-13c0.6-0.3,2.3-1,4.5-1.5c8.1-2.1,18,2.8,18,2.8
|
||||||
|
l110.7,53.7c0,0,12.6,5.7,15.3,16.2c1.9,7.4-0.5,14-1.8,17.2C474.6,363.8,425.9,461.5,425.9,461.5z"/>
|
||||||
|
<path style="fill:#609926" d="M326.8,380.1c-8.2,0.1-15.4,5.8-17.3,13.8c-1.9,8,2,16.3,9.1,20c7.7,4,17.5,1.8,22.7-5.4
|
||||||
|
c5.1-7.1,4.3-16.9-1.8-23.1l24-49.1c1.5,0.1,3.7,0.2,6.2-0.5c4.1-0.9,7.1-3.6,7.1-3.6c4.2,1.8,8.6,3.8,13.2,6.1
|
||||||
|
c4.8,2.4,9.3,4.9,13.4,7.3c0.9,0.5,1.8,1.1,2.8,1.9c1.6,1.3,3.4,3.1,4.7,5.5c1.9,5.5-1.9,14.9-1.9,14.9
|
||||||
|
c-2.3,7.6-18.4,40.6-18.4,40.6c-8.1-0.2-15.3,5-17.7,12.5c-2.6,8.1,1.1,17.3,8.9,21.3c7.8,4,17.4,1.7,22.5-5.3
|
||||||
|
c5-6.8,4.6-16.3-1.1-22.6c1.9-3.7,3.7-7.4,5.6-11.3c5-10.4,13.5-30.4,13.5-30.4c0.9-1.7,5.7-10.3,2.7-21.3
|
||||||
|
c-2.5-11.4-12.6-16.7-12.6-16.7c-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3c4.7-9.7,9.4-19.3,14.1-29
|
||||||
|
c-4.1-2-8.1-4-12.2-6.1c-4.8,9.8-9.7,19.7-14.5,29.5c-6.7-0.1-12.9,3.5-16.1,9.4c-3.4,6.3-2.7,14.1,1.9,19.8
|
||||||
|
C343.2,346.5,335,363.3,326.8,380.1z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 2.5 KiB |
|
@ -8,6 +8,7 @@ import {fileURLToPath} from 'url';
|
||||||
const {readFile, writeFile} = fs.promises;
|
const {readFile, writeFile} = fs.promises;
|
||||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||||
const logoFile = resolve(__dirname, '../assets/logo.svg');
|
const logoFile = resolve(__dirname, '../assets/logo.svg');
|
||||||
|
const faviconFile = resolve(__dirname, '../assets/favicon.svg');
|
||||||
|
|
||||||
function exit(err) {
|
function exit(err) {
|
||||||
if (err) console.error(err);
|
if (err) console.error(err);
|
||||||
|
@ -68,15 +69,17 @@ async function generate(svg, outputFile, {size, bg}) {
|
||||||
|
|
||||||
async function main() {
|
async function main() {
|
||||||
const gitea = process.argv.slice(2).includes('gitea');
|
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([
|
await Promise.all([
|
||||||
generate(svg, resolve(__dirname, '../public/img/logo.svg'), {size: 32}),
|
generate(logoSvg, resolve(__dirname, '../public/img/logo.svg'), {size: 32}),
|
||||||
generate(svg, resolve(__dirname, '../public/img/logo.png'), {size: 512}),
|
generate(logoSvg, resolve(__dirname, '../public/img/logo.png'), {size: 512}),
|
||||||
generate(svg, resolve(__dirname, '../public/img/favicon.png'), {size: 180}),
|
generate(faviconSvg, resolve(__dirname, '../public/img/favicon.svg'), {size: 32}),
|
||||||
generate(svg, resolve(__dirname, '../public/img/avatar_default.png'), {size: 200}),
|
generate(faviconSvg, resolve(__dirname, '../public/img/favicon.png'), {size: 180}),
|
||||||
generate(svg, resolve(__dirname, '../public/img/apple-touch-icon.png'), {size: 180, bg: true}),
|
generate(logoSvg, resolve(__dirname, '../public/img/avatar_default.png'), {size: 200}),
|
||||||
gitea && generate(svg, resolve(__dirname, '../public/img/gitea.svg'), {size: 32}),
|
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}),
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -60,14 +60,15 @@ the url `http://gitea.domain.tld/assets/image.png`.
|
||||||
|
|
||||||
## Changing the logo
|
## Changing the logo
|
||||||
|
|
||||||
To build a custom logo clone the Gitea source repository, replace `assets/logo.svg` and run
|
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`. This will update below output files which you can then place in `$GITEA_CUSTOM/public/img` on your server:
|
`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/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/avatar_default.png` - Used as the default avatar image
|
||||||
- `public/img/apple-touch-icon.png` - Used on iOS devices for bookmarks
|
- `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/).
|
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/).
|
||||||
|
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
<link rel="alternate" type="application/atom+xml" title="" href="{{.FeedURL}}.atom">
|
<link rel="alternate" type="application/atom+xml" title="" href="{{.FeedURL}}.atom">
|
||||||
<link rel="alternate" type="application/rss+xml" title="" href="{{.FeedURL}}.rss">
|
<link rel="alternate" type="application/rss+xml" title="" href="{{.FeedURL}}.rss">
|
||||||
{{end}}
|
{{end}}
|
||||||
<link rel="icon" href="{{AssetUrlPrefix}}/img/logo.svg" type="image/svg+xml">
|
<link rel="icon" href="{{AssetUrlPrefix}}/img/favicon.svg" type="image/svg+xml">
|
||||||
<link rel="alternate icon" href="{{AssetUrlPrefix}}/img/favicon.png" type="image/png">
|
<link rel="alternate icon" href="{{AssetUrlPrefix}}/img/favicon.png" type="image/png">
|
||||||
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/index.css?v={{MD5 AppVer}}">
|
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/index.css?v={{MD5 AppVer}}">
|
||||||
{{template "base/head_script" .}}
|
{{template "base/head_script" .}}
|
||||||
|
|
Loading…
Reference in a new issue