Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dynamically generated favicon

Would it be possible using only JavaScript and HTML to dynamically generate a favicon, using the current page's favicon as a background, and a random number in the foreground?

For example, lets say the current favicon looks similar to this:

======================
====XXXXXXXXXXXXXX====
====X=================
====X=================
====X=====XXXXXXXX====
====X============X====
====X============X====
====XXXXXXXXXXXXXX====
======================

If possible, how would I get it to look something similar to this using only JavaScript and HTML:

======================
====XXXXXXXXXXXXXX====
====X=================
====X=================
====X=====XXXXXXXX====
====X=========--111--=
====X=========--1-1--=
====XXXXXXXXXX----1--=
==============--1111-=

map:
= : white background
x : Original Favicon image
- : Red generated image with a number
1 : White text

Ideas:

  • Canvas?
  • Data Uri's?
like image 491
Shaz Avatar asked Aug 06 '11 01:08

Shaz


People also ask

How do I create a dynamic favicon?

append('<link id="dynamic-favicon" rel="shortcut icon" href="https://www.XYZ.com/favicon.ico" />'); This works by adding a link to the head of the page, which changes the shortcut icon of the page to the specified image. Causing the image on the tab in the browser to change.

How do I change my favicon dynamically react?

Just Navigate to public Folder in your react project and then remove the file named favicon. ico. Then after you should replace that file with your favorite icon or any png image by renaming it as favicon.

How do I change favicon ICO?

Use an ICO image as a favicon ico . Right-click favicon. ico and select Change Resource. In Change Resource, select an ICO image with the new favicon.

What size should a favicon be?

Favicon images are small in size, only 16 pixels in height by 16 pixels in width, so there is not much space for complex designs. Still, a good favicon that is clean, simple and easily identifiable can provide a good visual indicator for visitors navigating to your site through their tabs or bookmarks.


3 Answers

EDIT: Got it working with

var canvas = document.createElement('canvas');     canvas.width = 16;canvas.height = 16;     var ctx = canvas.getContext('2d');     var img = new Image();     img.src = '/favicon.ico';     img.onload = function() {         ctx.drawImage(img, 0, 0);         ctx.fillStyle = "#F00";         ctx.fillRect(10, 7, 6, 8);         ctx.fillStyle = '#FFFFFF';         ctx.font = 'bold 10px sans-serif';         ctx.fillText('2', 10, 14);          var link = document.createElement('link');         link.type = 'image/x-icon';         link.rel = 'shortcut icon';         link.href = canvas.toDataURL("image/x-icon");         document.getElementsByTagName('head')[0].appendChild(link);     } 

You can actually run chrome and paste this:

javascript: var canvas = document.createElement('canvas');canvas.width = 16;canvas.height = 16;var ctx = canvas.getContext('2d');var img = new Image();img.src = '/favicon.ico';img.onload = function() {ctx.drawImage(img, 0, 0);ctx.fillStyle = "#F00";ctx.fillRect(10, 7, 6, 8);ctx.fillStyle = '#FFFFFF';ctx.font = 'bold 10px sans-serif';ctx.fillText('2', 10, 14);var link = document.createElement('link');link.type = 'image/x-icon';link.rel = 'shortcut icon';link.href = canvas.toDataURL("image/x-icon");document.getElementsByTagName('head')[0].appendChild(link);} 

into the browser and see it in action.

enter image description here

like image 89
Joe Avatar answered Oct 05 '22 17:10

Joe


You might take a look at this question, which discusses how to change the favicon dynamically. Also here is a site that claims to play a game in the favicon using only JavaScript, canvas, and the data URI, which should work in all modern browsers except IE. Not sure if that would fulfill your requirements or not, but you can try reverse engineering how it works.

Here's an SO answer that explains how to use the canvas element to read the favicon data and get the image data out, which then can be modified and composed into a new icon.

like image 27
mellamokb Avatar answered Oct 05 '22 15:10

mellamokb


I don't know about doing it all in the browser, but it would be easy to have a server endpoint that accepted parameters in the URL and returned a composed favicon. Then Javascript could modify the favicon url to get the image it wanted.

like image 41
Ned Batchelder Avatar answered Oct 05 '22 17:10

Ned Batchelder