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

or

yarn add faviconify

💻 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;

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;

🛠️ Props

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

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