Below you can see a quick guide to the different formats and dimensions you'll need to supply to cover all of the main use cases. Favicon size cheatsheetĪs mentioned before, different contexts require different sized favicons. This version is used in grid-like bookmarks and shortcut menus where the browser or device masks the background, to achieve a uniform look in context. This version is shown in the URL bar, bookmarks lists and other places where the favicon appears next to your website URL or name. To ensure your favicon looks good in the many different contexts it's going to appear in, ideally you should provide two favicon styles:

This makes it hard to predict how your favicon will be displayed to the end user. Today, favicons are displayed in a lot of other contexts, including bookmarks lists, shortcut menus and even mobile and TV homescreens. When favicons were first introduced in Internet Explorer 5, they appeared in the URL bar and in the bookmarks list. Next click on Download ICO.Different backgrounds work well for different contexts (Image credit: Michael Flarup / Apply Pixels) Press Choose File button, select an image. Also, you need to provide a square-shaped image, not a rectangle because you will get stretched favicon. png format with transparent pixels to save custom shape in the converted file. If you already have an icon image you can use favicon.io to generate favicon. To generate and get your custom favicon click on the ICO button. Make sure you have selected bold font family and dark fill color. You can remove the whole background and leave only text part. You can set font and background color with corresponding settings. Take a time to select the right one.Ĭolors. The list is pretty long and one symbol may look absolutely different with different font family. You may choose from one of the Google Web Fonts. White space will be set as transparent in the generated file.įont Family.

You can set square, circle or rounded option to define a shape of the icon. In my case, I used > symbol, which is often seen in consoles and terminals which is related to the theme of the website.

I recommend using one symbol because favicon is pretty small and a visitor will not be able to recognize two or more symbols. Then you can see properties to change the look of the icon. The most right one is actual favicon with 16x16 px size. Let's see how it works.Īt the upper part, you can see a preview of the favicon in different sizes. But what if you need to create a simple temporary text-based icon for your new web project? Favicon.io works nicely for that purpose. There are a lot of online services generating a favicon from an image.

How to make a favicon concrete5