How to Create Favicon Online with Free Favicon Generators

Do you like our new Favicon? Create Favicon online using free favicon generator tools to enhance your site branding. Favicons are the small icons which you see on browser tabs and browser bookmark lists which provides a visual identity of your brand in a small icon format, which is very useful for brand recall.

favicon designs

Many readers must have noticed that we recently updated our favicon, and here is how we designed the favicon from scratch using this cool online tool.

Create Favicon Online

Though there are many free online tools to create favicons online, we use the favicon.cc favicon generator, which allows us to create a new favicon in a few minutes.

create favicon

Here is how you can also create free favicon for your website in a few minutes

  1. You start with a 16 x 16 grid of transparent blocks.
  2. Use the pen to choose the colour from the huge range of colours in the colour grid, or alternatively if you have a preferred colour you can click on the hex code and fill your colour in the pop-up box (like 0000FF for blue).
  3. Simply click the box in the grid, and the particular colour will appear. Keep repeating this to get the design of your choice which is symbolic of your own site.
  4. If you want to remove the colour from any box, use the eraser also labelled as ‘transparent’, to create transparent boxes again
  5. The good feature is that the last used colours are all alongside so you can easily choose and switch between the colours
  6. Preview the favicon below the grid, and after you like it, simply download it to your computer.

preview favicon

Note that you can also import an image, and the favicon generator will convert it into a favicon which you can easily edit as per your needs and site design. If you don’t like the design, you can import the favicon again and edit it till you get a great favicon.

Upload the favicon.ico into the root directory of your server by FTP. For example, in our case it will be located quickonlinetips.com/favicon.ico

Link the favicon between the HEAD tags of your HTML file like this
<link rel="icon" href="http://quickonlinetips.com/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://quickonlinetips.com/favicon.ico" type="image/x-icon" />

Remember, it is a great idea to get a favicon for your blog or website for excellent branding, and superior brand recall of your site. Go ahead and create your free favicon online using this favicon generator easily.