DEV Community

Cover image for 🛠️ Introducing Faviconify: Dynamic Favicon Generator for React Apps
Sivasubramaniyam
Sivasubramaniyam

Posted on

🛠️ Introducing Faviconify: Dynamic Favicon Generator for React Apps

Create Favicon

Are you tired of the same old static favicons? Do you want to add a personal touch to your web applications? Introducing Faviconify, a customizable React npm library that lets you dynamically generate favicons on the fly!

🚀 What is Faviconify?

Faviconify is a simple yet powerful React npm library that allows you to set text-based favicons or use your own custom PNG/SVG images. It's perfect for developers looking to create unique, dynamic favicons with ease.

🎉 Key Features

  • Customizable Text Favicon: Generate favicons with custom text, font, and colors.
  • Shape Options: Choose between circle, square, and rounded square shapes.
  • Custom Image Favicon: Use a PNG or SVG image as your favicon.
  • Easy Integration: Simply drop the Faviconify component into your React app and you're good to go!

📦 Installation

You can easily install Faviconify using npm or yarn:

npm install faviconify
Enter fullscreen mode Exit fullscreen mode

or

yarn add faviconify
Enter fullscreen mode Exit fullscreen mode

💻 Usage Examples

Here's how you can start using Faviconify in your React application.

Example 1: Text-Based Favicon

import React from 'react';
import Faviconify from 'faviconify';

const App = () => {
  return (
    <>
      <Faviconify textContent="M" iconShape="rounded" fontWeight="900" />
      <h1>Welcome to My App!</h1>
    </>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

Example 2: Using a Custom Image as Favicon

import React from 'react';
import Faviconify from 'faviconify';
import IconUrl from './path/to/your/favicon.svg'; // Ensure this is a URL, not a React component

const App = () => {
  return (
    <>
      <Faviconify imageUrl={IconUrl} iconShape="rounded" />
      <h1>Welcome to My App!</h1>
    </>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

🛠️ Props

Here are the props you can customize to tailor the Faviconify component to your needs:

Prop Type Default Description
fontFamily string Arial Font family used for text content.
textColor string #FFF Color of the text in the favicon.
bgColor string #000 Background color of the favicon.
iconShape 'circle' \ 'square' \ 'rounded'
fontWeight string 400 Font weight of the text content.
textSize number 200 Size of the text in the favicon (in pixels).
textContent string S Text content to be displayed in the favicon.
imageUrl string undefined URL of the image to be used as a favicon. Overrides text.

🌟 Why Faviconify?

Favicons are an important part of your web application's branding, and with Faviconify, you can take them to the next level. Whether you want to create a dynamic favicon that changes based on user interaction or simply want a more personalized icon, Faviconify makes it easy.


Top comments (0)