How To Make A Favicon For Your Site in 5 Easy Steps
What is a favicon? Well, you know how sometimes, when you go to a larger site, or a more pimped out site, or a site where the owner is somewhat obsessive about insignificant details (cough), there is a lot of times a little square logo just to the left of the url in the address bar? Like, say, my site? See that little box in the address bar of your browser? Or, if you have me bookmarked, you might see it to the left of the site in your bookmarks? Yeah, that one. Isn’t that cool? Have you ever wondered what that is, and why you don’t have one? Well, I’m here today to bring the favicon to the people, my friends because although it might seem like a horrendously complex thing that is only available to very large organizations, the favicon is in fact a very easily accessible feature that you can add to your site on your own without too much difficulty. And is it going to do a whole lot in terms of adding security, or increasing your Google Page Rank? No, of course not. But it will look cool, and it will make you look like you know what you are doing, and that is half the battle, people.
- Find a square logo you want to use to represent your site. You need a small image that can be used as a symbol of your site. The avatar you use on Twitter is a good choice, provided it is a logo of some kind and not a picture. While there is technically no reason why you cannot use a picture as your favicon, the size of the image is so tiny, it’s probably not going to look right. So try to find an image or a letter, or just a very small version of your site’s name (like mine above).
- Shrink the logo down to 16 pixels by 16 pixels. You can use Photoshop to do this: just go to Image–>Image size to change the size of the logo. You should end up with something remarkably small.
- Convert your logo to .ico format. The way you tell a browser to use a favicon is by uploading a file to your site’s main folder that is in the .ico file format. There is a very small possibility that your copy of Photoshop can do this, but just in case it cannot, all you have to do is go to a site that will do it for you, like this one. Upload the image there, and it will spit out an image in the .ico format. For simplicity’s sake, please name this file “favicon.ico.”
- Upload the file to your site’s main folder. Use your FTP program to upload your favicon.ico file to the main folder of your blog, or the “public_html” folder, if your hosting company uses a public file to maintain a distinction between public folders and other folders.
- Wait patiently. Getting browsers to view favicon files is sometimes a slow process, so don’t be upset if you cannot see it in your browser right away. Sometimes it takes a little while to see it at all–or sometimes, you’ll be able to see it in Firefox but not in Safari, or vice versa. Just wait a few days and you should be able to see it everywhere.