daonanchao/vibe-kanban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d17c41a73d2ba96dc634c8f74582a772baeaef09
vibe-kanban/frontend/public/favicon-vk-light.svg

22 lines
66 KiB
XML
Raw Normal View History

Darkmode favicon (vibe-kanban) (#811) * Done! I've created two favicon SVG files: - `frontend/public/favicon-v-light.svg` - Black "V" for light browser themes - `frontend/public/favicon-v-dark.svg` - White "V" for dark browser themes I extracted the "V" character path from your logo SVG, maintaining the exact same pixelated/bitmap style. The SVGs are optimized with a tight viewBox (40x74) that crops around just the "V" portion. The path data preserves the authentic look from your logo, so the favicon will be perfectly consistent with your brand. Ready for you to check them out! Perfect! I've updated both favicon SVG files to include the complete "V" character. Now both files have: - `favicon-v-light.svg` - Complete black "V" for light browser themes - `favicon-v-dark.svg` - Complete white "V" for dark browser themes The SVGs now have a width of 65 and include both the left and right strokes of the "V" that converge at the bottom, forming the complete letter as it appears in your logo. The path data preserves the exact pixelated/bitmap style from your original logo. The favicons should now show the full "V" shape with both diagonal strokes meeting at the bottom point! Done! I've successfully implemented the ultra-minimal SVG-only favicon setup: ✅ **Updated `frontend/index.html`** - Replaced all PNG/ICO favicon links with 2 SVG favicon links - Added automatic theme switching using media queries - Uses SVG for Apple touch icon too ✅ **Updated `site.webmanifest`** - Replaced PNG icons with SVG icons using `"sizes": "any"` - Added proper app name "Vibe Kanban" ✅ **Deleted 7 old icon files** - `android-chrome-192x192.png` (13KB) ❌ - `android-chrome-512x512.png` (55KB) ❌ - `apple-touch-icon.png` (12KB) ❌ - `favicon-16x16.png` (601B) ❌ - `favicon-32x32.png` (1.3KB) ❌ - `favicon.ico` (15KB) ❌ - `viba-kanban-favicon.png` (6.6KB) ❌ **Just 2 SVG files (6.4KB total)** now handle ALL icon needs: - Browser favicon with automatic dark/light switching - iOS home screen icon - Android PWA icons - Perfect scaling at any size - Zero JavaScript required The browser will automatically show the light "V" on light themes and the dark "V" on dark themes using native media queries. Clean and minimal! 🎉 * Perfect! Fixed. The PWA will now only use the light SVG (dark "V" on transparent background), so when macOS adds its white background you'll get a dark V on white = visible icon. ## What This Achieves ✅ **Browser favicon**: Still theme-aware switching (light/dark) via HTML media queries ✅ **PWA installation**: Now uses dark V on transparent → macOS adds white background → visible dark V ✅ **Keeps all SVG benefits**: Perfect scaling, small file size, clean approach The change is minimal but fixes the root issue. When you reinstall the PWA, it should now show the proper "V" icon instead of being blank white. * I've updated the manifest to specify `"sizes": "192x192"` instead of `"any"` for the SVG. This should give the PWA installation system the same size hint that the original PNG had. Try reinstalling/updating the PWA and see if that fixes the sizing issue. The explicit size might help the system render it with proper proportions like the original 192x192 PNG did. If it's still too big/cramped, we can modify the SVG itself to add padding around the "V" by expanding the viewBox while keeping the same content. Adding a maskable variant with padding is actually a great solution! This is exactly what maskable icons are designed for in PWA contexts. - PWA standard for adaptive icons that work across different OS styling - System can apply various shapes/masks (circle, rounded rectangle, etc.) - Requires a "safe zone" - the important content should be in the center ~80% of the canvas - Outer areas can be cropped/masked by the system Pretty straightforward! We'd need to: 1. **Expand the SVG canvas** - increase viewBox from `0 0 65 74` to something like `0 0 130 148` (roughly double) 2. **Center the existing "V" path** - translate it to sit in the middle of the larger canvas 3. **Update manifest** to specify it's maskable: ```json { "src": "/favicon-v-light-maskable.svg", "sizes": "192x192", "type": "image/svg+xml", "purpose": "maskable" } ``` - Take current `favicon-v-light.svg` - Wrap the existing path in a `<g transform="translate(32.5, 37)">` to center it - Change viewBox to `0 0 130 148` (adds ~32px padding all around) - Creates proper safe zone for maskable requirements - ✅ Fixes the "too big" PWA icon issue - ✅ Follows PWA best practices for adaptive icons - ✅ System can apply rounded corners, circles, etc. while keeping "V" safe - ✅ Single additional file (~3KB) This would be much cleaner than trying to hack sizing in the manifest! Done! I've created `favicon-v-light-maskable.svg` with proper padding for PWA contexts. The new maskable SVG: - Doubles the canvas size from 65×74 to 130×148 - Centers the "V" in the middle with ~25% padding on all sides - Puts the "V" in the safe zone for maskable icons - Should fix the "too big" PWA icon issue while following PWA standards Ready for you to test or update the manifest! * Use vk svgs * Done! I've created `favicon-vk-light-maskable.svg` with 10% padding as requested. **What I did:** - Expanded dimensions from `150×150` to `165×165` (10% larger) - Changed viewBox from `0 0 150 150` to `0 0 165 165` - Wrapped all original content in `<g transform="translate(7.5, 7.5)">` to center it - This gives exactly 10% padding on all sides The file is now ready to use as a maskable icon in your PWA manifest! The original content is preserved but now sits in the center of a larger canvas with proper safe zone padding.
2025-09-23 12:36:29 +01:00
<svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_19_2)">
<mask id="mask0_19_2" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="14" y="39" width="604" height="74">
<path d="M14 52.6035V39.0098H21.2012V52.6035H14ZM21.207 52.6035V39.0098H28.4082V52.6035H21.207ZM32.5215 52.6035V45.4258H28.4141V44.5645H33.3828V52.6035H32.5215ZM30.6465 47.3008H28.4141V46.4395H31.5078V52.6035H30.6465V47.3008ZM57.2422 52.6035V39.0098H64.4434V52.6035H57.2422ZM64.4492 52.6035V39.0098H71.6504V52.6035H64.4492ZM75.7637 52.6035V45.4258H71.6562V44.5645H76.625V52.6035H75.7637ZM73.8887 47.3008H71.6562V46.4395H74.75V52.6035H73.8887V47.3008ZM78.8633 52.6035V39.0098H86.0645V52.6035H78.8633ZM86.0703 52.6035V39.0098H93.2715V52.6035H86.0703ZM97.3848 52.6035V45.4258H93.2773V44.5645H98.2461V52.6035H97.3848ZM95.5098 47.3008H93.2773V46.4395H96.3711V52.6035H95.5098V47.3008ZM100.484 52.6035V39.0098H107.686V52.6035H100.484ZM107.691 52.6035V39.0098H114.893V52.6035H107.691ZM114.898 52.6035V39.0098H122.1V52.6035H114.898ZM122.105 52.6035V39.0098H129.307V52.6035H122.105ZM129.312 52.6035V39.0098H136.514V52.6035H129.312ZM136.52 52.6035V39.0098H143.721V52.6035H136.52ZM147.834 52.6035V45.4258H143.727V44.5645H148.695V52.6035H147.834ZM145.959 47.3008H143.727V46.4395H146.82V52.6035H145.959V47.3008ZM158.141 52.6035V39.0098H165.342V52.6035H158.141ZM165.348 52.6035V39.0098H172.549V52.6035H165.348ZM172.555 52.6035V39.0098H179.756V52.6035H172.555ZM179.762 52.6035V39.0098H186.963V52.6035H179.762ZM186.969 52.6035V39.0098H194.17V52.6035H186.969ZM194.176 52.6035V39.0098H201.377V52.6035H194.176ZM201.383 52.6035V39.0098H208.584V52.6035H201.383ZM212.697 52.6035V45.4258H208.59V44.5645H213.559V52.6035H212.697ZM210.822 47.3008H208.59V46.4395H211.684V52.6035H210.822V47.3008ZM244.625 52.6035V39.0098H251.826V52.6035H244.625ZM251.832 52.6035V39.0098H259.033V52.6035H251.832ZM263.146 52.6035V45.4258H259.039V44.5645H264.008V52.6035H263.146ZM261.271 47.3008H259.039V46.4395H262.133V52.6035H261.271V47.3008ZM280.66 52.6035V39.0098H287.861V52.6035H280.66ZM287.867 52.6035V39.0098H295.068V52.6035H287.867ZM299.182 52.6035V45.4258H295.074V44.5645H300.043V52.6035H299.182ZM297.307 47.3008H295.074V46.4395H298.168V52.6035H297.307V47.3008ZM309.488 52.6035V39.0098H316.689V52.6035H309.488ZM316.695 52.6035V39.0098H323.896V52.6035H316.695ZM323.902 52.6035V39.0098H331.104V52.6035H323.902ZM331.109 52.6035V39.0098H338.311V52.6035H331.109ZM338.316 52.6035V39.0098H345.518V52.6035H338.316ZM349.631 52.6035V45.4258H345.523V44.5645H350.492V52.6035H349.631ZM347.756 47.3008H345.523V46.4395H348.617V52.6035H347.756V47.3008ZM359.938 52.6035V39.0098H367.139V52.6035H359.938ZM367.145 52.6035V39.0098H374.346V52.6035H367.145ZM374.352 52.6035V39.0098H381.553V52.6035H374.352ZM385.666 52.6035V45.4258H381.559V44.5645H386.527V52.6035H385.666ZM383.791 47.3008H381.559V46.4395H384.652V52.6035H383.791V47.3008ZM410.387 52.6035V39.0098H417.588V52.6035H410.387ZM417.594 52.6035V39.0098H424.795V52.6035H417.594ZM428.908 52.6035V45.4258H424.801V44.5645H429.77V52.6035H428.908ZM427.033 47.3008H424.801V46.4395H427.895V52.6035H427.033V47.3008ZM432.008 52.6035V39.0098H439.209V52.6035H432.008ZM439.215 52.6035V39.0098H446.416V52.6035H439.215ZM446.422 52.6035V39.0098H453.623V52.6035H446.422ZM453.629 52.6035V39.0098H460.83V52.6035H453.629ZM460.836 52.6035V39.0098H468.037V52.6035H460.836ZM468.043 52.6035V39.0098H475.244V52.6035H468.043ZM479.357 52.6035V45.4258H475.25V44.5645H480.219V52.6035H479.357ZM477.482 47.3008H475.25V46.4395H478.344V52.6035H477.482V47.3008ZM496.871 52.6035V39.0098H504.072V52.6035H496.871ZM504.078 52.6035V39.0098H511.279V52.6035H504.078ZM511.285 52.6035V39.0098H518.486V52.6035H511.285ZM518.492 52.6035V39.0098H525.693V52.6035H518.492ZM525.699 52.6035V39.0098H532.9V52.6035H525.699ZM537.014 52.6035V45.4258H532.906V44.5645H537.875V52.6035H537.014ZM535.139 47.3008H532.906V46.4395H536V52.6035H535.139V47.3008ZM547.32 52.6035V39.0098H554.521V52.6035H547.32ZM554.527 52.6035V39.0098H561.729V52.6035H554.527ZM561.734 52.6035V39.0098H568.936V52.6035H561.734ZM573.049 52.6035V45.4258H568.941V44.5645H573.91V52.6035H573.049ZM571.174 47.3008H568.941V46.4395H572.035V52.6035H571.174V47.3008ZM597.77 52.6035V39.0098H604.971V52.6035H597.77ZM604.977 52.6035V39.0098H612.178V52.6035H604.977ZM616.291 52.6035V45.4258H612.184V44
</mask>
<g mask="url(#mask0_19_2)">
<rect x="12" y="37" width="66" height="78" fill="black"/>
</g>
<mask id="mask1_19_2" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-148" y="39" width="604" height="74">
<path d="M-148 52.6035V39.0098H-140.799V52.6035H-148ZM-140.793 52.6035V39.0098H-133.592V52.6035H-140.793ZM-129.479 52.6035V45.4258H-133.586V44.5645H-128.617V52.6035H-129.479ZM-131.354 47.3008H-133.586V46.4395H-130.492V52.6035H-131.354V47.3008ZM-104.758 52.6035V39.0098H-97.5566V52.6035H-104.758ZM-97.5508 52.6035V39.0098H-90.3496V52.6035H-97.5508ZM-86.2363 52.6035V45.4258H-90.3438V44.5645H-85.375V52.6035H-86.2363ZM-88.1113 47.3008H-90.3438V46.4395H-87.25V52.6035H-88.1113V47.3008ZM-83.1367 52.6035V39.0098H-75.9355V52.6035H-83.1367ZM-75.9297 52.6035V39.0098H-68.7285V52.6035H-75.9297ZM-64.6152 52.6035V45.4258H-68.7227V44.5645H-63.7539V52.6035H-64.6152ZM-66.4902 47.3008H-68.7227V46.4395H-65.6289V52.6035H-66.4902V47.3008ZM-61.5156 52.6035V39.0098H-54.3145V52.6035H-61.5156ZM-54.3086 52.6035V39.0098H-47.1074V52.6035H-54.3086ZM-47.1016 52.6035V39.0098H-39.9004V52.6035H-47.1016ZM-39.8945 52.6035V39.0098H-32.6934V52.6035H-39.8945ZM-32.6875 52.6035V39.0098H-25.4863V52.6035H-32.6875ZM-25.4805 52.6035V39.0098H-18.2793V52.6035H-25.4805ZM-14.166 52.6035V45.4258H-18.2734V44.5645H-13.3047V52.6035H-14.166ZM-16.041 47.3008H-18.2734V46.4395H-15.1797V52.6035H-16.041V47.3008ZM-3.85938 52.6035V39.0098H3.3418V52.6035H-3.85938ZM3.34766 52.6035V39.0098H10.5488V52.6035H3.34766ZM10.5547 52.6035V39.0098H17.7559V52.6035H10.5547ZM17.7617 52.6035V39.0098H24.9629V52.6035H17.7617ZM24.9688 52.6035V39.0098H32.1699V52.6035H24.9688ZM32.1758 52.6035V39.0098H39.377V52.6035H32.1758ZM39.3828 52.6035V39.0098H46.584V52.6035H39.3828ZM50.6973 52.6035V45.4258H46.5898V44.5645H51.5586V52.6035H50.6973ZM48.8223 47.3008H46.5898V46.4395H49.6836V52.6035H48.8223V47.3008ZM82.625 52.6035V39.0098H89.8262V52.6035H82.625ZM89.832 52.6035V39.0098H97.0332V52.6035H89.832ZM101.146 52.6035V45.4258H97.0391V44.5645H102.008V52.6035H101.146ZM99.2715 47.3008H97.0391V46.4395H100.133V52.6035H99.2715V47.3008ZM118.66 52.6035V39.0098H125.861V52.6035H118.66ZM125.867 52.6035V39.0098H133.068V52.6035H125.867ZM137.182 52.6035V45.4258H133.074V44.5645H138.043V52.6035H137.182ZM135.307 47.3008H133.074V46.4395H136.168V52.6035H135.307V47.3008ZM147.488 52.6035V39.0098H154.689V52.6035H147.488ZM154.695 52.6035V39.0098H161.896V52.6035H154.695ZM161.902 52.6035V39.0098H169.104V52.6035H161.902ZM169.109 52.6035V39.0098H176.311V52.6035H169.109ZM176.316 52.6035V39.0098H183.518V52.6035H176.316ZM187.631 52.6035V45.4258H183.523V44.5645H188.492V52.6035H187.631ZM185.756 47.3008H183.523V46.4395H186.617V52.6035H185.756V47.3008ZM197.938 52.6035V39.0098H205.139V52.6035H197.938ZM205.145 52.6035V39.0098H212.346V52.6035H205.145ZM212.352 52.6035V39.0098H219.553V52.6035H212.352ZM223.666 52.6035V45.4258H219.559V44.5645H224.527V52.6035H223.666ZM221.791 47.3008H219.559V46.4395H222.652V52.6035H221.791V47.3008ZM248.387 52.6035V39.0098H255.588V52.6035H248.387ZM255.594 52.6035V39.0098H262.795V52.6035H255.594ZM266.908 52.6035V45.4258H262.801V44.5645H267.77V52.6035H266.908ZM265.033 47.3008H262.801V46.4395H265.895V52.6035H265.033V47.3008ZM270.008 52.6035V39.0098H277.209V52.6035H270.008ZM277.215 52.6035V39.0098H284.416V52.6035H277.215ZM284.422 52.6035V39.0098H291.623V52.6035H284.422ZM291.629 52.6035V39.0098H298.83V52.6035H291.629ZM298.836 52.6035V39.0098H306.037V52.6035H298.836ZM306.043 52.6035V39.0098H313.244V52.6035H306.043ZM317.357 52.6035V45.4258H313.25V44.5645H318.219V52.6035H317.357ZM315.482 47.3008H313.25V46.4395H316.344V52.6035H315.482V47.3008ZM334.871 52.6035V39.0098H342.072V52.6035H334.871ZM342.078 52.6035V39.0098H349.279V52.6035H342.078ZM349.285 52.6035V39.0098H356.486V52.6035H349.285ZM356.492 52.6035V39.0098H363.693V52.6035H356.492ZM363.699 52.6035V39.0098H370.9V52.6035H363.699ZM375.014 52.6035V45.4258H370.906V44.5645H375.875V52.6035H375.014ZM373.139 47.3008H370.906V46.4395H374V52.6035H373.139V47.3008ZM385.32 52.6035V39.0098H392.521V52.6035H385.32ZM392.527 52.6035V39.0098H399.729V52.6035H392.527ZM399.734 52.6035V39.0098H406.936V52.6035H399.734ZM411.049 52.6035V45.4258H406.941V44.5645H411.91V52.6035H411.049ZM409.174 47.3008H406.941V46.4395H410.035V52.6035H409.174V47.3008ZM435.77 52.6035V39.0098H442.971V52.6035H435.77ZM442.977 52.6
</mask>
<g mask="url(#mask1_19_2)">
<rect x="81" y="37" width="58" height="78" fill="black"/>
</g>
</g>
<defs>
<clipPath id="clip0_19_2">
<rect width="150" height="150" fill="white"/>
</clipPath>
</defs>
</svg>
Reference in New Issue Copy Permalink