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 that you see on browser tabs and browser bookmark lists that provide 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 a 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 color from the huge range of colors in the color grid, or alternatively, if you have a preferred color you can click on the hex code and fill your color in the pop-up box (like 0000FF for blue).
  3. Simply click the box in the grid, and a particular color will appear (better to choose web-safe colors). Keep repeating this to get the design of your choice which is symbolic of your own site.
  4. If you want to remove the color from any box, use the eraser also labeled as ‘transparent’, to create transparent boxes again
  5. The good feature is that the last used colors are all alongside so you can easily choose and switch between the colors
  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.

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.

Add Favicon to your site

After you save your favicon to your computer, you need to add it to your site.

a) Upload to Server via FTP

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" />

b) Upload WordPress Site Icon

WordPress also now allows you to easily add a custom favicon to your theme.

In WordPress admin > Appearance > Customize >Site Identity > Select Site icon

Then you can upload your favicon easily and WordPress will take care of rest of the code automatically.

Share with friends

About the Author: P Chandra is editor of QOT, one of India's earliest tech bloggers since 2004. A tech enthusiast with expertise in coding, WordPress, web tools, SEO and DIY hacks.