How to Add or Change the Favicon in Laravel

The short answer

In a standard Laravel project, the favicon is served from the public directory. You can change it in one of two ways. The quickest is to replace the existing favicon.ico file in that folder with your own icon. The more flexible way is to place one or more icon files in the public folder and declare them with link tags in the head of your Blade layout. The second approach is the one to use if you want an SVG favicon, several sizes, or icons that differ between sections of the app.

The asset under discussion here is the favicon: the small mark a browser shows in tabs, bookmarks and history. It is usually a simplified version of a brand logo, not the full logo. This distinction matters because a detailed wordmark that works on a page header often becomes unreadable at tab size, so many brands use only a symbol, monogram or single letter for the favicon.

Option 1: Replace the default favicon.ico

The default Laravel application skeleton includes a favicon.ico file in the public directory, and browsers request that path automatically even when no link tag points to it. Overwriting this file with your own ICO file, keeping the same name, is enough for many sites. No route, controller or configuration change is needed, because files in the public folder are served directly by the web server.

This option fits when you have a single ready-made ICO file and do not need SVG or touch icons. Its limitation is that it gives you no control over formats or sizes beyond what is packed inside that one file.

Option 2: Declare favicons in your Blade layout

Put your icon files in the public folder, then add link tags inside the head element of the layout that your pages extend. Depending on how the project was set up, this might be the welcome view, a layout file in a layouts subfolder of resources/views, or separate layouts for authenticated and guest pages if a starter kit was installed. Check every layout that renders a head element, otherwise some pages will keep the old icon. Laravel's asset helper builds the correct URL to files in the public folder:

<head>
    <!-- other head tags -->
    <link rel="icon" href="{{ asset('favicon.ico') }}" sizes="any">
    <link rel="icon" href="{{ asset('favicon.svg') }}" type="image/svg+xml">
    <link rel="apple-touch-icon" href="{{ asset('apple-touch-icon.png') }}">
</head>

In this pattern, the ICO file acts as a broad fallback, the SVG file is used by browsers that support vector favicons, and the PNG touch icon covers devices that use a separate home-screen icon. Include only the lines for files you actually have; a link to a missing file simply produces a failed request.

Using an SVG favicon

An SVG favicon can stay sharp at any display density because it is drawn from shapes rather than pixels. Browser support for SVG favicons is not universal, which is why keeping an ICO or PNG fallback alongside it is the common practice.

Do not assume a file is truly vector just because it ends in .svg. An SVG can wrap an embedded raster image, in which case it scales no better than a PNG. Open the file in a vector editor or a text editor: genuine vector artwork is made of path, shape or text elements, while an embedded bitmap typically appears as an image element carrying encoded pixel data.

At favicon sizes, practical design details matter more than file format:

• Simplify the mark: thin strokes, small counters and fine text tend to blur or disappear at tab size.
• Check contrast against both light and dark browser themes, since a dark logo on a transparent background can vanish in a dark tab bar.
• Keep the artwork square or centered in a square canvas so it is not cropped or shrunk unevenly.
• Preview the icon at its real displayed size rather than judging it zoomed in.

Favicons bundled through Vite

If your icon lives in the resources folder and is processed by Vite rather than placed in the public folder, reference it through Laravel's Vite integration so the built, versioned filename is used. For most projects, though, the public folder is the simpler home for favicons, since they rarely change and do not need bundling.

Why the old favicon still shows

Browsers cache favicons aggressively, so a correctly replaced file can appear unchanged for some time. A hard refresh, opening the page in a private window, or visiting the icon file's address directly usually reveals whether the server is already sending the new version. To force clients to fetch it, append a version query string to the link, for example favicon.svg?v=2, and change the value whenever the icon changes. If a CDN or server-side cache sits in front of the app, it may also need to be cleared.

Which option to choose

Situation | Recommended approach

One ready ICO file, no other formats | Replace favicon.ico in the public folder

SVG favicon with fallback | Add link tags in the Blade layout

Touch icon for mobile home screens | Add an apple-touch-icon link in the layout

Icon processed by the build pipeline | Reference it through the Vite integration

Different icons for different areas of the app | Declare icons separately in each layout

A note on logo rights and evidence gaps

Being able to download a logo file does not mean you may use it as your favicon. Use artwork you own or are licensed to use. Also note that no project-specific evidence was supplied for this guide, such as your Laravel version, starter kit, admin panel package or hosting setup. Admin panels and some packages manage their own head markup and may have separate favicon settings, so check their documentation if the icon does not change in those areas.