lvl0/fedi-feed-router

Fork 0

Replace stock Laravel branding — sidebar logo and favicon #121

New issue

Closed

opened 2026-08-01 17:25:27 +02:00 by myrmidex · 1 comment

myrmidex commented

2026-08-01 17:25:27 +02:00

Owner

Summary

The app still ships Laravel's default branding. The sidebar renders Laravel's logo, and no layout references a favicon at all — the files sitting in public/ are stock Laravel/Vite assets.

What is actually there

Sidebar logo is Laravel's

resources/views/components/application-logo.blade.php contains Laravel's stock 316×316 SVG mark. It is rendered at resources/views/layouts/navigation.blade.php:9:

<x-application-logo class="block h-9 w-auto fill-current text-gray-800" />

So every authenticated page shows the Laravel logo.

No favicon is linked

grep for favicon / rel="icon" across resources/views/ returns nothing. Browsers fall back to probing /favicon.ico, so favicon.svg and apple-touch-icon.png are never used.

The assets in `public/` are stock

Verified via git history — all of these arrived with 9be9e2e "Fresh Laravel + Sail install":

public/favicon.ico
public/favicon.svg
public/apple-touch-icon.png
public/logo.svg
public/vite.svg

The only custom asset is public/images/ffr-logo-600.png, added separately in 3e7f8eb "Add logo" (Aug 2025) alongside a README change — it is the README banner.

Blocked on a usable logo asset

The existing FFR logo cannot be used for either slot as-is:

1:1 aspect ratio with a solid orange background — wrong shape for a navbar header, which wants roughly 4:1 and a transparent background
Three lines of wordmark text — illegible at 16px, so unusable as a favicon
Raster only, 600×600 PNG at 394 KB (very heavy for a flat two-colour graphic) — cannot be scaled or recoloured
No vector source and no defined palette; the orange and blue exist only as pixels inside that PNG

resources/css/app.css contains only two imports — no @theme block, no CSS variables, no palette.

What is needed first

An SVG with a transparent background. That single property makes everything downstream straightforward: favicon generation at all sizes, a navbar lockup, and recolouring via currentColor.

Typically this means one mark in multiple lockups:

Icon only — square, transparent, no text → favicon, apple-touch-icon
Horizontal — mark plus wordmark → navbar

The existing mark (RSS arcs flowing into an arrow, with circuit nodes) is a reasonable concept and could be traced to vector rather than redrawn. Whether to keep it or start fresh is an open design decision.

Implementation once an asset exists

Replace the contents of application-logo.blade.php with the FFR mark
Add favicon <link> tags to all three layouts (app, guest, onboarding) — icon, apple-touch-icon, and an SVG variant
Replace the stock files in public/ with generated FFR versions
Remove public/vite.svg and public/logo.svg if unused after the swap
Optionally codify the palette in resources/css/app.css as a Tailwind @theme block

Acceptance criteria

Logo asset available as transparent SVG
Sidebar shows the FFR logo, not Laravel's
Favicon renders in the browser tab across all three layouts
apple-touch-icon correctly linked
No stock Laravel/Vite assets remaining in public/
Decide whether to codify the palette here or defer

Note on scope

Palette definition overlaps with #110 (dark mode) — if a palette is codified here, its dark variants should be decided at the same time rather than twice.

#120 — page title still says "Laravel" / "Lemmy Poster" (text only, no design dependency)
#110 — dark mode; shares the palette question

## Summary The app still ships Laravel's default branding. The sidebar renders **Laravel's logo**, and no layout references a favicon at all — the files sitting in `public/` are stock Laravel/Vite assets. ## What is actually there ### Sidebar logo is Laravel's `resources/views/components/application-logo.blade.php` contains Laravel's stock 316×316 SVG mark. It is rendered at `resources/views/layouts/navigation.blade.php:9`: ```blade <x-application-logo class="block h-9 w-auto fill-current text-gray-800" /> ``` So every authenticated page shows the Laravel logo. ### No favicon is linked `grep` for `favicon` / `rel="icon"` across `resources/views/` returns **nothing**. Browsers fall back to probing `/favicon.ico`, so `favicon.svg` and `apple-touch-icon.png` are never used. ### The assets in `public/` are stock Verified via git history — all of these arrived with `9be9e2e "Fresh Laravel + Sail install"`: - `public/favicon.ico` - `public/favicon.svg` - `public/apple-touch-icon.png` - `public/logo.svg` - `public/vite.svg` The **only** custom asset is `public/images/ffr-logo-600.png`, added separately in `3e7f8eb "Add logo"` (Aug 2025) alongside a README change — it is the README banner. ## Blocked on a usable logo asset The existing FFR logo cannot be used for either slot as-is: - **1:1 aspect ratio** with a solid orange background — wrong shape for a navbar header, which wants roughly 4:1 and a transparent background - **Three lines of wordmark text** — illegible at 16px, so unusable as a favicon - **Raster only**, 600×600 PNG at 394 KB (very heavy for a flat two-colour graphic) — cannot be scaled or recoloured - **No vector source** and **no defined palette**; the orange and blue exist only as pixels inside that PNG `resources/css/app.css` contains only two imports — no `@theme` block, no CSS variables, no palette. ### What is needed first An **SVG with a transparent background**. That single property makes everything downstream straightforward: favicon generation at all sizes, a navbar lockup, and recolouring via `currentColor`. Typically this means one mark in multiple lockups: - **Icon only** — square, transparent, no text → favicon, apple-touch-icon - **Horizontal** — mark plus wordmark → navbar The existing mark (RSS arcs flowing into an arrow, with circuit nodes) is a reasonable concept and could be traced to vector rather than redrawn. Whether to keep it or start fresh is an open design decision. ## Implementation once an asset exists 1. Replace the contents of `application-logo.blade.php` with the FFR mark 2. Add favicon `<link>` tags to all three layouts (`app`, `guest`, `onboarding`) — `icon`, `apple-touch-icon`, and an SVG variant 3. Replace the stock files in `public/` with generated FFR versions 4. Remove `public/vite.svg` and `public/logo.svg` if unused after the swap 5. Optionally codify the palette in `resources/css/app.css` as a Tailwind `@theme` block ## Acceptance criteria - [ ] Logo asset available as transparent SVG - [ ] Sidebar shows the FFR logo, not Laravel's - [ ] Favicon renders in the browser tab across all three layouts - [ ] `apple-touch-icon` correctly linked - [ ] No stock Laravel/Vite assets remaining in `public/` - [ ] Decide whether to codify the palette here or defer ## Note on scope Palette definition overlaps with #110 (dark mode) — if a palette is codified here, its dark variants should be decided at the same time rather than twice. ## Related - #120 — page title still says "Laravel" / "Lemmy Poster" (text only, no design dependency) - #110 — dark mode; shares the palette question

myrmidex added this to the v1.4.0 milestone 2026-08-01 17:25:27 +02:00

myrmidex added the

enhancement

label 2026-08-01 17:25:27 +02:00

myrmidex self-assigned this 2026-08-01 17:25:27 +02:00

myrmidex commented

2026-08-10 23:37:42 +02:00

Author

Owner

Done in 4257bd7.

Delivered

Sidebar renders images/logo.png in all three places (desktop sidebar, mobile drawer, mobile header) — previously a plain FFR text heading after #88 removed the dead Breeze application-logo component
favicon-16x16.png, favicon-32x32.png and apple-touch-icon.png generated and linked from all three layouts (app, guest, onboarding)
Removed four unreferenced stock Laravel/Vite assets: public/vite.svg, public/logo.svg, public/favicon.svg, public/favicon.ico

Removing favicon.ico mattered beyond tidiness — browsers probe /favicon.ico by default, so that path was still serving Laravel's icon even with the new <link> tags in place.

Deviations from the ticket

The logo is a PNG, not a transparent SVG. The ticket listed "logo asset available as transparent SVG" as a hard blocker. In practice a PNG was used: public/images/logo.png, 812 KB, rendered at h-12. It works, but it can't be recoloured via currentColor and is heavy for its display size. Worth revisiting if a vector source ever exists.

public/images/ffr-logo-600.png was left in place — it is the README banner, not app branding, so out of scope here.

Palette codification: deferred. The ticket asked whether to codify a palette here or defer. #88 (dark theme) shipped without one, using Tailwind's default neutral scale, so there is no palette to codify. Deferred rather than decided.

Verification

960 tests / 2524 assertions passing, npm run build clean. Sidebar and favicon confirmed in a browser.

Done in `4257bd7`. ## Delivered - Sidebar renders `images/logo.png` in all three places (desktop sidebar, mobile drawer, mobile header) — previously a plain `FFR` text heading after #88 removed the dead Breeze `application-logo` component - `favicon-16x16.png`, `favicon-32x32.png` and `apple-touch-icon.png` generated and linked from all three layouts (`app`, `guest`, `onboarding`) - Removed four unreferenced stock Laravel/Vite assets: `public/vite.svg`, `public/logo.svg`, `public/favicon.svg`, `public/favicon.ico` Removing `favicon.ico` mattered beyond tidiness — browsers probe `/favicon.ico` by default, so that path was still serving Laravel's icon even with the new `<link>` tags in place. ## Deviations from the ticket **The logo is a PNG, not a transparent SVG.** The ticket listed "logo asset available as transparent SVG" as a hard blocker. In practice a PNG was used: `public/images/logo.png`, 812 KB, rendered at `h-12`. It works, but it can't be recoloured via `currentColor` and is heavy for its display size. Worth revisiting if a vector source ever exists. **`public/images/ffr-logo-600.png` was left in place** — it is the README banner, not app branding, so out of scope here. **Palette codification: deferred.** The ticket asked whether to codify a palette here or defer. #88 (dark theme) shipped without one, using Tailwind's default neutral scale, so there is no palette to codify. Deferred rather than decided. ## Verification 960 tests / 2524 assertions passing, `npm run build` clean. Sidebar and favicon confirmed in a browser.

myrmidex closed this issue

2026-08-10 23:37:51 +02:00

myrmidex referenced this issue

2026-08-15 00:02:58 +02:00

Release v1.4.0 #146