Favicon in Laravel: how do you install an icon export and check the result?

1. Prepare an icon for a small preview

In the Icons byFox generator, choose Web / PWA. Start with a short symbol and a contrasting background. Before downloading the package, inspect the small preview: a full company name may be legible in a large PNG but disappear in a browser tab icon.

With the default name, the export contains favicon.ico, apple-touch-icon.png, icon-16.png, icon-32.png, icon-48.png, icon-180.png, icon-192.png and icon-512.png, plus maskable-192.png and maskable-512.png variants. The generator also includes site.webmanifest and a README. If you change the export name, check filenames in the archive before adding paths to your layout.

This example uses default filenames and publication at the domain root. Deploying an app in a subdirectory requires adjusted URLs; do not copy paths starting with a slash without checking them.

2. Separate public assets from the project archive

Extract the ZIP outside the app's public directory. The Icons export also contains data for returning to editing, including manifest.json and sources/. You do not need to publish original materials or the whole archive to install a favicon. Select the icon files and site.webmanifest, and keep the project separately.

Place the selected files in the Laravel project's public/ directory. After deployment, public/favicon.ico should be accessible at /favicon.ico, not /public/favicon.ico. The public directory is the web server's document root; do not add its name to the public URL.

Check files that already exist in the app. Replacing favicon.ico will not remove an old reference to a different PNG or SVG in the layout. Review existing icon declarations and deliberately choose which ones to keep.

3. Add references in the shared Blade layout

Add three references to the shared layout's head section: link rel="icon" pointing to /favicon.ico, link rel="apple-touch-icon" pointing to /apple-touch-icon.png, and link rel="manifest" pointing to /site.webmanifest. Full tags are in the export's README. In Blade, generate asset URLs with asset(), according to your app's configuration.

You do not need to import these files into JavaScript or add them as Vite entry points if they are published directly in public/. Check that the layout is also used by subpages, the contact page and any error views where you want the same identity.

In Laravel web apps, a shared layout reduces the number of places that need updating. If the frontend uses several separate templates, review each one — a correct icon on the homepage does not confirm the whole site's configuration.

4. Adapt the manifest to your site

The generator writes example name and short_name values into site.webmanifest. Replace them with your app's name, check start_url, background_color and theme_color. The manifest should describe the published product, not the generator's example settings.

Check the icons array and open every file URL it lists. Relative paths are resolved against the manifest URL. Moving only site.webmanifest to another directory without adjusting paths may break the image references.

The export separates regular icons marked purpose: any from purpose: maskable variants. A maskable variant keeps a larger margin around the symbol to tolerate cropping. A manifest and icon set alone are not a complete PWA implementation or a guarantee that installation will be available in every browser.

5. Distinguish a path error from a stale cached copy

After deployment, open the favicon.ico, Apple icon and site.webmanifest URLs directly. Then check requests from the HTML document in the browser's Network panel. A 200 response is not enough if the server returns error page HTML or the app's main view instead of an image.

If the direct URL shows the new artwork but the tab still shows the old one, check the browser cache and any CDN cache. For troubleshooting, change the reference URL, for example by adding a version parameter. Do not change the filename, manifest location and server configuration at the same time — it makes it harder to identify what helped.

Finally, open at least two subpages and test on a phone. Browser tab icons and home screen shortcut icons are different uses. Keep the source and project ZIP so the next colour change does not require rebuilding the composition from a finished favicon.ico.

Documentation for your next steps

Use installation instructions that match the versions in your project. The sources below cover these topics in more detail.

• Icons byFox — favicons, Apple icons and PWA manifests
• Icons byFox — saving projects and source materials in ZIPs
• Laravel — generating asset URLs with asset()
• MDN — PWA icons and maskable variants
• MDN — the rel attribute and icon references