Do you notice any changes? No? Yeah. It's a small change, you probably won't notice it until I tell you. So I'll just tell you. Look up by the address bar, at the top of your browser (assuming you are using Firefox). I now have my own icon up there! If you have no idea what I'm talking about, you must be using IE. So... just:
1. Favorite this blog
2. Look at the image next to it (it's not the typical blogger logo)
3. Get Firefox. ;)
Anyway, these little pictures are called favicons (stands for favorite icon, I guess). I just found out how to make a custom one! Lemme give you a quick tutorial. Just to let you know, this tutorial is meant for Blogger. The process is different if you've got your own website.
First of all, you are going to need an icon. It has to be 16x16 or 32x32. Anything bigger I think will just shrink down. So anyway, create your icon, (I used the GIMP,) and save it as "filename.ico". Obviously, replace "filename" with whatever you want. The ".ico" extension means it is an icon file (you should know this already). Most programs can't create icons though, that's another reason why I used GIMP.
So now, you have to upload your file to the internet. Unfortunately, many image hosting sites do not accept .ico files as valid images, so I had some problems figuring out who could host my file. After a bit of Google searching, I stumbled upon the perfect place: Google Page Creator. I had totally forgotton that they let you upload up to 100 MB of files. If you use Blogger, you should already have a Google account, so sign in to Google Page Creator with your account. Find the place where you can upload files, and upload it.
Now here comes the tricky part (if you don't know HTML). Open a new tab, and go to your blog. Customize it, and go to "Edit HTML". Now paste this somewhere in between the <head> and </head> tags:
<link href='http://mygpages.googlepages.com/myfavico.ico' rel='shortcut icon'/>
The <head> tag is right at the beginning, but you may need to use Ctrl-F to find the </head> tag, it's close to the bottom, but hard to find (or at least it was on mine).
Anyway, take that code and paste it between the <head> and </head> tags. I ended up putting mine right before the </head> tag.
You're not done yet though, there's one last thing you must do. Go back to Google Page Creator, and find your file in the list. Right click it, and click "Copy link location". This will copy the URL of the file. Go back to your blog HTML, and paste your file's location instead of http://mygpages.googlepages.com/myfavico.icoFor me, it ended up looking like this:
<link href='http://gollum9999.googlepages.com/Icon.ico' rel='shortcut icon'/>
Monday, June 16, 2008
Favicons
Subscribe to:
Post Comments (Atom)
2 comments:
Ah, I wondered if you could do that with Blogger. I was actually going to try it, but I kept forgetting. Thanks for reminding me and good tutorial. By the way, you can also use .gif files which can be uploaded to more places.
You can use GIFs? If I had known that... :p
Yeah. I didn't think it was possible with Blogger, but then I saw another blog that had one, so I decided to research it.
Post a Comment