How to Make a Simple Favicon
By Tools Star Hub Editorial Team · Published
To make a simple favicon, enter a 6-digit background color, a 6-digit letter color, and up to two letters. The page draws PNG icons at 16, 32, and 180 pixels in this browser tab. The ICO file holds the 16 and 32 pixel images only. The 180 pixel PNG is the apple-touch icon and is not placed inside the ICO.
A browser tab icon and a phone home-screen icon are different sizes. Putting only the 180 pixel image in the ICO would skip the sizes a tab icon usually uses. This page draws the three PNGs and packs the two smaller ones into the ICO. It draws letters on a flat color. It does not trace a logo.
How to make a simple favicon
- Enter two 6-digit hex colors. Use a background such as #2563eb and a letter color such as #ffffff. The # and six hex digits are required. A 3-digit color such as #fff is rejected. The colors are not sent to a server.
- Enter one or two letters, or leave the box blank. One or two letters are centered on the square. A blank box draws a solid color. More than two letters is rejected. A line break in the letter box is rejected.
- Press Generate. Each size is a square filled with the background color. The files are drawn in this browser tab. Tools Star Hub does not send the colors or letters to a server or save them in local storage.
- Download the PNG sizes or the ICO file. Use the ICO, or the 16 and 32 pixel PNGs, for the browser tab icon. Use the 180 pixel PNG for the apple-touch icon. Generating the files does not add them to a website. You put the files where the site expects them.
Example
A blue icon with T
#2563eb background, #ffffff letters, and the letter T draws a blue square with a white T at 16, 32, and 180 pixels. The ICO contains the 16 and 32 pixel images only.
A solid color
The same colors with the letters left blank draw a solid blue square at each size. The 180 pixel image is still only the apple-touch PNG.
Things to watch
What the ICO does not contain
The ICO holds 16 and 32 pixel images only. The 180 pixel PNG is a separate download. Colors must be 6-digit hex. The letters are plain text on a flat color, not a logo trace.
When you already have a picture
This page does not resize a photo. Use the Image Resizer when you already have a picture and only need a new pixel size.
FAQ
- Why is the 180 pixel PNG missing from the ICO?
- The ICO is built from the 16 and 32 pixel images only. The 180 pixel PNG is the apple-touch icon, and it is a separate file.
- Why was #fff rejected?
- The page accepts a 6-digit hex color, such as #ffffff. A 3-digit hex color is rejected.
- Can the page trace a logo?
- No. It draws one or two letters, or a solid color, on a flat square. It does not open a logo file.
- Does Generate add the icon to my site?
- No. It draws the files in this tab so you can download them. You add the ICO or the PNGs to the site yourself.
To draw a letter or a solid color as PNG icons and a small ICO, use the Favicon Generator. It runs in the browser and does not require an account.