matthias/loggi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[loggi-3pe] Add favicon and SVG logo to navbar branding #110

New issue
Closed
opened 2026-02-21 17:56:35 +01:00 by matthias · 0 comments
matthias commented 2026-02-21 17:56:35 +01:00
Owner
Copy link

Bead ID: loggi-3pe
Type: task
Priority: P3
Status: closed
Close reason: Added SVG favicon (492B) with ICO fallback, inline SVG logo in navbar and auth pages, /favicon.ico route. All gradient placeholder divs replaced. 165 tests pass.

Why

Browsers request /favicon.ico by default and currently get a 404. The navbar uses a plain gradient <div> as a placeholder logo — there's no actual brand mark. This makes the app look unfinished in browser tabs, bookmarks, and the navbar.

What

  1. Favicon: Create an SVG favicon and ICO fallback. Add <link rel="icon"> tags to base.html (SVG primary, ICO fallback for older browsers).
  2. Logo mark: Design a simple loggi logomark SVG (stylised 'L' or journal/pen icon) using the existing teal-to-cyan brand gradient (from-teal-400 to-cyan-400).
  3. Navbar: Replace the placeholder gradient <div class="h-8 w-8 rounded-lg bg-gradient-to-br from-teal-400 to-cyan-400"> in base.html with an <img> or inline <svg> of the new logo.
  4. Auth pages: If login/register pages show branding, use the logo there too.

Acceptance criteria

  • No 404 on /favicon.ico
  • Browser tab shows a recognisable loggi icon
  • Navbar shows an SVG logo instead of a plain coloured square
  • PWA icons (192/512/maskable/apple-touch-icon) are left as-is for now — they could be updated in a follow-up

Where

  • app/templates/base.html — add <link rel="icon"> tags, replace navbar placeholder
  • app/static/icons/favicon.svg — new SVG favicon
  • app/static/icons/favicon.ico — ICO fallback (can be generated from SVG)
  • app/static/icons/logo.svg — navbar logo mark (may be same as favicon SVG)

Constraints

  • Keep the SVG simple and small (< 2KB) — it's inline-able
  • Maintain the teal/cyan brand identity
  • Must look good on both dark (night) and light (loggi-light) themes
**Bead ID:** `loggi-3pe` **Type:** task **Priority:** P3 **Status:** closed **Close reason:** Added SVG favicon (492B) with ICO fallback, inline SVG logo in navbar and auth pages, /favicon.ico route. All gradient placeholder divs replaced. 165 tests pass. --- ## Why Browsers request /favicon.ico by default and currently get a 404. The navbar uses a plain gradient `<div>` as a placeholder logo — there's no actual brand mark. This makes the app look unfinished in browser tabs, bookmarks, and the navbar. ## What 1. **Favicon**: Create an SVG favicon and ICO fallback. Add `<link rel="icon">` tags to `base.html` (SVG primary, ICO fallback for older browsers). 2. **Logo mark**: Design a simple loggi logomark SVG (stylised 'L' or journal/pen icon) using the existing teal-to-cyan brand gradient (`from-teal-400 to-cyan-400`). 3. **Navbar**: Replace the placeholder gradient `<div class="h-8 w-8 rounded-lg bg-gradient-to-br from-teal-400 to-cyan-400">` in `base.html` with an `<img>` or inline `<svg>` of the new logo. 4. **Auth pages**: If login/register pages show branding, use the logo there too. ## Acceptance criteria - No 404 on `/favicon.ico` - Browser tab shows a recognisable loggi icon - Navbar shows an SVG logo instead of a plain coloured square - PWA icons (192/512/maskable/apple-touch-icon) are left as-is for now — they could be updated in a follow-up ## Where - `app/templates/base.html` — add `<link rel="icon">` tags, replace navbar placeholder - `app/static/icons/favicon.svg` — new SVG favicon - `app/static/icons/favicon.ico` — ICO fallback (can be generated from SVG) - `app/static/icons/logo.svg` — navbar logo mark (may be same as favicon SVG) ## Constraints - Keep the SVG simple and small (< 2KB) — it's inline-able - Maintain the teal/cyan brand identity - Must look good on both dark (`night`) and light (`loggi-light`) themes
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
beads-sync
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
matthias/loggi#110
No description provided.