Favicon Designer
This web-app allows you to design a free favicon for your website. The favicon is the small picture shown beside the web-address and tab in the browser and in the bookmarks menu.
To change the colour of a pixel click on the "Draw" icon in the toolbox and then select a colour by clicking on one of the "paint pots" below the grid. If you double click on these, you can even select your own colour. You can then click on a pixel to set the colour. If a square is showing a striped pattern, then that pixel will be transparent in the final image. To make a pixel transparent again after drawing on it, use the "Erase" tool. You can also add other simple shapes using the other tools shown.
Once you have finished, click on the "Upload" button and the web-application will send your picture to our webserver. A PHP program on our webserver will then convert the pixel data to a favicon.ico file which is then sent back to your browser to save.
If you are using Firefox, the "Save As" box will appear as a pop-up and you will have to allow this site to open pop up windows. We never use pop-ups for anything else (e.g. advertising).To use the favicon, place the favicon.ico file in the top level folder of your webspace and then add the following lines in the <head> section of your webpages:
<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="shortcut icon" href="/favicon.ico">
And yes, we did use it to design the Neomara favicon shown for this website!
Tips for designing favicons
- Keep it simple with a minimum of colours (preferably complementary ones) and avoid gradients
- Don't try to draw fine detail but use simple bold shapes
Good examples are the Twitter and Facebook favicons.