Dynamic unread count Favicon in PHP

Dynamic Unread count favicon in PHPGmail has just launched small but really useful feature in Gmail Labs. Dynamic Favicon showing unread email counts directly in your browser tab icon. If your browser window has lots and lots of tabs open at anytime, this might be really a wonderful feature that lets user know of any unread item.

Here is a small and powerful script in PHP that lets you create your own Dynamic favicon. We will use PHP GD library to manipulate the favicon image and add text into it.

Below is the simple script that reads a favicon image add add some text character on it.

File: favicon.php

<?php

//Read the favicon template from favicon.png
//file from current directory
$im = imagecreatefrompng("favicon.png");
//$im = imagecreatefromjpg("favicon.jpg");   //using this function to load favicon of jpeg type
//$im = imagecreatefrombmp("favicon.bmp"); //using this function to load favicon of bmp type


/* Read the character which needs to be added in favicon from
 * get request
 */
if(isset($_GET['char']) && !empty($_GET['char'])) {
	$string = $_GET['char'];
} else {
	/* If no character is specified; add some default value */
	$string = 'V';
}

/* background color for the favicon */
$bg = imagecolorallocate($im, 255, 255, 255);

/* foreground (font) color for the favicon */
$black = imagecolorallocate($im, 0, 0, 0);

/* Write the character in favicon
 * arguements: image, fontsize, x-coordinate,
 *				y-coordinate, characterstring, color
 */
imagechar($im, 2, 5, 1, $string, $black);

header('Content-type: image/png');

imagepng($im);

?>

The above code is pretty much self explanatory. We read a character from GET request and add it into the favicon image. Note here that we are using a template favicon image which me modify. You can place any favicon of your choice near favicon.php file.

Download Source Code

Click here to download complete source code (ZIP, 3kb)

Online Demo

Click here to view online demo



5 Comments

  • huarong 17 February, 2011, 6:44

    We can make some favicon_1.png favicon_2.png … favicon_9.png
    and use javascript to set it.

  • Rob Odil 24 June, 2011, 21:42

    You can then use a link tag to set the png as your favicon like this:

  • sagar 24 January, 2013, 7:55

    thanksssss….. help full ….for me……

  • phlp 1 May, 2013, 13:07

    why do you definde $bg and don’t use it anywhere?

  • creatives infotech 5 March, 2014, 18:05

    Hey You are really great, You show a really great method to use counter favicon.

Leave a Reply

Your email address will not be published. Required fields are marked *

Note

To post source code in comment, use [code language] [/code] tag, for example:

  • [code java] Java source code here [/code]
  • [code html] HTML here [/code]

Current ye@r *