Today I want to talk about favicons and how to make them small, fast, and manageable. On this page, I will answer some questions about what a favicon is, why you should create a favicon, and give tips on creating an unforgettable one.

Definition

The favicon (or favorite icon) is a small icon that appears in the bookmarks menu at the top right of the search bar. Usually, it’s a file called favicon.ico located in the root directory of your server.

favicon design icons8 blog

Branding

Branding. Favicon serves as a visual mark to identify a website on the web, and it must look the part.

Usually, they’re just the brand or website logo shrunk down to 16 x 16 pixels, but any image can be used to represent a brand.

For our nazi readers: a favicon should not contain inappropriate symbols such as swastikas. Otherwise, Google will not show it and will use a generic favicon symbol instead.

Favicon Size

It isn’t straightforward.

In 2020, creating a favicon for multiple platforms is complex and challenging to get right, and it could take more than a dozen images to get the job done. If you are not working on a massive project with a corresponding budget, you do not have as much time to devote to a small task.

If you are interested in the history of iOS standards, I will refer you to an excellent article by its author. Otherwise, use the generator I suggest below.

favicon design article icons8

Tools

You can either find an appropriate favicon or draw a new one. In this article, I will introduce ten of the best favicon generators and some tools to create your favicons from scratch.

Favicon Generators

If you want to upload an image and have it converted to size and an ICO image file, there are several free favicon generators available.

There are tons of these, but all of them are mostly the same. Simply insert things like your company logo, your name and your image and the favicon of your website is ready to use.

I like RealFaviconGenerator for careful technical research.

If not:

  • favicon.io
  • favicon.cc
  • toolsiseek.com

As a bonus, these tools will provide you with the HTML code required to upload favicons to your website.

Finding a Favicon

Use Icons8 to search for an icon that is appropriate to your website. Free tier must be enough.

Search for an icon that represents your industry or your website.

Download it in the maximum free resolution (up to 100×100, depending on the icon set).

Use any of the abovementioned generators to create a favico.ico file.

favicon design article icons8

If not Icons8, there are some paid websites:

  • Streamline
  • Nucleo
  • Icon Finder
  • Noun Project

Drawing a Favicon

Sometimes your logo doesn’t fit the tiny format, and you will have to simplify it.

I recommend using an image editing program like Lunacy (a free tool). It’s modern, beginner-friendly, and powerful enough.

lunacy design software

If not, you may try

  • Sketch (Mac, $99/year)
  • Figma (cross-platform $12/mo).

Drawing icons is a craft. Creating icons for my whole professional life, I’ve noticed it takes about half a year of training to start making them right.

Couple of hints:

About the author: Ivan Braun, founder of Icons8

Review the checklist on creating an icon set, read about the types of icons in user interfaces, and learn how to integrate a huge library of design assets into your product.

Try tools for creators by the Icons8 team:

Icons8 Icons8, a library of about 130K+ icons and clip art images
Offline app icons8 Offline app and plugins to drag’n’drop icons and clip art to any design tools
Moose Moose, the big collection of high-quality stock photos
illustrations Ouch! , a library of vector illustrations and collages
Photo Creator Photo Creator, free collage maker with AI technologies to make custom photos
Vector Creator Vector Creator, free collage maker to make custom illustrations for your designs
Fugue Fugue, royalty free music for videos of any kind
Lunacy Lunacy, free graphic design software with built-in design resources
Smart Upscaler Smart Upscaler, image upscaler to enlarge and enhance images using AI
Generated Photos Generated Photos, unique, worry-free model photos generated by AI
Also, get the lists of free vector software and free photo editing software.
pinterest linkedin VK reddit