Setting Up Icons for Your Website in StartupBolt

Overview

Icons are shown everywhere on your website. Favicons are displayed at the top of your browser tab and next to your site in search engine results. Icons are shown beside your website name in the navbar, login, footer sections, etc.

Properly implemented icons can significantly enhance your website's SEO and user experience. This guide will walk you through the process of setting up different types of icons in your StartupBolt project using Next.js.

Types of Icons and Their Implementation

1. Favicon
2. Standard Icon
3. Apple-specific Icon

1. Favicon (favicon.ico)

This is the favicon icon that is shown at the top of your browser tab and next to your site in search engine results.

• Location: Place in the top level of your /app directory.
• Usage: Automatically used as the favicon for your website.
• Restriction: Can only be set in the root /app folder, not in subfolders.

2. Standard Icon (icon.png)

Icons are shown beside your website name in the navbar, login, footer sections, etc.

This is a more modern icon format, supporting higher resolution displays. It's used by many modern browsers and can replace favicon.ico in many cases.

• Note:
  • Only use a PNG file. Using other formats may result in the logo not appearing in certain areas, such as the login page.
  • Ensure the image has a transparent background to allow it to blend seamlessly with different backgrounds.
• Location: Place in your /app directory or in subfolders for route-specific icons.
• Usage: Next.js automatically generates the <link rel="icon"> tag for this icon.
• Flexibility: Can be placed in subfolders to create route-specific icons. But make sure you have one in the /app directory as a fallback.

3. Apple-specific Icon (apple-icon.png)

This is specifically for Apple devices when users add your website to their home screen. It provides a high-quality icon for iOS devices.

• Note:
  • Only use a PNG file.
  • Ensure the image has a transparent background to allow it to blend seamlessly with different backgrounds.
• Location: Place in your /app directory or in subfolders for route-specific icons.
• Usage: Next.js automatically generates the <link rel="apple-touch-icon"> tag for this icon.
• Flexibility: Can be placed in subfolders to create route-specific icons. But make sure you have one in the /app directory as a fallback.

Icon Behavior and Best Practices

• Route-Specific Icons: Icons placed in subfolders will only apply to pages/routes at or below that folder level in your routing hierarchy.
• Automatic Tag Generation: Next.js automatically determines and adds appropriate <link> tags with correct attributes (rel, href, type, sizes) based on the icon type and file metadata.
• Hierarchy: Next.js uses the most specific icon it can find for a given route, falling back to parent folders if necessary.
• Global vs. Local Icons:
  • Icons at the root of app/ apply globally. Make sure you have one in the /app directory as a fallback.
  • Icons in subfolders are local to those specific routes.

By following these guidelines, you can effectively implement and manage icons in your StartupBolt project, enhancing both SEO performance and user experience across different devices and browsers.