How to Add Custom Favicon Icons to Your Website for Internet Explorer

3

# How to Add Custom Favicon Icons to Your Website for Internet ExplorerInternet Explorer 5.0 and later support custom bookmark icons. It is a subtle feature that most users ignore, but it offers a distinct visual advantage. The problem is simple: most webmasters do not know how to implement it. They leave their sites with the default browser icon. This makes their bookmarks blend into a sea of identical gray squares. Only a handful of sites actually utilize this function.Even the Microsoft site for Internet Explorer lacks a custom icon. That is a missed opportunity.## Why Small Icons MatterCustom icons boost traffic by improving recognition. Users bookmark many sites. They rarely return to most of them. The sites get lost in the crowd. A unique icon breaks that pattern. It jumps out when the user opens their bookmark bar. It serves as a visual cue. The user remembers the site better.This gives your site an edge. It costs nothing to set up. It only takes a few technical steps.## Creating the ICO FileYou need a suitable image first. Icons are simple. They are 16 by 16 pixel bitmaps. Internet Explorer will not use standard GIF or JPEG files. You must save the image as an ICO file.The format is special. It stores multiple sizes and color schemes in one file. Windows displays desktop icons differently based on monitor settings. A standard image file cannot handle this variability.Creating the file is not hard. Several online programs convert bitmaps to ICO format. Some allow you to generate the image directly. You can also download trial converter software. The instructions are usually clear.If you are designing the graphic yourself, keep it tight. Use 16 by 16 pixels. Stick to 16 colors. This ensures compatibility with older displays and reduces file size.## Deploying the Icon to Your SiteOnce you have the ICO file, you can place it on your server. There are two primary methods.### The Root Directory MethodThe simplest approach is to name the file `favicon.ico`. Place it in your **root directory**.For example, if your site is `www.howstuffworks.com`, the icon lives at `www.howstuffworks.com/favicon.ico`. When a user bookmarks any page on your domain, Internet Explorer checks the root directory. It finds the file. It assigns the icon to the bookmark.This method works for the entire domain. You do not need to touch individual pages.### The Directory MethodYou might not have root access. Free web hosting from an Internet Service Provider often restricts this. You cannot upload files to the root.You can still add custom icons. Upload `favicon.ico` to every directory containing web pages. Users might bookmark pages from any of these folders. The browser looks in the current directory first. If it finds the file, it uses it.This method also allows for variety. You can design different icons for different sections of your site. It keeps the branding consistent across subdirectories.### The HTML Code MethodYou can assign individual icons to specific pages. This requires editing the HTML code.1. Name your icon file something other than `favicon.ico`.
2. Upload it to any location on your website.
3. Add a specific line of code to the `