How to Change the Logo in a Laravel Jetstream Application

Question

I am new to Laravel and am trying to change the logo in a Laravel application with Jetstream and Inertia.

I have gone over the documentation as well as resources on Laracasts and understand that I need to update the svg (or can use a png/jpg etc by using the html img tag) in the following files:

application-logo.blade.php
authentication-card-logo.blade.php
application-mark.blade.php

The Logo is referenced in AppLayout.vue via a jet-application-mark element:

<div class="flex-shrink-0 flex items-center">
    <inertia-link :href="route('dashboard')">
        <jet-application-mark class="block h-9 w-auto" />
    </inertia-link>
</div>

As well as a jet-application-logo element in the Welcome.vue:

<div>
    <jet-application-logo class="block h-12 w-auto" />
</div>

In each of the files listed above I replaced the svg with an html img to a resource:

<img src="{{ asset('images/enhanced-logo.png') }}" />

After changing the files above and rebuilding, the original Jetstream logo remains - the only place that it is working is in login.blade.php, the following code does pull in the image that I want:

<x-slot name="logo">
    <x-jet-authentication-card-logo />
</x-slot>

Any direction as to what I am doing wrong would be appreciated.

Try disabling browser cache - for chrome devtools > network tab - check Disable cache — Donkarnash, Dec 08 '20 at 02:35
Just noticed that you are using inertia stack - for that you have to replace the logo in `authentication-card-logo.blade.php` which you have so it's showing on login page. But for the other places you need to update in `resources/js/Jetstream/ApplicationLogo.vue` and `resources/js/Jetstream/ApplicationMark.vue` — Donkarnash, Dec 08 '20 at 02:44

score 3 · Accepted Answer · answered Dec 08 '20 at 04:21

3

To change logo in a Laravel Jetstream application:

The authentication views in a Jetstream application, regardless of the stack are simple blade views common for both stacks. To change the logo for authentication views edit resources/views/vendor/jetstream/components/authentication-card-logo.blade.php

<a href="/">
    //Replace the default svg with your own logo svg or an image
    <img src="custom/logo.png" />
</a>

Then depending upon the stack

Inertia stack

Replace the default logo with your own custom logo in

resources/js/Jetstream/ApplicationLogo.vue
resources/js/Jetstream/ApplicationMark.vue

with

<template>
    //Replace the default svg with your own logo svg or an image
    <img src="custom/logo.png" />
</template>

Livewire stack

Replace the default logo with your own custom logo in

resources/views/vendor/jetstream/components/application-logo.blade.php
resources/views/vendor/jetstream/components/application-mark.blade.php

with

//Replace the default svg with your own logo svg or an image
<img src="custom/logo.png" />

answered Dec 08 '20 at 04:21

Donkarnash

12,433
5
26
37

I have issue, if i navigate to /user/profile page (jetstream teams), path to my logo images is host/team/img/logo.png , but e.g. from /dashboard page logo is working and the path is host/img/logo.png – Aleksandrs Dec 10 '20 at 10:24
How does the src of image change? Or is it that you want to change the logo for team? Profile show view includes application-mark.blade.php so what ever image you replace in application-mark.blade.php will show up there – Donkarnash Dec 10 '20 at 10:38
Firstly, if i change application-mark.blade.php nothing changes, but changes only when i modify resources/js/Jetstream/ApplicationMark.vue. And i dont know why src is changing, maybe its related to vue router or something... – Aleksandrs Dec 10 '20 at 10:43
oh i got, i have itertia stack, but why img/logo.png works relative to my navigation position i cant understand – Aleksandrs Dec 10 '20 at 10:45
Sorry I just assumed that you are on Livewire stack. Change the logos for Inertia stack as mentioned above and things should work. The authentication views share the common views in both stacks so on auth related views the new logo will appear once you change it in resources/views/vendor/jetstream/components/authentication-card-logo.blade.php – Donkarnash Dec 10 '20 at 10:47
No, its not working. If i navigate to localhost/project/public/dashboard i got localhost/project/public/img/logo.png, but if i navigate to localhost/project/public/user/profile image link become localhost/project/public/user/img/logo.png. On production /img/logo.png will do the trick, but how to make working on my local env – Aleksandrs Dec 10 '20 at 10:49
Don't know how the segment /user is getting introduced. Try using relative path on local env as well `/img/logo.png` and recompile js – Donkarnash Dec 10 '20 at 10:52
if i will use /img/logo.png it will be localhost/public/, but i have several projects under localhost – Aleksandrs Dec 10 '20 at 10:53

Andrew · Answer 2 · 2020-12-08T04:23:05.040

1

Due to the fact that I am using the Inertia stack, I needed to edit the following files:

resources/js/Jetstream/ApplicationLogo.vue
resources/js/Jetstream/ApplicationMark.vue

With:

<template>
      <img src="/images/enhanced-logo.png"/>
</template>

As well as the file:

resources/views/vendor/jetstream/components/authentication-card-logo.blade.php

With:

<img src="{{ asset('images/enhanced-logo.png') }}" />

To replace the existing Jetstream logo with my image.

edited Dec 08 '20 at 04:23

answered Dec 08 '20 at 03:53

Andrew

1,745
1
21
29

i cant set , because on my computer / is localhost, but i have different projects – Aleksandrs Dec 10 '20 at 10:27
and if i navigate to /user/profile page (jetstream teams), path to my logo images is host/team/img/logo.png , but e.g. from /dashboard page logo is working and the path is host/img/logo.png – Aleksandrs Dec 10 '20 at 10:28

How to Change the Logo in a Laravel Jetstream Application

2 Answers2