Skip to content

Favicon and Logo

General considerations

The preferred favicon and logo source is a vector format image. The preferred workflow is to create a logo.svg and convert it to .ico to obtain favicon.ico.

The preferred format is:

  • .svg for vector format images
  • .png for raster format images

The ideal canvas size is 256x256 pixels such that both the .svg and the .ico files maintain quality at all sizes. The ideal image is a shape that is discernible at a size of 32x32, clear at 48x48, sharp at 128x128 pixels and perfect at 256x256 pixels.

Obtaining the image

Vector format image sources

Creating good images is difficult, putting them together not so much.

Wikimedia Commons is a good source of free .svg images and can be found here.

Vecteezy is another good source of .svg images, although not all are free, and can be found here.

Editing the image

The proposed solution is an online editor.

SVG Edit

SVG Edit is a JavaScript-driven .svg drawing editor that works in any modern browser.

It is an open source project. Its repository can be found here. Its web application can be found here.

Method Draw

Method Draw is a fork of SVG Edit. It removes some features in exchange for improved usability and user experience.

Its repository can be found here. Its web application can be found here.

Vectr

Vectr is a free web and desktop cross-platform graphics software used to create vector graphics easily and intuitively.

Its web application can be found here.

Creating the .ico file

From an existing image

Out of a number of tested sites, the best results (anti-aliased, clutter-free one file output unlike a complex favicon generator site) were obtained from the following:

  • for vector format, CONVERTICO for .svg files can be found here and will produce a white background .ico file for transparent background sources
  • for raster format, CONVERTICO for .png files can be found here and will produce a transparent background .ico file for transparent background sources

If you need a transparent background, it is best to work in .svg format and convert the resulting image to the .png format. A simple and ad-free online converter can be found here.

From scratch

To design your own .ico file pixel by pixel, an online editor can be found here.