Boost Your Brand by Making a Favicon
A favicon is an icon that's associated with a website and appears next to your "favorites" in the browser. It shows up in your favorites or bookmarks next to the site's title, as well as on the tabs.
You might be wondering if you should take the time to create a favicon. Is having a favicon as important as having great content and an easy-to-navigate site? No. But it's a simple thing that you can add to your site that give it just a little something extra.
Let's talk about pronunciation. Favicon is just one of those things that people pronounce differently. "FAVE-eye-con" or "fav-EE-can" or "FAV-ih-con"? It makes sense to pronounce it "FAVE-eye-con" since it's a mash-up of the words Favorite and Icon, but the most common way it's pronounced is "FAV-ih-con". Perhaps the many pronunciations are because this word was invented online, where pronunciation seemingly doesn't matter as much as spelling.
The smallest a favicon can be is 16 pixels by 16 pixels, which can present some design challenges. You might need to figure out the best way to represent your logo if it's not legible in a square of that size.
If you've got an image that you want to use that's not square, it's possible to shrink it so that it can keep its dimensions. However, if you decide to do that, it usually will make it much more difficult to decipher what it is. It would be much better for you to pick out a piece of that image and make it square.
For example, ESPN.com doesn't put their full name in their favicon. They only use the "E". The E is a nice size and still gets the point across that it's part of ESPN's branding. Here at Digital-Tutors, we use Papa Georgio instead of our entire name since he's a recognizable piece of our brand. Apple and Windows both use their simple logos.
There's a reason why you can't just shrink down your logo to 16x16 and call it a day. The issue is that by simply downsizing something without editing the image at the pixel level you can end up with something blurry and unrecognizable.
Luckily, there are a bunch of websites that make it possible for you to upload an image and then they'll create favicons for you. These free sites help you to make the pixelized version for the favicon. A popular one is X-Icon Editor. Another favicon generator is favicon.cc. These services make it possible for you to see what your favicon will look like in context, so if it hasn't adjusted the pixels to your liking, your able to edit them. You could also use the in browser tools to create a simple pixel based icon.
You'll want to make sure and create more than one size, because your favicon could be used a bunch of different places. For example, Internet Explorer 9 and above make it possible for users to pin a site to their taskbar. That icon is 24x24. Furthermore, retina displays often use 32x32. X-icon editor will create four sizes for you inside your favicon.ico file: 16x16, 24x24, 32x32, and 64x64.
Now that you've created a favicon, where do you put it? The favicon is saved in the root directory of your server as favicon.ico. You'll want to use .ico because modern browsers request a favicon.ico, so it's best to have one to avoid a "404 not found" situation. Plus, all browsers support .ico. An .ico file can also hold more than one icon, so there's no need to have more files for different sizes. Make sure you don't hide your favicon in a folder somewhere, because then the browser won't be able to find it.
Making a favicon can be a fun way to really think about your brand and what's recognizable about it. At the same time though, you don't need to worry about it. It can be something super simple.
For example, ESPN.com doesn't put their full name in their favicon. They only use the "E". The E is a nice size and still gets the point across that it's part of ESPN's branding. Here at Digital-Tutors, we use Papa Georgio instead of our entire name since he's a recognizable piece of our brand. Apple and Windows both use their simple logos.
There's a reason why you can't just shrink down your logo to 16x16 and call it a day. The issue is that by simply downsizing something without editing the image at the pixel level you can end up with something blurry and unrecognizable.
Luckily, there are a bunch of websites that make it possible for you to upload an image and then they'll create favicons for you. These free sites help you to make the pixelized version for the favicon. A popular one is X-Icon Editor. Another favicon generator is favicon.cc. These services make it possible for you to see what your favicon will look like in context, so if it hasn't adjusted the pixels to your liking, your able to edit them. You could also use the in browser tools to create a simple pixel based icon.
You'll want to make sure and create more than one size, because your favicon could be used a bunch of different places. For example, Internet Explorer 9 and above make it possible for users to pin a site to their taskbar. That icon is 24x24. Furthermore, retina displays often use 32x32. X-icon editor will create four sizes for you inside your favicon.ico file: 16x16, 24x24, 32x32, and 64x64.
Now that you've created a favicon, where do you put it? The favicon is saved in the root directory of your server as favicon.ico. You'll want to use .ico because modern browsers request a favicon.ico, so it's best to have one to avoid a "404 not found" situation. Plus, all browsers support .ico. An .ico file can also hold more than one icon, so there's no need to have more files for different sizes. Make sure you don't hide your favicon in a folder somewhere, because then the browser won't be able to find it.
Making a favicon can be a fun way to really think about your brand and what's recognizable about it. At the same time though, you don't need to worry about it. It can be something super simple.
