How to Draw Favicon using InkScape

What is a Favicon

A favicon (short for favorite icon), also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons, associated with a particular website or web page.A web designer can create such an icon and upload it to a website (or web page) by several means, and graphical web browsers will then make use of it.

Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar (sometimes in the history as well) and next to the page’s name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab, and site-specific browsers use the favicon as a desktop icon. (Wikipedia)

Guides to draw Icon

There are many guides to draw the Icon on the internet and it is too long to explain here in this page. One of the guide is provided by Google in here:

1. icon keyline shapes by google

2. product icon anatomy by google

Using Inkscape To draw a Favicon

A favicon size is 16×16 pixel, you can draw smaller icon or image but the background size (usually transparent) are must be 16×16 px.

Preparing the Page

Open your Inkscape and Press Ctrl+Shift+D and it will open a Document Properties window.

  • In the Custom Size area, Change the Units to Px

3. change inkscape page size unit to px or pixel

  • Change the Width and Height to 16

4. how to make custom size on inkscape

  • The page size on your canvas will automatically change to 16×16 px.
  • Click menu View >> Page Grid. It will activate the page Grid in your Inkscape.
  • Zoom the canvas until it comfortable enough for you to work on your Icon. I zoomed my own until 2240% and I can see each pixel very clearly.

5. how to set page to draw favicon

Drawing the Icon
  • Put your Icon or drawing on the Page. Resize it as small as the Page. People mostly use their website or company logo as their favicon but if their logo is a complicated drawing they will make simple version of it. If you do not have a logo yet, draw an icon that represent your website the most.
  • Please consider not to put Icon or drawing with complicated looking like too much object or filters. Read the making Icon guides.
  • It is wise to leave at least 1 pixel for each side. So, basically the Icon size is 14×14 px and the background is 16×16 px.
  • Except your Icon is long or tall, it can be 10×14 px or something similar but at least leave 1 px to any side.

6. how to draw a favicon vector tutorials

  • Because if it full to the page, The Icon will looks too big and it will kinda uncomfortable to see in web browsers or tabs. Here is this website favicon for example.

7. how to create favicon

Exporting the Favicon to be a PNG file

After you done with create and editing the icon, the next step is exporting them to become a bitmap file. PNG is the best format for favicon in my opinion because it supports transparency.

So just Click menu File >> Export PNG image… or press Ctfl+Shift+E in your keyboard.

An Export setting will appear in your side bar (or a small window).

  • Choose tab Page, dont choose another tab like Drawing or selection because it will give you different result.
  • Make sure the Width and Height is 16
  • Make sure the pixel is at 90 dpi. The dpi is 90 by default and it will give you good result.
  • On Filename Column click Export as, Set the directory and the name of the file.
  • Click Export. Once it completed your favicon is ready to use

8. how to set favicon size

How to Upload the Favicon

Well, there are so many platform of website or blog nowadays and it have different method to upload favicon. Usually they are on Appearance Setting or Setting >> Theme.

I am using WordPress CMS with DualShock theme provide by MythemeShop. There is an option to upload favicon from Theme Option panel;

9. how to upload favicon in your website

That’s all I can share so far about drawing favicon using inkscape. I hope this tutorial improve your drawing experience in inkscape. Thanks for visiting.

Leave a Reply