Prepare a simple logo close to a square and create an ICO containing 16, 32, 48, 64, 128, and 256px. Especially check 16px and 32px in browser display.
Choose a shape that can be understood even if it is made small.
The favicon appears very small in tabs and bookmarks. Thin text, complex photos, and long logos tend to get crushed easily, so initials and simple symbols are better.
Ideally, the original image is square. You can also convert it to a rectangle, but the margins may become larger because it will be reduced to the center.
Check background and transparency
PNG can retain transparent backgrounds. Choose a color that is visible in both dark and light browser themes to avoid outlines blending into the background.
JPEG cannot have transparency. If you use a photo or image with a colored background, make sure the corners are the same color as you intended.
Put multiple sizes into one ICO
ICO can store images of multiple resolutions in one file. Pixel Toolbox lets you choose the size you need from 16, 32, 48, 64, 128, and 256px.
Unless you have a special reason, selecting All makes it easier for browsers and Windows to use a resolution close to the display location.
Pay attention to cache after installation
Even if you install a favicon on your site, the browser may cache the old icon and it may not change immediately. Also check in another browser or private view.
Some sites use not only ICO but also PNG icons and Web App Manifest. Please check the specified file name and size of the system you are using.
Size that can be stored in ICO
Create PNGs of each size and store them in one ICO container in order.
Confirmation before and after ICO creation
- ✓Using a simple, almost square image
- ✓Viewed on both light and dark backgrounds
- ✓choose the size you need
- ✓Confirmed 16px and 32px
- ✓I confirmed the installation location specification.
ICO conversion
You can create an ICO file containing multiple selected sizes from JPEG/PNG.
ICO conversion→This article gives general guidance. If a recipient, printer or official service provides its own requirements, follow those requirements first.
A SMALL NOTE FROM SPACEThe smaller the star, the more important its shape characteristics are. Let's place a mark that can be recognized even by 16 pixels in a corner of the universe.