Favico.js Deployment and Usage Guide

Prerequisites

• Runtime: Modern web browser (Chrome, Firefox, Opera, or Safari)
• JavaScript: ES5+ compatible browser
• No additional tools: No build tools or package managers required for basic usage

Installation

Direct Download

1. Download the latest version from the GitHub releases page
2. Extract the files and include them in your project

CDN Usage

Add the following to your HTML file:

<script src="https://cdn.jsdelivr.net/npm/favico.js@0.3.10/favico.min.js"></script>

npm Installation

npm install favico.js

Manual Download

Download the minified version from the repository:

• favico-0.3.10.min.js (minified)
• favico.js (unminified for development)

Configuration

Basic Initialization

var favicon = new Favico({
    bgColor: '#d00',        // Badge background color
    textColor: '#fff',      // Badge text color
    fontFamily: 'sans-serif', // Font family
    fontStyle: 'bold',      // Font style
    type: 'circle',         // Badge shape (circle, rectangle, badge)
    position: 'down',       // Position (down, up, left, leftup)
    animation: 'slide',     // Animation type
    elementId: false,       // HTML element ID for image source
    element: null,          // HTML element for image source
    dataUrl: function(url){}, // Callback for data URL
    win: window            // Window object
});

Supported Browsers

• Chrome
• Firefox
• Opera
• Safari

Browser Detection

The library automatically detects browser support and will not initialize on unsupported browsers.

Build & Run

Local Development

1. Include the script in your HTML file:

<script src="path/to/favico.min.js"></script>

2. Initialize the favicon instance:

var favicon = new Favico({
    // your options here
});

3. Use the API methods:

// Set badge with number
favicon.badge(5);

// Set image from element
favicon.image(document.getElementById('my-image'));

// Set video from element
favicon.video(document.getElementById('my-video'));

Production Usage

• Use the minified version (favico-0.3.10.min.js) for production
• Consider using a CDN for faster loading
• Cache the script appropriately

Deployment

Static Website Deployment

Favico.js is ideal for static websites and can be deployed to:

• GitHub Pages
• Netlify
• Vercel
• Surge.sh
• Any static hosting service

Integration with Frameworks

• React/Vue/Angular: Include as a script tag or import via npm
• WordPress: Add to theme header or use plugin
• Jekyll/Hugo: Include in layout templates

CDN Deployment

For maximum performance, use a CDN like:

• jsDelivr: https://cdn.jsdelivr.net/npm/favico.js@0.3.10/favico.min.js
• unpkg: https://unpkg.com/favico.js@0.3.10/favico.min.js

Troubleshooting

Common Issues

1. Badge Not Showing

Problem: Badge doesn't appear on favicon Solution:

• Check browser compatibility
• Ensure favicon exists in document head
• Verify script is loaded before usage

2. Cross-Origin Images

Problem: Images from external domains don't load Solution:

// Set crossOrigin attribute
var img = document.createElement('img');
img.crossOrigin = 'anonymous';
img.src = 'https://external-domain.com/image.jpg';

3. Animation Not Working

Problem: Animations don't play Solution:

• Check if browser supports required features
• Ensure element has valid source (image/video)
• Verify animation type is supported

4. Canvas Not Supported

Problem: Canvas API not available Solution: Favico.js requires Canvas API. Check browser compatibility or provide fallback.

Browser Compatibility

Performance Tips

1. Use minified version in production
2. Preload favicon to avoid flickering
3. Limit animation frequency for better performance
4. Use appropriate image sizes for badges

Debugging

Enable debug mode by checking console logs:

// Check for errors in browser console
console.log(favicon);

If issues persist, check the GitHub issues page for similar problems and solutions.