What is Favicon and How to Create One?

What is a Favicon?

You may have noticed that some websites and blogs have a little icon that appears next to the web address field at the top of the browser. This little icon is an .ICO file format and it is named Favicon (short version for „favourite icon”). This also appears when you save the link in your browser and gives you a graphical way of looking at it. Some of the browsers like Google Chrome and Mozilla Firefox support, .JPG, .GIF and .PNG formats, but .ICO format is the most common and it is the default. Internet Explorer only supports .ICO format, other formats can’t be displayed. Also, the Favicon appears at the bookmark/favourites toolbar next to the name of the page or as an icon on shortcuts created on your computer to a specific website. Nowadays, Favicon is used in all operating systems from iOS to Android, Windows, and Mac OS X.

How to Create a Favicon

You can use any image editor from Paint.NET to Adobe Photoshop or even online image editors such as LunaPic to create a nice, beautiful and interesting image that is similar to your website’s logo, also being suggestive. You need to create a square image of at least 32 pixels or 256 pixels. And if you want a transparent icon, please use a .GIF or .PNG file with transparent background.

How to Generate a Favicon

Another way to create a Favicon, for your website or software, is to use an online .ICO generator like Prodraw where you can choose a file to upload and to convert it to the proper file extension. You need to upload files smaller than 1 megabyte and after you choose the image, you can press the “upload it” button.

Next, you choose the width and height of your future Favicon, usually for Windows 7+ software such as screensaver generator, you need to have at least a 48 x 48 pixels and for the website you can choose even 128 x 128 pixels. In the end, you just choose your icon and you download it.

How to Setup Your Website Favorites Icon

Next step is to upload your new Favicon to your website directory through an FTP client and to add the following code into your HTML file in the header. The code should be placed after your <head> tag:

<link rel=”shortcut icon” href=”/Favicon.ico” />

Depending on what content management system you use, you can upload a Favicon through your theme customizer or your content management system dashboard like you do in WordPress or Joomla.

Why my Favicon.ico couldn’t be displayed?

You need to be sure that your icon has the correct size and format. Because a Favicon for Internet Explorer must be square in size and it needs to have the .ICO format not the .GIF one.

Can my website have multiple favourite icons for different web pages? And how I do that?

In order to have multiple favourite icons for each of the web pages of your website you need to upload all the wanted Favicons and then to write the HTML code in every page you want a Favicon so change the code „/Favicon.ico” and make it point to the specific favourite Icon you want to display for that page.

<link rel=”shortcut icon” href=”where your Favicon.ico file located” />

Also, an .ICO Favicon can encapsulate multiple images and even larger resolutions so you don’t compromise the readability of your Favicon.

How to “Steal” a Favicon

The easiest way to download a Favicon from a website is to use Google: enter in your browser’s address bar this code http://www.google.com/s2/favicons?domain=webhostingmedia.net and replace the domain name with the one you want to download the Favicon from.

Using other’s Favicon might conclude in legal problems, so I advice you to create and use your own personalized icon. Not only to avoid any legal consequences, but it is also better for your brand to be unique.

Why do You need a Favicon?

Originally, Internet Explorer only used Favicon.ico for bookmarks (MSIE 6.0 and older versions). But now, newer versions of Internet Explorer (7.0 and above) and most browsers such as Mozilla Firefox, Opera, Safari, Google Chrome also display the Favicon in the address bar on every visit and web page, so this is becoming more important than before, especially that a well-made Favicon is actually like a small logo of your website that represents the brand you just started to create. An animated Favicon makes things much funnier and attracts your visitors surely.

You should use a Favicon to personalize your website, to create a new brand, to use it as signature copyright, to attract visitors, to complete your website setup or just for fun.

Customization of Favicon

For iOS devices, you can use different HTML codes in order to customize your chosen Favicon such as

  • rounded corners using

<link rel="apple-touch-icon" href="somepath/image.png" />

  • without reflective shine

<link rel="apple-touch-icon-precomposed" href="somepath/image.png" />

Bonus: other important images you need to have on your website that increases your brand’s popularity

  • Avatars are important because you can see what image represents your visitors and commenters, but also, you can have your own avatar that represents you and your business.
  • The logo is one of the most important images you really need to have because it’s big and you can see it on every page at the header of your website. The logo can include even words, not only an image.
  • Sometimes, it is a good idea to have a header banner or even an animated banner created with sliders and positioned at the header of the website. This banner can include images and texts from your last posts or other useful information for your visitors.
  • The banner exchange is very useful because other website owners can put it on their website and their visitors will know which website has that specific banner. Usually, this type of banners are smaller than the banner header and are rectangular.
  • Featured images are suggestive images that you can put at the front of each page and article so you make a friendly atmosphere for readers. Some WordPress themes allow you to directly upload featured images from the post/page editor and they can even create pages such as category page, tags page and so on where the title and the featured image of the page are displayed.
  • Social media icons are very useful to identify where the website has profiles, accounts, and pages, but also, people can share your content to their own social media profiles using the specific icons.
  • Menus are usually created using CSS, HTML, and text, but sometimes web developers use images for primary menus, secondary menus, sidebar menus, top bar menus, footer menus and so on.
  • Smileys can improve feedback and the number of comments can increase if you use them properly, but no spamming. They also can be used to express emotions and feelings regarding a person or the website’s content.
  • The mascot can be used especially at entertainment website where jokes are the usual type of content and where people enjoy having a lot of fun.
  • Backgrounds are sometimes used and sometimes aren’t used, but if you have one, you need to be sure that they aren’t repetitive in a buggy way and is probably better to have a fixed background where the text is visible.
  • Other: cart, search and so on are other important images, but they are depending on the type of website so if you have an online shop you can try and create a special cart and for search boxes you can use other custom image and not the default one.
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on RedditPin on Pinterest