When you create a website, the best thing to complete the package is to create a favicon that sits in the tab of your browser, on this site it will show as a crown, on google a g.
To start, you will need the plugin for photoshop, which can be found here. Once this has been downloaded simply place the plug-in into the plug-ins folder within Photoshop (read here), and restart Photoshop.
One can also use this favicon generator, or Favicon Icon Generator
So, to start, one must have an image they want to use as a favicon. If you’re creating it from scratch, I would suggest starting with a slightly bigger size than the mandatory 16 x 16, but you should definately keep it a square (eg. 100 x 100 ).
Make your image, save it as (file -> save as) a favicon (*.ico) image type, and now you have your favicon!
Next, you must add to the <head> of your website (in WordPress this is in the header.php file within your active theme), the lines:
<link rel=”icon” href=”../favicon.ico” type=”image/ico”>
This sits somewhere between your <head> & </head> tag. A good spot is where you will see other elements that start with <link..
If you notice above in the code, ../favicon.ico has “../” as the directory. When you use the “../” like this, it means that it goes to the root directory of your website. This is where you will also have your index.html or index.php file, and also where your DNS, or server will point to when directing traffic to your website.
So, you must also move your favicon.ico that you’ve created in the above process to the root directory of your website so that it can then be read!
After you have completed this, you will need to clear your browser cache, and it should show up! Often times I don’t like to clear my websites cache, so I just open up a different internet browser like IE or Chrome (I usually use Firefox) and it should show up there!
Note: I have also found in searching the internet that these lines of code may also work on a WordPress site:
<link rel=”shortcut icon” href=”http://www.YourWebsiteNameHere.com/favicon.ico” type=”image/vnd.microsoft.icon”/>
<link rel=”icon” href=”http://www.YourWebsiteNameHere.com/favicon.ico” type=”image/x-ico”/>
<link rel=”shortcut icon” href=”<?php bloginfo(‘template_directory’); ?>/favicon.ico” />
I’d love to hear if this works for you!
A great tutorial can also be found at Tutorial by Jennifer
Hello there there! This publish couldn’t be composed any greater! Reading through by means of this publish reminds me of my earlier space mate! He often held discussing this. I’ll ahead this short article to him. Quite certain he’ll possess a excellent go through. Thanks for sharing!
Thank you kindly for your words 🙂
Pingback: Creating a Favicon *.ico « Application & Program Tips « Tech Tips