Oolvay ships with a minimal set of reference assets that demonstrate the required formats, dimensions, and file locations for branding, favicon support, Progressive Web App metadata, and authentication imagery.
Most bundled assets reside in the public/ directory, which Next.js exposes directly at the site root. A small number of metadata files are stored in the app/ directory because Next.js discovers and serves them automatically as part of its metadata system.
In this guide, you will learn which assets are included by default, where they are stored, the recommended dimensions and formats for each file, how to organize additional assets as your project grows, and when to use local assets versus external object storage.
Oolvay includes a small set of reference assets that demonstrate the file formats, dimensions, and placement conventions expected by the framework. These assets are intended as implementation examples and development placeholders. Most projects will replace them with their own branding and imagery before deployment.
The following files are included by default.
| File | Location | Purpose |
|---|---|---|
brand-logo.svg | public/ | Reference logo used throughout the application, including navigation, authentication pages, documentation, and marketing surfaces |
favicon.svg | public/ | Source favicon artwork used by modern browsers and as the basis for generating additional favicon formats |
icon-maskable.png | public/ | Progressive Web App icon designed for Android launchers and installed applications that apply custom icon masks |
login-image.svg | public/ | Decorative illustration displayed on authentication screens and intended as a replacement point for product-specific artwork |
apple-icon.png | app/ | Apple touch icon used when the application is saved to the home screen on iPhone and iPad devices |
favicon.ico | app/ | Legacy browser favicon that provides broad compatibility across browsers, operating systems, bookmarks, and desktop shortcuts |
app/Next.js automatically discovers and serves certain metadata files when they are placed inside the app/ directory.
These include:
0 / 2,000 characters
favicon.icoapple-icon.pngKeeping them inside app/ allows Next.js to generate the appropriate metadata tags automatically.
All other static assets should remain inside public/.
The primary brand identity asset used throughout the application.
| Property | Recommendation |
|---|---|
| Format | SVG |
| Background | Transparent |
| Scaling | Fully vector based |
| Color mode | RGB |
SVG is recommended because it scales infinitely without losing quality.
The source favicon artwork for the application.
| Property | Recommendation |
|---|---|
| Format | SVG |
| Canvas | Square |
| Size | 512 × 512 px source artwork |
| Background | Transparent |
Use simple shapes and avoid fine details that disappear at small sizes.
Design favicons with sufficient contrast for both light and dark backgrounds. Users may view them in browser tabs, bookmarks, operating system shortcuts, and other environments where the background color is outside your control.
The browser fallback favicon required by many browsers and legacy systems.
| Property | Recommendation |
|---|---|
| Format | ICO |
| Dimensions | 32 × 32 px |
| Canvas | Square |
Although modern browsers support SVG favicons, ICO remains the most broadly compatible format.
Oolvay includes both favicon.svg and favicon.ico for maximum
compatibility. The SVG version provides a scalable, high-quality icon for
modern browsers, while the ICO version serves as a fallback for older
browsers, operating systems, and applications that still rely on the
traditional favicon format.
Apple devices use this icon when users add the application to their home screen.
| Property | Recommendation |
|---|---|
| Format | PNG |
| Dimensions | 180 × 180 px |
| Background | Solid or transparent |
Avoid small text and intricate details.
A maskable icon designed for Progressive Web Apps.
Android launchers may crop icons into circles, rounded squares, or other shapes.
Maskable icons provide a safe area so important content is never clipped.
| Property | Recommendation |
|---|---|
| Format | PNG |
| Dimensions | 512 × 512 px |
| Safe zone | Center 80 percent |
| Background | Full bleed |
Keep logos and text inside the central safe zone.
Decorative artwork displayed on authentication pages.
| Property | Recommendation |
|---|---|
| Format | SVG |
| Aspect ratio | 4:3 |
| Recommended size | 1600 × 1200 px |
| Background | Transparent |
Large illustrations are best delivered as SVG whenever possible.
As a project grows, avoid placing every file directly inside public/. A structured hierarchy is easier to maintain.
public/
├── icons/
├── illustrations/
└── screenshots/The public/ directory should contain application assets that are deployed and
version controlled alongside your codebase. User uploads, blog images,
customer files, and other dynamic content are generally better stored in S3 or
another object storage service.
Oolvay already includes built-in support for storing blog
images in a configured S3 bucket, so blog assets typically do not belong in
the public/ directory.
Different formats solve different problems.
| Format | Advantages | Disadvantages | Best for |
|---|---|---|---|
| SVG | Infinitely scalable, very small for vector graphics, editable | Poor for photographs | Logos, icons, diagrams |
| PNG | Lossless quality, transparency support | Larger file sizes | UI graphics, screenshots |
| JPG | Very small file sizes for photos | Lossy compression, no transparency | Photography |
| WebP | Smaller than PNG and JPG, transparency support | Older tooling may not support it | General web imagery |
| AVIF | Extremely efficient compression | Slower encoding | Large image libraries |
| Asset type | Recommended format |
|---|---|
| Logo | SVG |
| Icon | SVG |
| Screenshot | PNG |
| Photograph | WebP or JPG |
| Blog hero image | WebP |
| Diagram | SVG |
For SVG files, a native img element is usually preferable to Next.js Image.
// Recommended for SVG assets
<img src="/branding/logo.svg" alt="Company logo" />
// Not recommended for SVG assets
<Image src="/branding/logo.svg" alt="Company logo" />Next.js image optimization is designed primarily for raster images such as PNG, JPG, WebP, and AVIF. SVG files are already resolution independent and typically lightweight. As a result, the optimization benefits provided by Image are usually negligible for SVG assets.
Use Image for raster images.
Use img for SVG files.
Not every asset belongs in the repository.
Best for:
Best for:
| Local | Cloud |
|---|---|
| Version controlled | Independent of deployments |
| Extremely simple | Scales to millions of files |
| Fast for small asset libraries | Better for user generated content |
| Increases repository size | Requires storage infrastructure |
| Requires redeployments for changes | Content can change instantly |
As a general rule, application assets belong in public/. User generated content belongs in object storage, that is cloud.
The following external tools can help reduce file size, improve loading performance, and optimize assets before deployment.
| Tool | Purpose |
|---|---|
| TinyPNG | PNG and WebP compression |
| TinyJPG | JPG compression |
| Squoosh | Browser-based image optimization and format conversion |
| SVGOMG | Interactive SVG optimization |
| SVGO | Automated SVG optimization |
| CloudConvert SVG to ICO | Convert SVG favicons into ICO format |
| ImageOptim | Lossless image compression for macOS |
| Sharp | High-performance image processing for Node.js |
| SVG Viewer | SVG inspection and validation |