Blog Archive

How to remove that pesky blogger favicon

Edit: I want to note that Blogger has since updated their layout tools to allow for easy customer favicon replacement. Go to your Blog's Overview page and click on the layout menu. A new widget option now exists called "Favicon". Note that the favicon must still be of acceptable dimensions and size. Feel free to read below for more details on making and hosting favicon images.

I used to have a bad case of blogophobia. If a website I visited looked like a small-time blog, I stayed the hell away from it. I don't know why I didn't give them a chance for so long but I know I am not alone in this. That is why it is so important to make yourself seem as professional as possible. Sure, your content can be wacky and entertaining but as long as you continue to look like a budget blogger, a lot of people browsing the web might not give you the time of day. Any successful blogger (note: not me) will have a long list of things that you can do to make your blog better.

Here is a short list of a few of those things:

Remove the Blogger Navbar
Create a custom URL for your blog
Know where to place your ads
Use Custom Templates

I have done a few of those ideas myself (see missing navbar and custom url above), but one thing that always bothered me was the address icon (fav icon) that sat next to my web address. The orange, bulbous little B sitting there mocking my stinginess for not being willing to pay for my own domain hosting. So I dugg around the net and came across a few methods for trying to remove it. After a lot of (not really) experimentation, I found this little gem of a method to finally banish that bastard B away from your blog site.

Step 1
First thing you have to do is create your favicon. You can use a variety of tools for this, from MS Paint to Adobe Photoshop. You can even find online favicon illustrators (found: here and here) that you can use instead. Personally, I used Photoshop and created a 64 x 64 image to use for my icon. Favicons can range in size from 16 x 16 up to 64 x 64 depending on OS, browser, and chosen icon use so this is why I did not start with just a 16 x 16 pixel graphic.


If you are new to photoshop or some other graphics program, google some tutorials on how to design in your chosen program. Once you have completed your graphic, save it as a .jpg or .png somewhere onto your computer.

Step 2
The next step is to convert your image into a proper .ico favicon. This is easier to do than you might think. If you have the .ico plug-in for photoshop you could save it as an .ico file already; however, for those who don't (and I'm sure that is most) a large number of sites offer online apps that will do the work for you.

Here is a list of these favicon sites that you can upload your image to convert and use. Ranked from most preferred to least.

http://www.html-kit.com/favicon/

http://www.chami.com/html-kit/services/favicon/
http://tools.dynamicdrive.com/favicon/
http://www.favicon.co.uk/
Google more, I'm sure they are there.

I used the first link and found it easy and quick to upload and customize my icon. One simple click and my image was uploaded to the page and converted. Then another click and I was ready to save my icon package.



Downloading your favicon package will store your new favicon file back onto your hard drive. Once you have completed this, you only have two more steps to go.

Step 3
This next step is simple but important. You must find a suitable hosting environment for your favicon. The important thing to consider here is you must chose one that will allow you to upload files other than pictures and where you can obtain access to a direct link of the file being uploaded. Hosting sites such as Megaupload and Rapidshare will not work for this. It is also important to find a place that will store your image for a long period of time so you won't have to keep uploading to a new spot.

I used Mediafire.com (I even created an account, which I recommend you also do to keep track of your files but it is not required to upload). I can't guarantee that this site works so I recommend going with your own known hosting site.

Whatever hosting service you pick, upload your .ico file onto it and find where you can copy a direct url link to your file. For Mediafire.com, this is done by clicking on the file you uploaded and once the file download page has opened, right clicking on the link titled "Click here to start download."


When the right-click menu opens you will chose the "Copy Link Location" option and click it. You have now successfully copied the direct url for your favicon.

ADD: With the failure of mediafire in my case, I have switched to another free hosting service. FileDen.com is an effective alternative but I would not recommend it for many. First, while it is free, it requires detailed registration information for your account (address, phone number). This raises your risk of receiving spam significantly so if you use this site, put a fake address and number into it. Second, the ads. God so many ads. Just signing up you will go through 4 pages trying to get your real phone number before you can register. Third, if you don't log in every 60 days, your files will be deleted. The only benefit it provides is the ease of obtaining direct links.


Here is a pay hosting alternative that seems to work though (and at only $0.99 a month):
http://www.filesavr.com/ - PAY Hosting (Easy direct linking)


Only one more thing to do!

Step 4
Time to finally replace that dreaded blogger favicon! Hell yes. Let's get finished.

Head to your blog. For me, I chose to prepare my upcoming comic-based blog "Dan and Man". Once in your Dashboard, go to "Layout" and then choose the sub-menu "Edit HTML". This will take you to your template page so you can edit and change the HTML for it. First thing you should do when on this page is back up your existing template. We aren't changing much but you can never be too safe. Do this by clicking "download full template" at the top of the page.

For anyone worried because they have never touched this area before, don't freak. We aren't going far. We will be putting some code in right underneath the end part of this line:


It should be located somewhere toward the top. Once you have found this part, type the following code in underneath it:


Where it says "PLACE YOUR FAVICON URL HERE" simply paste in the direct URL you copied earlier into that gap. If you don't have that url copied anymore just return to Step 3 again and copy your direct URL a second time.

In the end, the HTML for your template should look something like this.


Click "Save Template" and view your blog to see all your hard work. Yup! The Blogger favicon is finally gone. Congratulations. You are one step closer to making your blog look more professional than it really is. Isn't the internet wonderful?!

15 comments:

favicon said...

Interesting, but the blogger favicon keeps showing up when save your page as favorite in firefox for example.
Check this site, which shows all the favicon it can find on your page

Get faviconThere you can still see the blogger favicon.

Anonymous said...

Wow. That is pretty interesting actually. But it makes sense. As far as I know, this code workaround merely replaces the favicon being displayed. I don't believe it removes it completely.

Since we aren't taking any code out of the HTML template, it only makes sense that the Blogger favicon would continue to hide somewhere.

Seo Services India said...

Hi Friend,

Thanks for your good sharing. Its very helpfull.

Brennan Neil said...

My icon shows up in every browser but opera. How do I fix this?

Anonymous said...

Buy Generic Tamiflu Online. Order Generic Medication In own Pharmacy. Buy Pills Central.
[url=http://buypillscentral.com/news_en-us.htm]Discount Viagra, Cialis, Levitra, Tamiflu Drugstore without prescription[/url]. Indian generic drugs. Cheapest drugs pharmacy

Basil said...

hi this is very helpful. will implement in my blog too

Anonymous said...

When you position Cialis or some other meds in our machine shop you may be sure Cheap Discount Cialis Pharmacy On-line that this product only of pre-eminent grade desire be delivered to you positively in time.

Anonymous said...

blog.safetyfist.com is very informative. The article is very professionally written. I enjoy reading blog.safetyfist.com every day.
payday loans canada
canadian payday loans

Anonymous said...

[url=http://community.bsu.edu/members/buy+online+Viagra.aspx]Online Order generic cheap Viagra no prescription[/url]

Anonymous said...

Good Morning!!! blog.safetyfist.com is one of the most outstanding informational websites of its kind. I enjoy reading it every day. I will be back.

Anonymous said...

miley cyrus nude [url=http://crystal-liu.com/forums/index.php?showuser=1113]miley cyrus nude[/url] miley cyrus sex tape [url=http://forum.ondertitel.com/index.php?showuser=74503]miley cyrus sex tape[/url] miley cyrus nude [url=http://stabilo.forumsunlimited.com/index.php?showuser=799]miley cyrus nude[/url] miley cyrus nude [url=http://ragga-jungle.com/user/15036-vebsterd]miley cyrus nude[/url] kim kardashian nude [url=http://forums.quark.com/members/vebsterd.aspx]kim kardashian nude[/url]

Anonymous said...

Sorry for my post .Where i can watch more info about?

Anonymous said...

After reading you site, Your site is very useful for me .I bookmarked your site!

Byooot said...

Thanks for the great info. but you dont really have to open an account to upload your image... you know what i just uploaded it on blogger itself :) i created a new post and insrted the image (gif) then deleted the post and kept the image after copying the link

sathya said...

I like your blog, It is very good. I am very happy to leave comment here for you!
Magento programmers hire