Thanks for requesting a copy of our portfolio. We are very proud of the work we do for our fantastic clients and enjoy the process along the way, and we think it shows. We would love to hear your comments too.
Shortly after submitting the details to the right, you will recieve an email with a link to our portfolio.
Thanks again & enjoy!
Dynamically updating favicons!
When I say dynamically updating favicons I am referring to things like gmail and google calendar, where the favicon (the icon that displays next to the title in the tab) which updates with the number of emails you have in your inbox, or todays date respectively. I am building a system where I need to display a number on top of this icon ranging from 0 to 99+, I originally thought that I would have to create 100 separate images, but then after a lot of digging around the interweb I found out how to do this by creating images on the fly using the HTML 5 canvas tag. I had stmbled uppon this post by @rem and decided to convert his pure JavaScript version into jQuery and ExtJs 4 as well.
Step 1.
You must create a favicon with your base image with which you want to place a number over, the dimensions for this should be 16px in width and 16px in height, make this a png image and save it to a folder on your website.
Step 2.
Create a standard favicon link tag within the head of your html file linking either to the favicon you just created (or any other image you want to fall back to if the browser does not support the canvas tag and its operations), this link tag will get overridden by the one you are about to create!
<head>
...
<link href="/favicon.png" rel="icon" id="basic-favicon" type="images/png" />
...
</head>
If you are using Zend Framework you can use the following PHP code to create the above tag:
<?php
$this->headLink(array('rel' => 'icon',
'type' => 'images/png',
'id' => 'basic-favicon',
'href' => '/favicon.png'),
'PREPEND');
echo $this->headLink();
?>
Step 3.
JavaScript time! Below is the standard JavaScript to create your dynamic favicon image, then override the existing favicon link node, I have included ways to do it in the jQuery and ExtJS 4 javascript fameworks as well. All examples contain annotations, Happy Faviconing!
Standard Javascript
<script type="text/javascript">
// create canvas node
var canvas = document.createElement('canvas'),
// create image node
image = document.createElement('img'),
// clone current favicon link node
link = document.getElementById('basic-favicon').cloneNode(true),
// set the number/text you want to overlay your icon
count = 10;
// browser check, only create image and new link node if
// browser supports canvas node operations
if (typeof canvas.getContext == 'function') {
canvas.width = 16; // set the width
canvas.height = 16; // set the height
// get the canvas context
var context = canvas.getContext('2d');
// add an on load event handler for the image will
// get triggered when you set the src attribute//
// of your favicon image, and its this image that will
// have a number overlayed it
image.onload = function () {
// draw a copy of the orignal image
context.drawImage(this, 0, 0);
context.font = 'bold 9px Arial'; //set font
context.fillStyle = 'black'; //set font colour
context.textAlign = 'center'; //set text alignment
context.fillText(count, 8, 14); // place text over the new image
// set the href attribute of the cloned link tag
// to the data url of the newly generated image
link.href = canvas.toDataURL('image/png');
// append the new link tag to the bottom of the head,
// which will override the existing favicon link node
document.head.appendChild(link);
};
// trigger the load the new image by setting the src
// attribute to the image you want to overlay your text with
image.src = '/favicon-text.png';
}
</script>
jQuery
<script type="text/javascript">
// create canvas node
var canvas = $('<canvas />'),
// create image node
image = $('<img />'),
// clone current favicon link node
link = $('#basic-favicon').clone(),
// set the number/text you want to overlay your icon
count = 10;
// browser check, only create image and new link node if
// browser supports canvas node operations
if (typeof canvas.get(0).getContext == 'function') {
canvas.attr({
width: 16, // set width
height: 16 // set height
});
// get the canvas context
var context = canvas.get(0).getContext('2d');
// add an on load event handler for the image will
// get triggered when you set the src attribute//
// of your favicon image, and its this image that will
// have a number overlayed it
image.load(function () {
// draw a copy of the orignal image
context.drawImage(this, 0, 0);
context.font = 'bold 9px Arial'; //set font
context.fillStyle = 'black'; //set font colour
context.textAlign = 'center'; //set text alignment
context.fillText(count, 8, 14); // place text over the new image
// set the href attribute of the cloned link tag
// to the data url of the newly generated image
link.attr({
href: canvas.get(0).toDataURL('image/png')
});
// append the new link tag to the bottom of the head,
// which will override the existing favicon link node
$('head').append(link);
});
// trigger the load the new image by setting the src
// attribute to the image you want to overlay your text with
image.attr({
src: '/favicon-text.png'
});
}
</script>
ExtJs 4
<script>
// create canvas node
var canvas = new Ext.Element(document.createElement('canvas')),
// create image node
image = new Ext.Element(document.createElement('img')),
// clone current favicon link node
link = Ext.clone(Ext.get('basic-favicon')),
// set the number/text we want to overlay our icon
count = 10;
// browser check, only create image and new link node if
// browser supports canvas node operations
if (typeof canvas.dom.getContext == 'function') {
canvas.set({
width: 16, // set the width
height: 16 // set the height
});
// get the canvas context
var context = canvas.dom.getContext('2d');
// add an on load event handler for the image will get triggered when
// we set the src attribute of our favicon image,
// and its this image that will have a number overlayed it
image.on('load', function (ev, el) {
// draw a copy of the orignal image
context.drawImage(el, 0, 0);
context.font = 'bold 9px Arial'; //set font
context.fillStyle = 'black'; //set font colour
context.textAlign = 'center'; //set text alignment
context.fillText(count, 8, 14); // place text over the new image
// set the href attribute of the cloned link tag
// to the data url of the newly generated image
link.set({
href: canvas.dom.toDataURL('image/png')
});
Ext.select('head').appendChild(link.dom);
});
// append the new link tag to the bottom of the head,
// which will override the existing favicon link node
image.set({
src: '/favicon-text.png'
});
}
</script>