Do you know what a favicon is? Well Google just changed theirs. If you are planning to develop any domains, then generating a favicon will help with your branding and it is easy to do. Here we go.
What is a Favicon?
A favicon (short for favorites icon), also known as a website icon, shortcut icon, URL icon, or bookmark icon is an icon associated with a particular website or web page. You will usually see it beside the address bar and it helps add to the branding for a website. The trick is to tie it into the logo or colors you are using for your website.
Google’s new favicon
Google’s new favicon can be seen at any of Google’s web pages and is a reinterpretation of one of the submissions they received. It derives its colors from the word “Google” logo that they have been using. André Resende, a computer science undergraduate student at the University of Campinas in Brazil, submitted the design that inspired the new design.
Create your own favicon
The easiest way is to use a photo, logo or any other graphic as the source. Make sure it has strong lines so it is clear when it is reduced in size. You can then use the tools on this website to create the favicon: Favicons from pictures
- You can download the favicon which will be in a zip file.
- Find the favicon.ico file once you have unzipped the file
- Put that in a directory on your website
- Now between the <head> and </head> tags, add <link rel=”shortcut icon” href=”favicon.ico” >
- The favicon should now appear on your website
Note that you may need to clear the browser cache to see it.
If you are having problems, use <link rel=”shortcut icon” href=”http://www.yourwebsite.com/where you have uploaded the file/favicon.ico” type=”image/vnd.microsoft.icon”/>
Favicon in WordPress
Go to “Appearance” and then “Editor”. Under Theme files on the right, find Header (header.php). Click on that link and scroll down in the main frame until you see </head> and place the line shown above anywhere before this tag. Don’t forget to save.
Favicon in Joomla
In Joomla, go to “Extensions”, then “Template manager”. Click on the active template. Click on “edit html” and scroll down until you find </head> and place the line above before this tag.
You should be able to do the same in scripts or in other content management systems.
I added one to this blog which you should be able to see in the address bar. It also shows up in bookmarks people make of your website. Have fun.
Here is more on Google’s new favicon
{ 1 trackback }
{ 2 comments… read them below or add one }
Wow, you just beat me to this publication. I have mine alreay drafted ready to submit today. Well I guess I will still publish it anyway. Good job.
Frankie,
Sorry, I actually wrote it a couple of days ago and scheduled it to publish. Unfortunately this happens from time to time. I am sure there are people who will read your blog and not mine so it is worth publishing.