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)