I’m sure you’ve seen them. Favicons are all over the internet. Although they’re tiny, these icons hold a lot of power. Here are some things to keep in mind when designing favicons.
What is a Favicon?
The word favicon is a shortened version of favorite icon. You’ve likely noticed these when you visit sites such as Facebook, Amazon and other big name brands – and many small ones. It is a small icon that appears in the top of the browser window.
In an age when people often have multiple browser window tabs open, a favicon allows the user to quickly navigate back to the correct page without having to open each tab to see what the website is.
Where are Favicons Used?
Favicons are used in three main places:
- In the address bar
- For tabbed browsing
- In a list of bookmarks
Just as with your logo, it is important that your favicon matches the rest of your branding throughout your website and marketing materials.
Imagine someone is browsing through several sites, and they have three or four tabs open in a browser window. Each site has a beautiful, custom favicon – and then there is your site with the default blank favicon. It will make your site look less trustworthy and credible than your competitors’ sites.
Tips for Designing a Favicon
Favicons are images, but they utilize the .ICO extension. Therefore, you can’t just create a JPG file and use it. You can use your own images, but they’ll need to be sized appropriately and you’ll need to upload them to a favicon wizard to have them translated into the correct format.
- Favicons are square and are typically 16 pixels by 16 pixels. Some sites do use slightly larger icons to show more detail, such as 24 pixels by 24 pixels or 32 pixels by 32 pixels.
- A favicon should reflect your brand image. Some great examples of favicons that are easily recognizable as a brand include Apple, Twitter and Google Plus.
- You can add transparency to your favicon, which means you can create a transparent background or easily overlay elements to create the exact look you’d like.
- Since the image space is so small, you should keep the design fairly simple.
You can use any image editing software of your choice to create the basic look of your favicon. Consider creating it in a 64 pixel by 64 pixel size. Then upload to one of the favicon editors listed below to translate into the correct size and into the .ICO extension you’ll need to upload it to your website.
Online Favicon Wizards
Once you have the basic design of your favicon, you’ll want to find a place where you can turn it into the right file extension.
- Favicon.cc – This site allows you to design a favicon from scratch, or upload your own image, make edits and save it as an .ICO file. One thing that’s interesting about this site is that you can study the favicons other people have created. You can look at recently uploaded and favorite icons. If you’re not sure what to do for a design, these examples can give you some inspiration.
- Favicon Generator – If you just need to take your design and convert it to favicon format, this site is easy to use. You choose the size you’d like your favicon to be – default size is set to 16 pixels by 16 pixels. Then, you simply hit the button that says Create Favicon. The site accepts JPEG, PNG, JPG and GIF.
- Favicon from Pics – This is an interesting way to create a Favicon. You can take any picture, even a photo from your Twitter profile, and convert it into a favicon. This can be particularly useful if you are an author, artist or someone who is the actual brand. It can also make for a colorful and interesting icon.
- Real Favicon Generator – One thing that is particularly helpful about this favicon generator is that you can make sure it is compatible across all types of devices and browsers. Also, you can check out your already designed favicon and get feedback about what can be improved.
With these free tools, you’ll be able to create a beautiful, professional looking favicon with just a few quick steps.
Uploading Favicons to Websites
Once you’ve created your favicon, you’ll need to upload it to your website. Simply load your site in the FTP tool of your choice, such as Filezilla. Upload the .ICO file with your favicon into the webroot folder.
Next, upload the following code into the HTML for your site between the <head> and </head> tags: <link rel=”shortcut icon” href=”favicon.ico”>
That’s it. Your favicon should now appear when a browser loads your website.
Favicons add a lot of interest to your website. They can help seal your brand as professional and consistent. It takes just a small amount of time to build a favicon, but you’ll get big payoffs from the design.Buffer