How to link favicon icon at Laravel

Question

We know how to link HTML images and CSS files according to the following code.

{{ HTML::image('images/example.jpeg', 'Example Image') }}
{{ HTML::style('css/main.css') }}

But, how to link the favicon icon at Laravel as we can not do like a static HTML file?

Easiness

Answer 1

For Laravel 5.xx

We can link favicon icon and css file in the following way. In Laravel application put your favicon icon and css file under the public folder. In my case, I put them public/css folder.

<link rel="shortcut icon" href="{{ asset('img/favicon.png') }}">
<link href="{{ asset('css/style.css') }}" rel="stylesheet">

For Laravel 6.00

<link rel="icon" href="{{ URL::asset('/css/favicon.jpg') }}" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="{{ URL::asset('/css/app.css')  }}">

For Laravel 8.00

<link rel="icon" href="{{ url('css/favicon.jpg') }}">
<link rel="stylesheet" type="text/css" href="{{ url('css/style.css') }}">

Easiness

I was also searching for solution of this problem. Unfortunately, Html builder was removed in Laravel 5 but laravelcollective.com has brought it back. By inspecting its source code, I found that there is a favicon method which we can use like this {!! Html::favicon('favicon') !!} – Boult

The problem is that you can't use those methods in config files: github.com/laravel/framework/issues/32167 – Codon

Answer 2

In laravel 5, the favicon.ico is in public/favicon.ico To change the favicon, just have to replace public/favicon.ico with yours.

Anthe

It is. Only when I set up a fresh installation using laravel new the favicon.ico was not added properly. I mean, the file had zero bytes. First time I checked this out so not sure if this was a fluke. Anyways, you can replace that one with your own favicon.co. And when you restart the browser you will see it. – Aurist

Hello, I know that I dont make the post, but this worked for me in localhost, what I have to do to work in a domain? PD: sorry for my english – Tampere

Answer 3

<link rel="shortcut icon" href="{{ asset('img/favicon.ico') }}">

In blade we can use the assets like asset('img/favicon.ico') but they should be in {{...}} instead of {{{...}}}

Gisarme

Answer 4

If you're using LaravelCollective

{{ Html::favicon( '/assets/images/favicon.ico' ) }}

You can see whole Html method in /vendor/laravelcollective/html/src/HtmlBuilder

Edit: Installation guide in here.

Balsamic

Answer 5

There's also other way to show it.

    <link rel="shortcut icon" type="image/x-icon" href="{{ URL::to('fav icon link') }}"/>

Hope this helps.

Tracy

Answer 6

I think it's a much better to add a manifest.json file in your public folder and add the different size of favicons in that folder too. Laravel will pick it up automatically.

example of manifest.json

{
    "name": "Your app name",
    "short_name": "",
    "icons": [
        {
             "src": "favicon.ico",
             "sizes": "64x64 32x32 24x24 16x16",
             "type": "image/x-icon"
        },
        {
            "src": "android-chrome-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

Rehash

Answer 7

Default .ico favicon and best quality for modern browser .png favicon placed in /public/

<link rel="shortcut icon" href="{{ asset('favicon.ico') }}">
<link rel="icon" type="image/png" href="{{ asset('favicon.png') }}">

Kwon

Answer 8

for image inside public use: title tag your title

followed

link rel='shortcut icon' href='public/favicon.ico' type='image/x-icon'

for image in other location inside public:

title tag your title

followed by

link rel='shortcut icon' href='public/pathtoicon/favicon.ico' type='image/x-icon'

Hope this will be helpful

Sodalite

Answer 9

If you're using laravelcollective/html

{!! Html::favicon('public/images/favicon.ico') !!}

Mateusz

Answer 10

In Laravel v10.41.0 you can simply put it in ./public/*.

And import it like this:

<link rel="shortcut icon" href="favicon.png" type="image/x-icon">

Kasher

Answer 11

If <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}"> is not working, try: <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}?v={{ time() }}">

The addition of ?v={{ time() }} to the URL is a cache-busting technique that can help bypass browser caching issues.

Pervert

Answer 12

Single favicon

If you have only one icon, replace public/favicon.ico with your icon.

Usage in template:

<link rel="icon" type="image/x-icon" href="favicon.ico">

Note, that you should not mention "public" part in path. It will be assumed automatically.

Multiple icons

If you have multiple favicons, create in public/favicons and put here all your favicons.

Usage in template:

<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">

Perilune

Answer 13

To update the favicon in your Laravel 10 application, follow these steps:

1. Navigate to the public directory: Go to the public directory of your Laravel project
2. Locate the existing favicon file: Look for a file named favicon.ico. This is the default favicon file used by Laravel.
3. Replace the favicon: Replace the existing favicon.ico file with your desired favicon file. Ensure that your favicon file is named favicon.ico and is in the .ico format.

Example:

• If your new favicon file is named logo.png, rename it to favicon.ico.
• Delete the old favicon.ico file and move your new favicon.ico file into the public directory

Fastness