cgasser/web_marszalekarchitekten
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add favicon: M monogram on green background

Browse Source 
SVG master + PNG exports at 16x16, 32x32 and 180x180 (Apple touch icon).
Generated via puppeteer from favicon.svg. Wired into <head> and Dockerfile.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
cgasser
2026-05-22 12:11:01 +02:00
parent c545b464fa
commit 088d76441c
7 changed files with 51 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Dockerfile
View File

@@ -4,5 +4,6 @@ COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY index.html /usr/share/nginx/html/
COPY marszalek-architekten-infosheet.pdf /usr/share/nginx/html/
COPY images/ /usr/share/nginx/html/images/
COPY favicon.svg favicon-16x16.png favicon-32x32.png apple-touch-icon.png /usr/share/nginx/html/
EXPOSE 80

BIN
apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 337 B

BIN
favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 564 B

6
favicon.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<!-- Green background with rounded corners -->
<rect width="100" height="100" rx="14" fill="#99cc00"/>
<!-- M lettermark as geometric path: two legs + V notch in the centre -->
<path d="M12,88 L12,12 L24,12 L50,56 L76,12 L88,12 L88,88 L76,88 L76,28 L50,72 L24,28 L24,88 Z" fill="#0f0f0f"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 368 B

40
generate-favicons.js Normal file
View File

@@ -0,0 +1,40 @@
const puppeteer = require('puppeteer-core');
const path = require('path');
const fs = require('fs');
const CHROME = 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe';
const SVG = fs.readFileSync(path.join(__dirname, 'favicon.svg'), 'utf8');
const sizes = [
{ name: 'favicon-16x16.png', px: 16 },
{ name: 'favicon-32x32.png', px: 32 },
{ name: 'apple-touch-icon.png', px: 180 },
];
(async () => {
const browser = await puppeteer.launch({
executablePath: CHROME,
headless: 'new',
args: ['--no-sandbox'],
});
const page = await browser.newPage();
for (const { name, px } of sizes) {
await page.setViewport({ width: px, height: px, deviceScaleFactor: 1 });
await page.setContent(`<!DOCTYPE html>
<html><head><style>
*{margin:0;padding:0;background:transparent}
body{width:${px}px;height:${px}px;overflow:hidden}
img{width:${px}px;height:${px}px}
</style></head><body>
<img src="data:image/svg+xml;base64,${Buffer.from(SVG).toString('base64')}">
</body></html>`);
await page.waitForNetworkIdle();
const out = path.join(__dirname, name);
await page.screenshot({ path: out, clip: { x: 0, y: 0, width: px, height: px }, omitBackground: true });
console.log(`OK ${name} (${px}x${px})`);
}
await browser.close();
})();

4
index.html
View File

@@ -4,6 +4,10 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Marszalek Architekten Perchtoldsdorf – Ihr Architekt für Neubau und Umbau in Wien und Niederösterreich.">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<title>Marszalek Architekten · Perchtoldsdorf</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>