• Blog
  • Documentation
  • Courses
  • Changelog
  • AI Starters
  • UI Kit
  • FAQ
  • Supamode
    New
  • Pricing

Launch your next SaaS in record time with Makerkit, a React SaaS Boilerplate for Next.js and Supabase.

Makerkit is a product of Makerkit Pte Ltd (registered in the Republic of Singapore)Company Registration No: 202407149CFor support or inquiries, please contact us

About
  • FAQ
  • Contact
  • Verify your Discord
  • Consultation
  • Open Source
  • Become an Affiliate
Product
  • Documentation
  • Blog
  • Changelog
  • UI Blocks
  • Figma UI Kit
  • AI SaaS Starters
License
  • Activate License
  • Upgrade License
  • Invite Member
Legal
  • Terms of License
  • Global Configuration
    • Environment Variables
    • Feature Flags
    • Adding API Routes
    • Change Authentication strategy
    • Fetching the signed in User
    • Reading Records from Postgres
    • Seeding Local Data
    • Introduction
    • Configuring Plans
    • Project Configuration
    • Updating the Navigation menu
    • Adding a new translation string
    • Supabase is not starting
    • Calling API Routes from the client
    • Adding Pages
    • Updating the Sidebar menu
    • Setup oAuth
    • Fetching the selected Organization
    • Resetting the local DB
    • Running the Stripe Webhook locally
    • Branding
    • Setting a Default Language
    • Supabase is not stopping
    • Dark Theme
    • Theming
    • Generating Database Types
    • Updating the Logo
    • Adding a new language in the Remix Supabase SaaS Kit
    • Tables/Functions not found
    • Updating the Fonts
    • Adding Pages
    • Adding a new translation file
    • Contentlayer gets stuck
    • Guarding Pages
    • Using Lemon Squeezy instead of Stripe
    • Updating the Favicons
    • Using the Language Switcher
    • Environment variables
    • Setting up Emails
This documentation is for a legacy version of Remix and Supabase. For the latest version, please visit the Remix and Supabase V2 documentation

Updating the favicons of your Makerkit site | Remix Supabase

Learn how to update the favicons of your Makerkit Remix Supabase 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 the root Head component at app/core/ui/Head.tsx. You can update the code to match your new favicons.

app/core/ui/Head.tsx
<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 paths to match your new favicons.

On this page
  1. How to update the favicons in Makerkit