"How to make a favicon.ico file to replace the Blogger icon, that shows up in your web browser next to the web addresses (URL), and also in your favorites (bookmarks)."
We will make our own custom favicon for your blog, which will replace the icon (favicon or .ico picture) that shows up in your IE, Firefox, or Opera browser, and also as a marker in your favorites and bookmarks.
The BlogBait Blogger Blog "favicon next to the web address
*****************************************************************
* One, find the image or picture you wish to use. It can be of nearly anything. Some people even use a shot of themselves as a favicon.
Ultimately we are going to turn your picture into a 16x16 or 32x32 px .ico file (picture or image). We use 32x32, but older browsers may only recognize a 16x16px size.
If you already have your .ico favicon file, or want to use one of the favicons supplied (and ready to go) below, skip to step 2.
Your picture should be square, or have even dimensions. If it is not, the largest dimension should be either 16 or 32 pixels maximum.
For this project we will use Irfanview, our favorite free graphics viewer which we use for all simple image manipulations. Irfanview can be located by clicking the button below.
You can also use one of the many free favicon generators available by doing a simple search for favicon maker on Google.
| </head> |
The easiest way to find this </head> text is to put (click) your curser in the Edit Template window, and press Ctrl+F
This will open the find window as shown in the picture above.
In this find window enter only the </head> text (shown in the frame above) and click the next button at the bottom of the "find" window. Bingo, you are now at the correct location.
| <link href='REPLACE THIS WITH YOUR FAVICON URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/> |
TEXT 2
Now, directly above the html </head> snippet you just found (TEXT 1), copy and paste the text string in the frame above (TEXT 2).
First, though, change the REPLACE THIS WITH YOUR FAVICON URL section into the URL of your favicon. Do not change anything except for the red section.
The image above is with the new favicon html inserted just before the closing </head> tag we initially found in your template.
| <link href='http://www.zorly.com/blogbait_blogger/favicons/YinYang.ico' rel='shortcut icon' type='image/vnd.microsoft.icon'/> |
In this case we used the YinYang icon, so the inserted section looked like the piece above (with the Yin Yang favicon URL replacing the red text section).
Click the SAVE TEMPLATE button and you are now in business.
New Favicon is in!
View your blog and note the change. Sometimes browsers are finicky about showing your new favicon, but everyone else will see it instantly. You may need to clear your browser cache, or check it in anther browser, in the beginning.
Also, it you will need to make a new bookmark or favorite if you want to see the favicon there. The old favicon will remain with an old bookmark you made before installing the favicon.
That's it. Easy as one, two, three.
| Share this post : |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
********************************************************************************
Chinese
French
German
Italian
Japanese
Korean
Russian
Spanish
