Skip to content

[Design] Default Vite favicon is still in use #21

Description

@deepjoshi11th

Description

The site currently uses the default Vite favicon (the little lightning bolt icon) as indicated by the HTML head: <link rel="icon" href="/vite.svg" …> index.html. This means in the browser tab and bookmarks, the icon shown is not personalized for your portfolio. It’s a minor detail, but it’s part of the site’s branding and polish. Seeing the Vite icon can give the impression that the site is unfinished or boilerplate.

Steps to Reproduce

  • Look at the browser tab for the site – the favicon is Vite’s logo (a yellow lightning bolt triangle) instead of something related to “Deep” or your personal brand.
  • Check the page source for the favicon link tag index.html; it points to vite.svg.

Expected Behavior

A custom favicon should be used, typically something that represents you or your work (could be your photograph, initials, or a logo). It should be an image that stands out and is recognizable in the context of a browser tab. The link in HTML would point to your custom .ico or .png/.svg icon file.

Actual Behavior

The default Vite icon is displayed. This is likely a placeholder from the project template that hasn’t been replaced. While it doesn’t affect functionality, it’s a missed detail for professionalism.

Why It Matters

The favicon is part of the user’s experience – it appears in browser tabs, favorites, and sometimes search result cards. A personalized favicon helps make your site memorable and clearly associated with you. Leaving the default can be seen as an oversight in a professional portfolio. It’s a quick fix that adds a finishing touch to the site.

Recommended Fix

Replace the favicon with a custom icon:

  • Design or choose a 16x16 (or higher resolution) icon image that you want to represent your site. Often people use their initials or a simple logo/graphic.
  • Convert it to a favicon.ico (for broad support) or use a PNG/SVG. You can have multiple <link rel="icon"> tags for different formats (ICO for legacy, PNG or SVG for modern).
  • Update the <link rel="icon" href="..."> in index.html to point to your new file (e.g., href="favicon.ico" or a path in your repo). Ensure that file is in the public folder or output so it gets served.
  • After updating, clear cache and reload the page to verify the new favicon appears.
    This will make the site look more custom and polished.

Assignee: @deepjoshi11th

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions