adding a favicon to css bundle
I noticed as soon as i set this site up that it was missing a favicon.
What is a favicon?
Its this little icon up the top of the browser tab.
see how there is a little globe icon on there, thats usually provided as the browser default, we can update this with a custom icon with the following code.
Create the Favicon
To create the favicon i just cut the icon from the code box and used that in gimp to create a rounded background, with transparancy in gimp.
If you want to know how to do that part let me know in the comments.
Save that as favicon.png and upload it to your server
Now we are ready for the code to link to it and tell the browser that we are good to use our own icon rather than the browser default.
There are a couple of different codes depending on the browser type and icon size but usually this one works on most browsers unless you want to specify different size icons. Usually i have found that this it not necessary.
HTML
<link rel="shortcut icon" href="/favicon.png">
Yes it is ironic that the first post on this site is actually HTML related rather than css, but hey you have to start somewhere!
And here it is in the tab.
adding a favicon to css bundle Demo
View Demo Full Screen View Demo New Tab
adding a favicon to css bundle Code
HTML
<link rel="shortcut icon" href="/favicon.png">