🛠️ Introducing Faviconify: Dynamic Favicon Generator for React Apps

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:

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.

---