feat: implement Philippine Sun Swap brand logo and favicon

index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg?v=6" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Multi-Converter — Free, Client-Side Media & Developer Utilities</title>
     <meta name="description" content="Fast, 100% private in-browser conversions for Images (WebP/PNG/JPG), PDF bundling, CSV ⇄ JSON table grids, Markdown, Color palettes, and Developer Encoders." />
@@ -27,7 +27,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="apple-mobile-web-app-title" content="Multi-Converter" />
-    <link rel="apple-touch-icon" href="/favicon.svg" />
+    <link rel="apple-touch-icon" href="/favicon.svg?v=6" />
 
     <!-- Structured Data for Search Engines -->
     <script type="application/ld+json">

public/favicon.svg

@@ -1 +1,48 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filtLine truncated
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="256 124 512 512" width="64" height="64">
+  <defs>
+    <clipPath id="fav_disc"><circle r="128"/></clipPath>
+    <linearGradient id="fav_sun" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#FFD83A"/>
+      <stop offset="1" stop-color="#F5B800"/>
+    </linearGradient>
+    <filter id="fav_soft" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="6" stdDeviation="8" flood-color="#0b1f5c" flood-opacity="0.25"/>
+    </filter>
+  </defs>
+
+  <!-- Philippine sun + swap arrows icon -->
+  <g transform="translate(512 380)">
+    <g fill="url(#fav_sun)" filter="url(#fav_soft)">
+      <polygon points="-29.1,-147.1 0.0,-232.0 29.1,-147.1" />
+      <polygon points="35.5,-145.7 76.5,-184.8 77.9,-128.2" />
+      <polygon points="83.4,-124.6 164.0,-164.0 124.6,-83.4" />
+      <polygon points="128.2,-77.9 184.8,-76.5 145.7,-35.5" />
+      <polygon points="147.1,-29.1 232.0,0.0 147.1,29.1" />
+      <polygon points="145.7,35.5 184.8,76.5 128.2,77.9" />
+      <polygon points="124.6,83.4 164.0,164.0 83.4,124.6" />
+      <polygon points="77.9,128.2 76.5,184.8 35.5,145.7" />
+      <polygon points="29.1,147.1 0.0,232.0 -29.1,147.1" />
+      <polygon points="-35.5,145.7 -76.5,184.8 -77.9,128.2" />
+      <polygon points="-83.4,124.6 -164.0,164.0 -124.6,83.4" />
+      <polygon points="-128.2,77.9 -184.8,76.5 -145.7,35.5" />
+      <polygon points="-147.1,29.1 -232.0,0.0 -147.1,-29.1" />
+      <polygon points="-145.7,-35.5 -184.8,-76.5 -128.2,-77.9" />
+      <polygon points="-124.6,-83.4 -164.0,-164.0 -83.4,-124.6" />
+      <polygon points="-77.9,-128.2 -76.5,-184.8 -35.5,-145.7" />
+    </g>
+    <circle r="146" fill="#FCD116"/>
+    <g clip-path="url(#fav_disc)">
+      <rect x="-130" y="-130" width="260" height="260" fill="#0038A8"/>
+      <polygon points="130,-130 130,130 -130,130" fill="#CE1126"/>
+    </g>
+    <circle r="128" fill="none" stroke="#fff" stroke-width="5" opacity="0.9"/>
+    <g fill="none" stroke="#fff" stroke-width="17" stroke-linecap="round">
+      <path d="M-62.0 -22.6 A66 66 0 0 1 37.9 -54.1"/>
+      <path d="M62.0 22.6 A66 66 0 0 1 -37.9 54.1"/>
+    </g>
+    <g fill="#fff" stroke="#fff" stroke-width="4" stroke-linejoin="round">
+      <polygon points="24.1,-34.4 62.4,-36.9 51.6,-73.7"/>
+      <polygon points="-24.1,34.4 -62.4,36.9 -51.6,73.7"/>
+    </g>
+  </g>
+</svg>

public/manifest.json

@@ -12,7 +12,7 @@
   "categories": ["utilities", "productivity", "developer tools"],
   "icons": [
     {
-      "src": "/favicon.svg",
+      "src": "/favicon.svg?v=6",
       "sizes": "48x48 72x72 96x96 128x128 192x192 256x256 512x512",
       "type": "image/svg+xml",
       "purpose": "any maskable"

public/sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'mc-cache-v2';
+const CACHE_NAME = 'mc-cache-v6';
 const PRECACHE_ASSETS = [
   '/',
   '/index.html',

src/App.tsx

@@ -14,7 +14,6 @@ import {
   Sun,
   Moon,
   Shield,
-  Layers,
   ChevronRight,
   RotateCcw,
   Share2,
@@ -35,6 +34,7 @@ import {
 import { AdSlot } from './components/AdSlot';
 import { CategoryFilter } from './components/CategoryFilter';
 import { PrivacyModal } from './components/PrivacyModal';
+import { BrandLogo } from './components/BrandLogo';
 import type {
   ToolType,
   ConversionResult,
@@ -277,6 +277,10 @@ export function App() {
         window.history.replaceState(null, '', `#${activeTool}`);
       }
     }
+    const favLink = document.querySelector<HTMLLinkElement>("link[rel*='icon']");
+    if (favLink && !favLink.href.includes('v=6')) {
+      favLink.href = '/favicon.svg?v=6';
+    }
   }, [activeTool, currentToolMeta]);
 
   // Listen to browser Back / Forward navigation
@@ -675,17 +679,10 @@ export function App() {
       <header className="border-b border-neutral-200/80 dark:border-neutral-800/80 bg-white/70 dark:bg-neutral-900/60 backdrop-blur-md sticky top-0 z-30">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <div className="w-8 h-8 rounded-lg bg-neutral-900 dark:bg-neutral-100 flex items-center justify-center text-white dark:text-neutral-900">
+            <BrandLogo size="md" showWordmark={true} />
-              <Layers className="w-4 h-4 stroke-[2.2]" />
+            <span className="hidden md:inline-block text-xs text-neutral-400 dark:text-neutral-500 font-mono border-l border-neutral-200 dark:border-neutral-800 pl-3 py-0.5">
-            </div>
+              client-local
-            <div>
+            </span>
-              <span className="font-semibold tracking-tight text-sm sm:text-base text-neutral-950 dark:text-neutral-50">
-                Multi-Converter
-              </span>
-              <span className="hidden sm:inline-block ml-2 text-xs text-neutral-400 dark:text-neutral-500 font-mono">
-                client-local
-              </span>
-            </div>
           </div>
 
           <div className="flex items-center gap-2.5 sm:gap-3">
@@ -2644,7 +2641,11 @@ export function App() {
       {/* Minimal Footer */}
       <footer className="border-t border-neutral-200/60 dark:border-neutral-800/60 py-6 px-4 text-center text-xs text-neutral-400 dark:text-neutral-500">
         <div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-3">
-          <span>Multi-Converter • Client-Side Utility Platform</span>
+          <div className="flex items-center gap-2">
+            <BrandLogo size="sm" showWordmark={true} />
+            <span className="hidden sm:inline text-neutral-300 dark:text-neutral-700">•</span>
+            <span className="hidden sm:inline">Client-Side Utility Platform</span>
+          </div>
           <div className="flex items-center gap-4">
             <span>Ethical Ads • No Tracking</span>
             <button

src/components/BrandLogo.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+
+interface BrandLogoProps {
+  size?: 'sm' | 'md' | 'lg' | number;
+  showWordmark?: boolean;
+  className?: string;
+}
+
+export const BrandLogo: React.FC<BrandLogoProps> = ({
+  size = 'md',
+  showWordmark = true,
+  className = '',
+}) => {
+  let iconSize = 36;
+  if (typeof size === 'number') {
+    iconSize = size;
+  } else if (size === 'sm') {
+    iconSize = 28;
+  } else if (size === 'lg') {
+    iconSize = 48;
+  }
+
+  return (
+    <div className={`inline-flex items-center gap-2.5 select-none ${className}`}>
+      {/* Philippine Sun & Converter Swap Disc */}
+      <svg
+        width={iconSize}
+        height={iconSize}
+        viewBox="256 124 512 512"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="shrink-0 drop-shadow-xs transition-transform duration-200 hover:scale-105"
+      >
+        <defs>
+          <clipPath id="bl_disc">
+            <circle r="128" />
+          </clipPath>
+          <linearGradient id="bl_sun" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0" stopColor="#FFD83A" />
+            <stop offset="1" stopColor="#F5B800" />
+          </linearGradient>
+          <filter id="bl_soft" x="-20%" y="-20%" width="140%" height="140%">
+            <feDropShadow dx="0" dy="6" stdDeviation="8" floodColor="#0b1f5c" floodOpacity="0.25" />
+          </filter>
+        </defs>
+
+        <g transform="translate(512 380)">
+          {/* 16-point Philippine Sun Rays */}
+          <g fill="url(#bl_sun)" filter="url(#bl_soft)">
+            <polygon points="-29.1,-147.1 0.0,-232.0 29.1,-147.1" />
+            <polygon points="35.5,-145.7 76.5,-184.8 77.9,-128.2" />
+            <polygon points="83.4,-124.6 164.0,-164.0 124.6,-83.4" />
+            <polygon points="128.2,-77.9 184.8,-76.5 145.7,-35.5" />
+            <polygon points="147.1,-29.1 232.0,0.0 147.1,29.1" />
+            <polygon points="145.7,35.5 184.8,76.5 128.2,77.9" />
+            <polygon points="124.6,83.4 164.0,164.0 83.4,124.6" />
+            <polygon points="77.9,128.2 76.5,184.8 35.5,145.7" />
+            <polygon points="29.1,147.1 0.0,232.0 -29.1,147.1" />
+            <polygon points="-35.5,145.7 -76.5,184.8 -77.9,128.2" />
+            <polygon points="-83.4,124.6 -164.0,164.0 -124.6,83.4" />
+            <polygon points="-128.2,77.9 -184.8,76.5 -145.7,35.5" />
+            <polygon points="-147.1,29.1 -232.0,0.0 -147.1,-29.1" />
+            <polygon points="-145.7,-35.5 -184.8,-76.5 -128.2,-77.9" />
+            <polygon points="-124.6,-83.4 -164.0,-164.0 -83.4,-124.6" />
+            <polygon points="-77.9,-128.2 -76.5,-184.8 -35.5,-145.7" />
+          </g>
+
+          {/* Golden Rim */}
+          <circle r="146" fill="#FCD116" />
+
+          {/* Philippine Flag Two-Tone Core (Blue & Red) */}
+          <g clipPath="url(#bl_disc)">
+            <rect x="-130" y="-130" width="260" height="260" fill="#0038A8" />
+            <polygon points="130,-130 130,130 -130,130" fill="#CE1126" />
+          </g>
+
+          {/* Inner Accent Ring */}
+          <circle r="128" fill="none" stroke="#fff" strokeWidth="5" opacity="0.9" />
+
+          {/* Bidirectional Swap Arcs */}
+          <g fill="none" stroke="#fff" strokeWidth="17" strokeLinecap="round">
+            <path d="M-62.0 -22.6 A66 66 0 0 1 37.9 -54.1" />
+            <path d="M62.0 22.6 A66 66 0 0 1 -37.9 54.1" />
+          </g>
+
+          {/* Swap Arrow Heads */}
+          <g fill="#fff" stroke="#fff" strokeWidth="4" strokeLinejoin="round">
+            <polygon points="24.1,-34.4 62.4,-36.9 51.6,-73.7" />
+            <polygon points="-24.1,34.4 -62.4,36.9 -51.6,73.7" />
+          </g>
+        </g>
+      </svg>
+
+      {/* Brand Wordmark matching the Philippine flag theme */}
+      {showWordmark && (
+        <div className="flex flex-col leading-none">
+          <div className="flex items-center gap-1">
+            <span className="font-extrabold tracking-tight text-base sm:text-lg text-[#0038A8] dark:text-[#60A5FA]">
+              isal
+            </span>
+            <span className="w-2 h-2 rounded-full bg-[#F5B800] inline-block shadow-xs" />
+            <span className="font-extrabold tracking-tight text-base sm:text-lg text-[#CE1126] dark:text-[#F87171]">
+              in
+            </span>
+          </div>
+          <span className="text-[9px] font-mono tracking-widest uppercase text-neutral-400 dark:text-neutral-500 font-medium">
+            Multi-Converter
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BrandLogo;