Startup Starter Kits
  • Launch Manual
    • Clone the Repository and Install Dependencies
    • Generate NextJS Apps or Components Using ssk-plugin
    • Start Your Project in Development Mode
    • Configure Your Environment Variables
    • Run Your Project in Production Mode Locally
    • Launch Your Project
  • SSK-Core Features
    • UI Components
    • Root Layout
    • SEO
    • Icons
    • Feature Flags
    • Utilities
    • Templates
      • Privacy Policy Template
      • Terms of Service Template
  • SSK-Pro Features
    • AI Chat Integration
      • Setting Up AI Providers
      • Using the Pre-built Chat Component
      • Securing Chatbot Conversations
      • Testing and Customizing AI Responses
    • Google Analytics
      • Setting Up Google Analytics
      • Implementing Pageview Tracking
      • Handling Cookie Consent
      • Tracking Events
    • Payments Integration
      • Stripe Payments
        • Setting Up Your Stripe Account
        • Installing Stripe in Your Application
        • Implementing in Your Project
      • Lemon Squeezy
        • Setting Up Lemon Squeezy Account
        • Configuring the Webhook Endpoint
        • Testing and Verifying Integration
    • Affiliate Marketing
      • Lemon Squeezy
      • Rewardful
    • Form and reCAPTCHA
      • Setting Up reCAPTCHA
      • Integrating reCAPTCHA with Forms
      • Verifying reCAPTCHA on the Backend
      • Environment Variables for reCAPTCHA
      • Testing reCAPTCHA Integration
    • Email Integration with Nodemailer
      • Setting Up Email Server
      • Sending Contact Requests
    • Authentication
      • Auth with Google
      • Implement Auth0
  • SSK-Core GitHub Repo
  • SSK-Pro GitHub Repo
  • Contact Support
  • Three Tech Consulting
  • SSK-License
Powered by GitBook
On this page
  • Introduction
  • Why Use a Minimal Set of Icons?
  • SSK-Core Configuration
  • Icon Specifications
  • Additional Resources
  • Conclusion
  1. SSK-Core Features

Icons

Introduction

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).

Why Use a Minimal Set of Icons?

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 Configuration

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.

Icon Specifications

  1. Favicon.ico: One ICO file for legacy browsers at sizes 16x16 and 32x32.

  2. SVG Icon: Scalable SVG for modern browsers, ensuring high quality across resolutions.

  3. Apple Touch Icon: 180x180 PNG icon with a 20px border for home screen shortcuts.

  4. 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.

Additional Resources

For a more in-depth exploration of favicon management, check out Favicons Made Simple.

Conclusion

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!

PreviousSEONextFeature Flags

Last updated 4 months ago