How to

Setup

Project Configuration Branding Updating the Logo Updating the Fonts Updating the Favicons Environment variables Setting up Emails

Marketing Pages

Updating the Navigation menu Adding Pages

User Interface

Dark Theme Theming

Application Pages

Adding Pages Updating the Sidebar menu Passing data from server to client Guarding Pages

Authentication

Change Authentication strategy Require Email Verification

API Routes

Adding API Routes Guarding an API Route Calling API Routes from the client Checking CSRF Tokens

Contextual Data

Fetching the signed in User Fetching the selected Organization

Reading Data

Reading a Document Reading a list of Documents

Writing Data

Creating a Document Updating a Document Deleting a Document

Payments

Configuring Plans Running the Stripe Webhook locally Using Lemon Squeezy instead of Stripe

Translations

Adding a new translation string Setting a Default Language Adding a new language Using the Language Switcher Detect current Locale

Getting Started

Introduction Technical Details Clone the repository Running the application Coding Conventions

Configuration

Global Configuration Setting up your Firebase Project Feature Flags Setting up Firebase Functions

Architecture

Architecture and Folder Structure Structure your Application Data Model

UI

Tailwind CSS Shadcn UI Themes

Authentication

Auth Overview Setting up Firebase Auth Auth Flow Third-Party Providers Email Link Authentication Multi-Factor Authentication Requiring Email verification Auth SSR Page Guards API Guards Prevent abuse with AppCheck Custom React Hooks Troubleshooting

Data Fetching

Writing data to Firestore Fetching data from Firestore API requests Reading data from Storage Uploading data to Storage Writing your own Fetch

Development

Building Features Commands Code Style Security Rules Translations and Locales Sending Emails Writing API Routes Validating API payload with Zod Logging Enable CORS Encrypting Secrets User Roles

Payments

Stripe Configuration Stripe Webhooks One-Time Payments Migrate to Lemon Squeezy Disable Stripe

Admin

Overview Adding Admins

Blog and Docs

Overview Blog Documentation Search Functionality

Organizations

Overview Extending Organizations User Permissions Subscription Permissions Custom React Hooks

Utilities

MDX React Hooks

Migrations

Migrating to 0.11.0

Testing

Running Tests CI Tests Limitations

Going to Production

Production Checklist Environment Variables Security Rules

Plugins

Cookie Banner Feedback Popup AI Chatbot

API Reference

Reactfire useCurrentOrganization useCurrentUserRole useUserSession useIsSubscriptionActive withAppProps withTranslationProps withAuthProps withPipe withMethodsGuard withAuthedUser withExceptionFilter withCsrf

Documentation
Next.js Firebase
Updating the Favicons

Updating the Favicons

Learn how to update the favicons of your Makerkit landing pages

If you have a logo for your company, you can easily update the favicons of your Makerkit applications. Favicons are the small icons that appear in the browser tab of your website.

Where to find the favicons

Favicons are stored at public/assets/images/favicon. You can replace the existing files with your own images. If you keep the same names and sizes, then you don't need to update the code.

How to generate favicons

If you do, I suggest to generate them using any o the online favicon generator, and then dropping the resulting images in the public/assets/images/favicon folder.

If you have different sizes and names, then you need to update the code to reflect these changes.

How to update the favicons in Makerkit

This code is stored in Layout component at src/core/ui/Layout.tsx. This component has many default settings that includes the favicons.


<link rel="shortcut icon" href="/assets/images/favicon/favicon.ico" />
 
<link
  rel="apple-touch-icon"
  sizes="144x144"
  href="/assets/images/favicon/apple-touch-icon.png"
/>
 
<link
  rel="icon"
  type="image/png"
  sizes="16x16"
  href="/assets/images/favicon/favicon-16x16.png"
/>
 
<link
  rel="icon"
  type="image/png"
  sizes="32x32"
  href="/assets/images/favicon/favicon-32x32.png"
/>
 
<link rel="manifest" href="/assets/images/favicon/site.webmanifest" />
 
<link
  rel="mask-icon"
  href="/assets/images/favicon/safari-pinned-tab.svg"
  color="#000000"
/>

Update the code above to match your new favicons.

PreviousUpdating the fonts of your Makerkit site NextUnderstanding and setting the environment variables in your Next.js project

Subscribe to our Newsletter

Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS

Where to find the favicons

How to generate favicons

How to update the favicons in Makerkit