A favicon, first created by Microsoft for the Internet Explorer Favorites menu and is short for favorites icon, is the icon you see to the left of the URL on the Internet address bar. You may also see it when you add a website as a bookmark.
In blogger, go to Design and click on Edit HTML. Microsoft says to put the code inside the header element and the Microsoft example shows the code before the title tag after the first head element. I put the code right under the /title tag. Be sure to first backup your template before making any changes. Change the dropbox href link to the public link you just copied from your Dropbox site. Make sure you have https for security instead of http:
<link href='https://dl.dropbox.com/u/
<link href='https://dl.dropbox.com/u/
http://msdn.microsoft.com/en-
http://www.freefavicon.com/
http://www.carrot-cake.co.cc/
Blogger has its own default favicon. When you create a new post on the blogger website, you get the default blogger icon, the orange and white logo. When I originally created my blog in 2009, I bought a custom domain through blogger because I didn't want the generic blogspot name. I also didn't want the blogger favicon on my custom domain.
Create the favicon
I found an appropriate image for my website and proceeded to look around for a solution to make the image load into the url as a favicon. I didn't know anything about how to make a favicon. I just knew I wanted to have my own unique icon. There are a number of sites that let you create a favicon or convert your image into a favicon for you, paid and free. I used http://www.favicon.cc/ to import my image and convert it into a favicon. Here are a few other sites where you can create a favicon:
I found an appropriate image for my website and proceeded to look around for a solution to make the image load into the url as a favicon. I didn't know anything about how to make a favicon. I just knew I wanted to have my own unique icon. There are a number of sites that let you create a favicon or convert your image into a favicon for you, paid and free. I used http://www.favicon.cc/ to import my image and convert it into a favicon. Here are a few other sites where you can create a favicon:
The standard pixel size is 16x16 for favicons. After the favicon is created, download it and save onto your local hard drive. The favicon has an .ico file extension.
Upload the favicon
There are a variety of sites with instructions dating back several years for getting a favicon to work in blogger, IE, Safari, Mozilla, you name it, with the .ico extension, or with a .png, .gif. or .jpg extension. I tried a number of different methods.
Testing with Safari and IE, either the favicon would display in Safari and not IE, or the favicon would display in IE and not in Safari. Extremely frustrating! Sometimes the favicon would display in blogger on Safari one day, and the next day it would be gone. I tried everything to get the favicon to work in both Safari and Internet Explorer, with no luck.
Apparently, from what I have been able to deduct, blogger will accept an .png, .gif, or .jpg favicon. However, IE will only accept an .ico favicon file, but blogger won't. Catch 22.
I ran across a site, http://www.freefavicon.com/
Go to https://www.dropbox.com to sign up for dropbox, if you don't already have an account. It is free for 2GB of storage. A good alternative to carrying flash drives around. Upload the favicon, you created in the above step, into the public folder in dropbox. Click on the favicon file in the public folder and move your cursor over to the drop down arrow on the right of the favicon file. Click on the drop down arrow. Click Copy public link.
Upload the favicon
There are a variety of sites with instructions dating back several years for getting a favicon to work in blogger, IE, Safari, Mozilla, you name it, with the .ico extension, or with a .png, .gif. or .jpg extension. I tried a number of different methods.
Testing with Safari and IE, either the favicon would display in Safari and not IE, or the favicon would display in IE and not in Safari. Extremely frustrating! Sometimes the favicon would display in blogger on Safari one day, and the next day it would be gone. I tried everything to get the favicon to work in both Safari and Internet Explorer, with no luck.
Apparently, from what I have been able to deduct, blogger will accept an .png, .gif, or .jpg favicon. However, IE will only accept an .ico favicon file, but blogger won't. Catch 22.
I ran across a site, http://www.freefavicon.com/
In blogger, go to Design and click on Edit HTML. Microsoft says to put the code inside the header element and the Microsoft example shows the code before the title tag after the first head element. I put the code right under the /title tag. Be sure to first backup your template before making any changes. Change the dropbox href link to the public link you just copied from your Dropbox site. Make sure you have https for security instead of http:
<link href='https://dl.dropbox.com/u/
<link href='https://dl.dropbox.com/u/
Note: I have an addendum to the above instructions on May 25, 2011. I ended up changing my favicon to a 32x32 and inserting the dropbox links just above the title tag and Safari was ok, but not IE. In order to get IE to work, I put the dropbox code just under the header tag, as well. So, the links are in both places, just under the header tag and just above the title tag. Finally! The reason for placing the links above the header code was because the blogger icon kept displaying in IE. The links are placed above the default blogger favicon for IE and below the blogger favicon for Safari. This method works in Safari, IE, Chrome, and Mozilla Firefox.
I hope this helps somebody who is having trouble.
Preview your blog, and you should see your favicon!http://msdn.microsoft.com/en-
http://www.freefavicon.com/
http://www.carrot-cake.co.cc/
No comments:
Post a Comment
"Comment As:" anonymous if you would rather not sign into an account!