Icons
Last updated
Last updated
In today’s web environment, having properly configured favicons is essential for your app’s appearance across various devices and browsers. This guide explains how to set up favicons in your Next.js app using the Startup Starter Kits (SSK).
Traditionally, setting up favicons required generating over 20 icon files for different devices. We streamline this by reducing it to just five icons and one JSON file, simplifying the process while maintaining consistency.
SSK-Core provides predefined files and tools to help you set up favicons and other site metadata. With this setup, integrating the necessary icons for modern browsers and devices is simple.
Favicon.ico: One ICO file for legacy browsers at sizes 16x16 and 32x32.
SVG Icon: Scalable SVG for modern browsers, ensuring high quality across resolutions.
Apple Touch Icon: 180x180 PNG icon with a 20px border for home screen shortcuts.
Web App Manifest: Optional for Progressive Web Apps (PWAs). If needed, include 192x192 PNG, 512x512 maskable icon, and 512x512 splash screen icon for web app installation.
For a more in-depth exploration of favicon management, check out .
With this setup, your web app will look great across all platforms. SSK-Core simplifies favicon management, making a traditionally complicated task easy. If you have questions, feel free to reach out!