Free Favicon - The Blog » Tutorial

Hosting Your Favicon with Dropbox

Free Favicon — Fri, 04 Dec 2009 16:45:08 +0000

Dropbox is a fantastic service. I use it regularly to sync files between my desktop and laptop. It does have other uses though, like sharing files with your friends and even hosting a website. While I would not recommend you host your main business website with a Public shared folder using Dropbox, using the service to host some images, like your websites favicon, has some advantages.

If you are using a service such as Blogger and want to add your own custom favicon you have several choices of where to host your favicon. You can upload it and host it on Google’s server, although last time I tried they did not accept the .ico format. That works until you want to change your favicon then you have to do it all over again including updating your code that points to your favicon.

You could host your favicon on an image hosting service, but then they might delete it at anytime. Again if you want to change your favicon you will be redoing all of the code.

Since Dropbox can host files that are publically accessable on the Internet you now have another option. Following the tips and tricks wiki to making your own website you can simple create a folder for your favicon, and copy your favicon into that folder. The advantage of hosting your favicon in your Dropbox public folder means you have more control over it. If you decide to change your favicon all you need to do is simply copy over your existing favicon and it will be replaced on your website. You don’t have to redo the code pointing to it, and you never have to worry about an image hosting service deleting it.

If you have not tried Dropbox, you really should give it a serious look. They offer 2gb of space for free, which is more than enough to share and sync files between computers.

They also have a great favicon if you are looking for some inspiration.

Share and Enjoy:

Blogger.com Favicon’s in Internet Explorer

Free Favicon — Thu, 02 Apr 2009 18:43:40 +0000

How to Add Your Favicon to Blogger is by far the most popular post on this blog. If you read through the comments you will notice that for some people it works perfectly and for others they seem to have a tough time getting it to work. The reality is that adding a favicon to a Blogger.com blog is a bit of a hack. Hacks sometimes break and do not always work for all web browsers. This is currently the case with adding a favicon to a Blogger.com blog hosted on Blogspot for Internet Explorer.

For those of you wanting desperately to have your favicon to work in Internet Explorer you have to use a .ico file, since it appears that Internet Explorer simply does not want to support the .png or other formats for the favicon. You can’t upload a .ico file to Blogger.com, that means you will need to host your favicon somewhere other that on Blogger.com. An option could be Google Page Creator.

You still need to insert the code just before the closing head tag. You code then would look something like this:

The code is currently installed on the Free Favicon Blogger test blog and it is showing in Internet Explorer 7 on Windows Xp Pro. If it does not work for you leave a comment and we will see if it can be sorted out.

Share and Enjoy:

How to Add Your Favicon to Blogger Update

Free Favicon — Fri, 21 Nov 2008 16:00:53 +0000

Google/Blogger broke the instructions in the previous post about how to add your own favicon to a blogspot blog by adding some HTML that referenced the Blogger.com favicon instead. Fortunately the fix for this is relatively simple. Here is what has happened.

Blogger.com has added their own HTML to the templates near the top referencing their favicon. It looks like this if you look at the source code.

favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>

The instructions on How to Add Your Favicon to Blogger in step three says to add your own HTML code referencing your favicon right below the tag. The web browser however will use the last reference so the Blogger.com favicon code was coming later on. The fix for this is to place your favicon code just before the closing tag that looks like this: .

Your code referencing your custom favicon then overrides the Google/Blogger.com code for the favicon and your custom favicon will return.

I tested this on the Free Favicon Blogspot blog and the favicon has returned. Give it a try on your Blogspot blog and let me know if it works.

Share and Enjoy:

How to Add Your Favicon to Blogger

Free Favicon — Tue, 17 Jun 2008 14:00:25 +0000

Update: These instructions do not seem to work anymore thanks to Google/Blogger changing something. I’ll post an update with new instructions if I find a way to fix it.
Update #2: Simple fix to this problem. The instructions have been updated in step three. Hopefully that will get it working for many of you again.

Blogger.com is one of the most popular blogging platforms on the Internet, yet if you have a blog with them you are often stuck with the default Blogger.com favicon. Hard to brand your blog with your own personal touch when you have the Blogger.com favicon on the address bar. If people bookmark your blog they won’t see your favicon and might quickly forget about your website. There is no reason why you can’t change the favicon on your Blogger.com blog to one of your own design. You just need to follow these easy steps and soon your Blogger.com blog will sport your great new custom made favicon.

First thing you need to do is create your own custom made favicon. In this case you do not have to use an image to favicon generator, but your image should be either a .gif or a .png. In you example we are going to use a .png file. If you are not sure what kind of image to use browse through some of the free favicons that we offer, perhaps there will be one there that you would like to use. If you do decide to use one of the many favicons we have to offer don’t click “Download this favicon” because that will give you a file in the Windows .ico format. Instead right click on the image of the and choose “Save Picture As”.
After you have the image you would like to use as your favicon, goto your Blogger.com blog and create a new post. It does not matter what you call it since you don’t need to publish it. Once you have created a new post use the image upload button to upload your favicon to your Blogger.com blog.

Once you have uploaded the image, you will need to switch to “Edit HTML” mode if you are using the “Compose” mode. Once you are looking at the HTML you will see something like this:
. You need to highlight and copy the part in quotes right after src. In this case it would be: http://bp0.blogger.com/_7rflRHkQmUU/SFc_ZW22lcI/AAAAAAAAASA/Y99-skckaeM/s400/favicon.png. You should paste it into Notepad or another text editor. You don’t want to lose this and you will be closing the Blogger.com editing window next.
Once you have the location of the image you uploaded copied, you can click on the Layout tab of your Blogger.com blog. Once you are at the Layout, you need to click “Edit HTML” Look in the HTML for a tag that says and right ~~below~~ above it paste:

Once you have those lines pasted into the template, copy the src of the image you want to use as you favicon that you uploaded earlier and paste it into the two lines you just added where the href=” is. In our case it looks like this:
Click save template and your Blogger.com should now have your fancy new custom favicon showing on the address bar when you visit your blog.

If you want to see how we did it take a look at our Blogger.com Free Favicon blog where we added our great favicon.

You can use other free hosting services to host your custom favicon, but you don’t want to use an image hosting service that deletes images after so many days. Using Blogger.com to host the images works well, but you could also use Google Page Creator, or even your Flickr account.

Have fun adding your custom favicon to your Blogger.com blog!

Update: It appears that Internet Explorer is being difficult and might need you to use a .ico file. Check this post for more information. Blogger.com Favicon’s in Internet Explorer

Share and Enjoy: