Vite Icon Manifest Icons in Laravel – Complete Guide (2025)

Laravel has become the go-to PHP framework for building modern, scalable web applications. Starting from Laravel 9.19, the framework switched from Laravel Mix (Webpack) to Vite, a lightning-fast build tool designed for modern frontend development.

While Vite makes handling JavaScript, CSS, and images much easier, many developers struggle when it comes to favicon and manifest icons setup in Laravel. These icons are critical because they:

• Define your brand identity in browsers.
• Improve SEO and user experience.
• Make your app feel like a Progressive Web App (PWA).

In this guide, we’ll cover everything you need to know about setting up and managing Vite Icon Manifest Icons in Laravel, including installation, configuration, troubleshooting, and best practices.

What Are Manifest Icons?

Before diving into Laravel + Vite, let’s break down what manifest icons are.

A web app manifest is a JSON file (manifest.json) that defines how your web app should behave when installed on a device or added to the home screen. One of its most important parts is the icons array, which provides images in different sizes and formats.

Why Manifest Icons Are Important:

• 🖼 Brand Recognition – Show your logo across browsers and devices.
• 📱 Mobile Experience – Icons appear when your app is installed as a PWA.
• 🌐 Cross-Browser Support – Different devices need different icon sizes.
• ⚡ SEO Impact – Proper icons help Google recognize your site’s branding.

Types of Icons You May Need:

• Favicon.ico – The classic small icon for browser tabs.
• PNG icons (192×192, 512×512) – Required for Progressive Web Apps.
• Apple Touch Icon – iOS Safari support.
• Maskable Icon – Android support with adaptive shapes.

👉 In Laravel with Vite, these icons must be handled carefully so that Vite’s asset pipeline knows where to put them.

Why Use Vite for Icons in Laravel?

Laravel’s move to Vite has many advantages:

• ⚡ Faster Development – Hot Module Replacement (HMR) reloads assets instantly.
• 📦 Optimized Production Build – Generates hashed filenames for caching.
• 🎨 Better Asset Handling – Supports JS, CSS, images, fonts, and icons natively.
• 📄 Manifest.json Support – Vite automatically generates a build manifest with asset paths.

When combined with Laravel’s Vite::asset() helper, you can easily link to your icons in Blade templates.

Setting Up Vite in Laravel (Quick Recap)

If you already have Vite configured, you can skip this section.

Step 1: Install Laravel

composer create-project laravel/laravel vite-icons-demo

cd vite-icons-demo

Step 2: Install Node Dependencies

npm install

npm run dev

This sets up Vite for asset compilation.

Step 3: Check vite.config.js

By default, Laravel ships with:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
  ],
});

Adding Manifest Icons in Laravel with Vite

Now let’s integrate icons properly.

Step 1: Prepare Icon Files

Create icons in different sizes:

• icon-192.png (192×192)
• icon-512.png (512×512)
• favicon.ico (32×32, 64×64)

📂 Save them inside resources/images/icons/.

Step 2: Configure Vite to Handle Icons

Update vite.config.js to ensure icons are copied into the public/build directory.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { resolve } from 'path';

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/css/app.css',
        'resources/js/app.js',
        'resources/images/icons/favicon.ico',
        'resources/images/icons/icon-192.png',
        'resources/images/icons/icon-512.png',
      ],
      refresh: true,
    }),
  ],
  build: {
    manifest: true,
    rollupOptions: {
      input: {
        app: resolve(__dirname, 'resources/js/app.js'),
        favicon: resolve(__dirname, 'resources/images/icons/favicon.ico'),
      },
    },
  },
});

This ensures your icons appear in public/build/manifest.json.

Step 3: Reference Icons in Blade Templates

Inside resources/views/layouts/app.blade.php, add:

<!-- Favicon -->
<link rel="icon" href="{{ Vite::asset('resources/images/icons/favicon.ico') }}">

<!-- Android PWA Icons -->
<link rel="icon" type="image/png" sizes="192x192" href="{{ Vite::asset('resources/images/icons/icon-192.png') }}">
<link rel="icon" type="image/png" sizes="512x512" href="{{ Vite::asset('resources/images/icons/icon-512.png') }}">

<!-- Apple iOS Icon -->
<link rel="apple-touch-icon" href="{{ Vite::asset('resources/images/icons/icon-192.png') }}">

<!-- Manifest -->
<link rel="manifest" href="/manifest.json">

Step 4: Create manifest.json

Inside public/manifest.json:

{
  "name": "My Laravel Vite App",
  "short_name": "LaravelVite",
  "icons": [
    {
      "src": "/build/assets/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/build/assets/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#000000"
}

Now, when you run npm run build, Vite will hash and map your icons in manifest.json.

Common Issues & Fixes with Vite Icons in Laravel

Even experienced developers face hiccups. Let’s troubleshoot:

❌ Icons Not Showing in Production

✅ Check public/build/manifest.json for correct paths.

❌ Cached Old Icons

✅ Clear browser cache and run:

php artisan view:clear

php artisan cache"clear

npm run build

❌ Wrong File Paths in manifest.json

✅ Use Vite::asset() instead of hardcoding paths.

❌ Apple Touch Icons Missing

✅ Add <link rel=”apple-touch-icon”> manually in Blade.

Advanced Tips for Laravel + Vite Icons

1. Automate with vite-plugin-pwa

Instead of manual setup, use:

npm install vite-plugin-pwa --save-dev
vite.config.js:
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    laravel(...),
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: "Laravel Vite App",
        short_name: "LaravelVite",
        icons: [
          {
            src: "icon-192.png",
            sizes: "192x192",
            type: "image/png"
          },
          {
            src: "icon-512.png",
            sizes: "512x512",
            type: "image/png"
          }
        ]
      }
    })
  ]
});

2. Maskable Icons for Android

{
  "src": "/build/assets/icon-512.png",
  "sizes": "512x512",
  "type": "image/png",
  "purpose": "maskable"
}

3. SEO Benefits of Proper Icons

• Favicons improve click-through rate (CTR) in SERPs.
• Manifest icons help Google display your brand in mobile searches.
• PWA readiness improves Core Web Vitals indirectly.

Real-World Use Cases

• Developer Portfolios – Unique branding with favicons.
• Business Websites – PWAs for better mobile engagement.
• E-Commerce – App-like shopping experience with branded icons.

Alternatives & Best Practices

• Older Laravel Projects – Stick to Laravel Mix.
• Favicon Generators – Use realfavicongenerator.net.
• CDN Icons – Good for quick setups, but local assets are safer for branding.

Conclusion

Configuring Vite Icon Manifest Icons in Laravel might seem tricky at first, but with the right setup, you’ll:

• Ensure cross-device branding with favicons & PWAs.
• Improve SEO visibility with manifest.json.
• Leverage Vite’s speed and asset handling for smoother builds.

👉 Whether you’re building a portfolio site, SaaS app, or e-commerce store, adding manifest icons the right way makes your Laravel app look professional, trustworthy, and future-proof.

FAQ

1. How do I add favicons in Laravel Vite?

Use Vite::asset(‘resources/images/icons/favicon.ico’) inside your Blade template.

2. Where should I put manifest.json in Laravel?

Place it inside the public/ folder, e.g., public/manifest.json.

3. Do I need vite-plugin-pwa for Laravel icons?

No, but it automates the process of generating manifest.json and service workers.

4. Can I use SVG icons with Vite in Laravel?

Yes, but browsers often require PNGs for manifest.json icons. SVG is better for inline favicons.

5. Why aren’t my icons showing in production?

Check public/build/manifest.json, clear caches, and always reference icons with Vite::asset().