Skip to content

feat: update SVG favicon with gradient design (closes #103)#137

Open
iammissmiller wants to merge 1 commit into
Debmallya-03:mainfrom
iammissmiller:feat/svg-favicon
Open

feat: update SVG favicon with gradient design (closes #103)#137
iammissmiller wants to merge 1 commit into
Debmallya-03:mainfrom
iammissmiller:feat/svg-favicon

Conversation

@iammissmiller
Copy link
Copy Markdown

Closes #103


📖 What does this PR do?

This PR adds a custom favicon.svg to the Webify project, replacing the default blank browser tab icon with a polished, on-brand SVG favicon. The design features a floating < /> code symbol with a blue→purple gradient — matching the clean, modern aesthetic of the Webify UI.


🎨 Design Decisions

  • Floating symbol — no background box or border, keeping it minimal and sharp
  • Blue → Purple gradient on the brackets with an indigo → magenta slash for subtle depth
  • SVG format — infinitely scalable, renders crisply at all sizes (16px, 32px, 64px, 256px)
  • Visible on both light and dark browser themes — gradient pops on any tab strip color
  • Matches the purple accent color already used throughout the Webify interface

🔧 Changes Made

File Change
public/favicon.svg Added new custom SVG favicon
app/layout.tsx Added icons field to metadata export to link the favicon

📸 Screenshots

Browser Tab

image

Favicon at Different Sizes

image

🧪 How to Test

  1. Clone the branch and run npm run dev
  2. Open http://localhost:3000 in your browser
  3. Check the browser tab — the < /> gradient favicon should appear
  4. Bookmark the page and verify it shows correctly in the bookmarks bar
  5. Test on both light and dark browser themes

🏷️ Request to Maintainers

Hey maintainers! 👋 This was a design-heavy issue requiring multiple iterations to match the Webify aesthetic. I'd really appreciate a generous label for the points — worked hard to get the favicon looking just right! 🙏


📎 Related Issue

Resolves #103 — Feature Request: Add SVG Favicon for Better Branding & Professional Browser Experience

@vercel
Copy link
Copy Markdown
Contributor

vercel Bot commented May 26, 2026

Someone is attempting to deploy a commit to the debmallya-03's projects Team on Vercel.

A member of the Team first needs to authorize it.

@netlify
Copy link
Copy Markdown

netlify Bot commented May 26, 2026

Deploy Preview for webifynet ready!

Name Link
🔨 Latest commit d585228
🔍 Latest deploy log https://app.netlify.com/projects/webifynet/deploys/6a155d235d3cc10008aacfb8
😎 Deploy Preview https://deploy-preview-137--webifynet.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature Request: Add SVG Favicon for Better Branding & Professional Browser Experience

1 participant