feat(seo): update branding assets and improve performance

- Update avatar and default OG image with new design
- Add favicon in multiple sizes (16px, 32px, full)
- Move KaTeX CSS from CDN to local for better caching
- Add width/height attributes to images for CLS prevention
- Add lazy loading to blog list images

Author: ppippi-dev

public/favicon-16.png

@@ -30,8 +30,10 @@ const enURL = isEnglish
 <!-- Global Metadata -->
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
-<link rel="icon" type="image/x-icon" href="/favicon.ico" />
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="icon" type="image/png" href="/favicon.png" />
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
+<link rel="apple-touch-icon" href="/img/avatar.png" />
 <link rel="sitemap" href="/sitemap-index.xml" />
 <link
 	rel="alternate"
@@ -46,7 +48,7 @@ const enURL = isEnglish
 <link rel="preload" href="/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin />
 
 <!-- KaTeX CSS for math rendering -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
+<link rel="stylesheet" href="/styles/katex.min.css" />
 
 <!-- Canonical URL -->
 <link rel="canonical" href={canonicalURL} />

public/favicon-32.png

@@ -6,7 +6,7 @@ const today = new Date();
 	<div class="footer-content">
 		<span class="copyright">&copy; {today.getFullYear()} ppippi-dev</span>
 		<a href="https://buymeacoffee.com/ppippi" target="_blank" class="bmc-link">
-			<img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" />
+			<img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" width="130" height="36" />
 		</a>
 	</div>
 </footer>

public/favicon.png

@@ -156,7 +156,7 @@ const posts = (await getCollection('blog-en')).sort(
 						</div>
 						{post.data.heroImage && (
 							<a href={`/en/blog/${post.id}/`} class="post-image">
-								<img src={post.data.heroImage} alt={post.data.title} />
+								<img src={post.data.heroImage} alt={post.data.title} width="200" height="140" loading="lazy" />
 							</a>
 						)}
 					</article>