favicon.js

A tiny (817 bytes) library for changing the favicon of the page.

Live demo

Usage (CDN/Download)

• favicon.js (latest development version)
• favicon.min.js (latest production version)

Usage (npm)

• npm install favicon.js or yarn add favicon.js

Documentation

Basic usage

favicon.change(faviconUrl);
favicon.change(faviconUrl, newTitle);
favicon.animate([array, of, urls]);
favicon.animate([array, of, urls], pauseLength); // Milliseconds
favicon.defaultPause = 1000; // Milliseconds
favicon.stopAnimate();

Examples

favicon.change("http://g.etfv.co/http://en.wikipedia.org", "Wikipedia, the free encyclopedia");
favicon.animate([
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURQ8YIQwbLgQeNxMXMBMeMh0XOR4fMQ0gPhUiNRUnOyMcOyEpLCEvMCQ+PTgzMAIpSgYqTgcnUAAuWgUuXAorVAsuVAgvVg4rUw0qVwwtUAwvWQ4yTAYzVAEwXgAwXwEyXQAyXgA1WwM0XAE0XwE3XQI3XwcwXgY1XwA4XgoxWgswXAk2Xw4xWQ04WxMpQRUpRBMoVxEtVRUrVBUtWREyXRc5VQAvYAAvYQAsZwAuZwAxYAAwYQExYgAwYwIyYAAyYQAyYwAwZQAxZgEzZAAyZQAyZwE0YQE0YgA0YwE2YwA1ZAI0ZQA0ZgE0ZwA3ZAA3ZQA2ZwQwYQYyYwQyZAUzZQY1YQQ0YgY0Zgc2ZAQ3ZgIxaQAxagEzaAAyaQAyawAzbAAybgA0aAA0aQA1awE2aAI3aQA3agM0bgE2bAE3bQA2bwQwbwc3aAQ3bAU2bgA5YwQ4YAU4ZwU6ZgA4aAM4bAQ4aAQ5awgyZgwyYQ40ZQg4aAA1cAA1cRMpYhQrYRUrZRcsYyMuTi84SSg/XwpWeBlXcCpDWTFDUShTZDVAYFNIG2pOAGFdE05RWE5VXVRKbFRdZExnVltoeXxLT2xDZWNHcHpYc25haG5gbXJveHpueHV2eAtehnFWg3lUh3tWinxXjXpag25jg2Z1iHJihmWXlGmbkn+OpYJZAIRfV4NGf4tOd4FTb5BbiZh9jqZ2nqxxoauocd/OduXKb4aLkYiDmpOEl5KQk5iTl5GVoIi1oa6HnKOTnrWbpMCovtaQzt+W29+f09Soy9qt1N+41+WYxuKd1uWZ1+yc2+yV4/GR6PqY7fmd6v6b6+mszeal2+Wr1OC23uO53euq4PCm4/Sm4Pqh8dLVhODE0wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJNhIKMAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjVJivzgAAABG0lEQVQoUwEQAe/+AHxhJSFMaUVIR05zTVNURGEAe2MjcDtBYm1KSkBNNmw9UABdXDxTUlduOVt0TUtDQEpIAE09XHcYM35/fYAwGCpVSkoAZGJoE4GinZ+gnqGkiRkdZQA7QEQ0j9LP1MbB0MS1LylGAHkmKzKV08nWwKqwwraCNRwACwwNAJTVy8q/ra+WmLmGGwCoi4yKk8XNzKu7rry4tKMuALOy17GpzsjHrL2Xt5uQpwcApaa6kQ7Yw9G+mpmNjpKDMQCchIWIhwYKBQMECAEJAhR4AChvP1EaFxEsKRYVEA8tJz4ASU9eOHc8WTphYTZ6HxJyPwBnQnVJElg8aV5qYzd2O3FHAGtaICQiI0RfYHtfXWZEHlYX2mbiHrA6rAAAAABJRU5ErkJggg==",
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURQ0dPhQXKBYYPw0kNgghPxInOhAmPRIoPx0mNTcfNTgyGjAlNg4aQhkbSwQoSAcqSAYqTgQvTwksSAUrUgcuVwAuWgEtXgAuXQAvXgAuXwYqXgQtWQsuWAguWw0uWQwuXgMzVwAwWAAxXQIzXAAzXgE1XAM0XQA0XgM0XwE2XgM3XwczWgQzXwY0WAU1XQsyUw0wUAoxWAsyWwsxXgkyXgwzXBEqSRIvTRAvThYoThcrThQsThgjQRwlTBspThIsURAtWRAsWxAvXhstURQwVxAwWRY4VAAvYgAtZgEuZgAvbggrbwIneAAxYQEyYAAyYQAyYwAwZQAwZgAxZwEzZAAyZQIyZgAyZwA0YAI1YgA0YwI3YQA2YwA1ZAE1ZQA0ZgE0ZwA2ZQA2ZgczYgYyYwYxZAUzZAYyZQQyZgQzZwU1ZgY2ZwAxawIyaAAzaQAyawAzbQA0aAA0agE2aAQ2awU0bAI5YgE4Zwc4YQY5ZAA4awM7bgU4aQQ6aQQ8bQk2YAg0ZQk1ZgM0dgM6cgk3cgwxfy82QCw4RjE8WipEXS1JVzRHTiVBZihPbC9SaCZRc0VINVVOMVNePlp2OWtaPkNQWEtUWV5OdVxbYVpib3NPWWtHY2hIbWRdZXhbb3tjS3dmcHl3eGVdhmpeiW1ciGRiimpkimpmiWR0jW91gXtthGqlVWipWYdPfoxSeo1BgpFjipJ6iqB5mLhpqoO0Y52xabPge7ThfIuJlJKCjZqPlZGVmJyTmISKopaMpZKUoKeJobibr7jigM+QyduYwd6c48Sgxt2i0t2h4eWT3e6U1POY0++T6PGT5/SZ6fqc6vqf7v2f9+es2uqm1+O/y/Cyx+Gg5Omj6eit4+un8OW24uSx6fOt4QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJj3aiYAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjVJivzgAAABG0lEQVQoUwEQAe/+AHF3IVtvcHJaJyNjZGVpUF4AYE92JGdnTi4rMhwzZhl8TwBifk8sRT84Nzs6Q0QVfRdZAF9HczQ9p6aio6OkpYwteCQAg29TQpfayNnF1tfbvgURKQBBHjU5nNPO0cmvs8exhkYgAAkLhwGb3M3Mw7CynqC/iS8AlJGSkJrEz9CtwLm8urioNgC2t8K1n9XLyq7BnbuhmL08AKyrtJMK1NLYxqqplZaZiD4Aj42OiosIAg0MAAYDBwRAHwBMhUsaMBITHRsxDg8QFIBWAIJKSHRnFoFrfBh5KGpfTlwAbnt6VmyESVdxTV9fcVVhXABYIlBVbVJ1bV13UVUXWWFiACUqVGBoSXVSUGFXVn8mTXr3Hmu6vgXxNAAAAABJRU5ErkJggg==",
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURQkbLAEdOQAfPRwcMRIgLh4kKiAhIyQmKTcxIQ0fTwEhQQAqUwArVAAsVgAtWQAuWwAvXA8wUAwxVhwzSQAxYAAyYgAyYwAzZAAzZQA0Zik4Riw5RjM7Ti9AUjhCSzhDW3ZqOElGQkhISFxRRlxUTFFRUVJSUl9ZWWFWSWhWRGZdXWlWaXZYdnhlVHlgX3lkWGVkZHNlaH1uaXN0dXVzc3R0dHh4eDY6vzgzuTk3wCWMPBnGixfBlkHTlpgyCI5Ke7J8fc8wE4BVgKh4gq5vrKiDbcG0Ad/jAefeAfnVEoeFh4qKipKSkpSUlJmZmcuZmdubsPi9ot6F3u+P7/6G6v6G6/+G7P6J7v+L8P+L8f+O9P+P9f+R9/+T+f+U+f+X/P6d8f+Y/P+Y/v+Z//+a/vmkx/mrzv6uzP+m5QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAE3XPx0AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjVJivzgAAAAmklEQVQoU2OQRAMMWAWEdPVAQF9WQlISrEIlPTopLDw5w5UfJpAYGx+s7RLhLC0MVCEoxaicEhUZZOqlY+grJ8ngaKehqBkSl2Tv6+3n623My+Dh7ummkBAT6uSv5WOm7sDNYG1ja8URmJoWYGSipmogI85gaWGuJM/KzMnEwsbAzgW2RYJbVIBPUlKER4xbHGotsmuxO500FQCjIiU3D5OSIgAAAABJRU5ErkJggg==",
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURQ0dPhQXKBYYPw0kNgghPxInOhAmPRIoPx0mNTcfNTgyGjAlNg4aQhkbSwQoSAcqSAYqTgQvTwksSAUrUgcuVwAuWgEtXgAuXQAvXgAuXwYqXgQtWQsuWAguWw0uWQwuXgMzVwAwWAAxXQIzXAAzXgE1XAM0XQA0XgM0XwE2XgM3XwczWgQzXwY0WAU1XQsyUw0wUAoxWAsyWwsxXgkyXgwzXBEqSRIvTRAvThYoThcrThQsThgjQRwlTBspThIsURAtWRAsWxAvXhstURQwVxAwWRY4VAAvYgAtZgEuZgAvbggrbwIneAAxYQEyYAAyYQAyYwAwZQAwZgAxZwEzZAAyZQIyZgAyZwA0YAI1YgA0YwI3YQA2YwA1ZAE1ZQA0ZgE0ZwA2ZQA2ZgczYgYyYwYxZAUzZAYyZQQyZgQzZwU1ZgY2ZwAxawIyaAAzaQAyawAzbQA0aAA0agE2aAQ2awU0bAI5YgE4Zwc4YQY5ZAA4awM7bgU4aQQ6aQQ8bQk2YAg0ZQk1ZgM0dgM6cgk3cgwxfy82QCw4RjE8WipEXS1JVzRHTiVBZihPbC9SaCZRc0VINVVOMVNePlp2OWtaPkNQWEtUWV5OdVxbYVpib3NPWWtHY2hIbWRdZXhbb3tjS3dmcHl3eGVdhmpeiW1ciGRiimpkimpmiWR0jW91gXtthGqlVWipWYdPfoxSeo1BgpFjipJ6iqB5mLhpqoO0Y52xabPge7ThfIuJlJKCjZqPlZGVmJyTmISKopaMpZKUoKeJobibr7jigM+QyduYwd6c48Sgxt2i0t2h4eWT3e6U1POY0++T6PGT5/SZ6fqc6vqf7v2f9+es2uqm1+O/y/Cyx+Gg5Omj6eit4+un8OW24uSx6fOt4QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJj3aiYAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjVJivzgAAABG0lEQVQoUwEQAe/+AHF3IVtvcHJaJyNjZGVpUF4AYE92JGdnTi4rMhwzZhl8TwBifk8sRT84Nzs6Q0QVfRdZAF9HczQ9p6aio6OkpYwteCQAg29TQpfayNnF1tfbvgURKQBBHjU5nNPO0cmvs8exhkYgAAkLhwGb3M3Mw7CynqC/iS8AlJGSkJrEz9CtwLm8urioNgC2t8K1n9XLyq7BnbuhmL08AKyrtJMK1NLYxqqplZaZiD4Aj42OiosIAg0MAAYDBwRAHwBMhUsaMBITHRsxDg8QFIBWAIJKSHRnFoFrfBh5KGpfTlwAbnt6VmyESVdxTV9fcVVhXABYIlBVbVJ1bV13UVUXWWFiACUqVGBoSXVSUGFXVn8mTXr3Hmu6vgXxNAAAAABJRU5ErkJggg=="
], 500);
favicon.stopAnimate();

Browser Support

• Chrome
• Firefox

It should work on most modern browsers (such as Firefox) but hasn't been tested yet

Credits

Based heavily on the original favicon.js

License

MIT License