How to create a favicon for your website in few seconds?

There are a lot of online services generating a favicon from an image. 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. Let's see how it works.

Overview

At the upper part, you can see a preview of the favicon in different sizes. The most right one is actual favicon with 16x16 px size. Then you can see properties to change the look of the icon. And in the lower part download buttons.

Example preset to generate favicon of this website

Settings

Text. I recommend using one symbol because favicon is pretty small and a visitor will not be able to recognize two or more symbols. You can also use special symbols. In my case, I used > symbol, which is often seen in consoles and terminals which is related to the theme of the website.

Shape. You can set square, circle or rounded option to define a shape of the icon. White space will be set as transparent in the generated file.

Font Family. You may choose from one of the Google Web Fonts. The list is pretty long and one symbol may look absolutely different with different font family. Take a time to select the right one.

Colors. You can set font and background color with corresponding settings.

Transparent background. You can remove the whole background and leave only text part. Make sure you have selected bold font family and dark fill color.

Download

To generate and get your custom favicon click on the ICO button.

Convert image to the favicon

If you already have an icon image you can use favicon.io to generate favicon. Make sure you saved your image in .png format with transparent pixels to save custom shape in the converted file. Also, you need to provide a square-shaped image, not a rectangle because you will get stretched favicon. Press Choose File button, select an image. Next click on Download ICO.


1 april 2018 19 july 2018 297


More like this

Quakespasm. User manual. How to install, setup and play Quake 1

How to set Nginx to return 410 (Gone) HTTP response status code for certain pages?

How to remove a color banding (steps) and smooth a gradient in Photoshop?

How to batch rename multiple files in Windows?

How to play Terraria multiplayer with Steam friends

How to switch back to an old «New document» window in Adobe Photoshop CC 19?


Comments