Photo Editor · Windows 10 and 11
Make a favicon for your website
Start a 512-pixel square, put your logo or a letter on it, and export the PNG sizes browsers and phones ask for. Octoolo makes them on your own PC. It exports PNG favicons; it does not write .ico files.
How to make a favicon
- 1
Start a square
In the Photo Editor, choose File › New…, type 512 for W and H, and pick Transparent as the Background. Or open your logo and make it square with Image › Canvas size….
- 2
Design it
Place your logo with File › Place a picture…, or type a letter with the Text tool (T) on a shape from the Shapes tool (U). Keep it bold and simple.
- 3
Export the large one
Press Export, choose PNG, keep the full size, and save it, for example as icon-512.png.
- 4
Export the small ones
Export again for each smaller size, typing 192, 180, 32 and 16 in the W box next to Size, one file each.
Which sizes a website needs
| Size | Where it shows |
|---|---|
| 16 × 16 and 32 × 32 | Browser tabs, bookmarks and history |
| 180 × 180 | The icon an iPhone or iPad puts on the home screen (apple-touch-icon) |
| 192 × 192 and 512 × 512 | Android home screens and installed web apps (the web app manifest) |
Upload the files to your site and link them in the page's head, for example:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png"><link rel="apple-touch-icon" href="/apple-touch-icon.png">
Website builders usually have a favicon box in their settings instead; give it the 512 or the 32-pixel file, as it asks.
PNG, not ICO
Octoolo exports favicons as PNG files. Every current browser uses a PNG favicon when the page links it as above, so most sites need nothing else.
The older .ico format, which can hold several sizes in one file, is still looked for by some old browsers and tools that ask for /favicon.ico by name. Octoolo does not write .ico files. If you need one, make it from your 32-pixel PNG with a converter that writes ICO, and keep the PNGs for everything else.
Keep the 512-pixel PNG, or better the project saved with File › Save, as the master: every other size is made from it in a minute.
Designing for 16 pixels
A favicon is mostly seen tiny, so it works on different rules from a logo:
- One idea. The first letter of the name, or the logo's symbol without the words.
- Thick shapes, strong contrast. Thin lines and small details vanish at 16 pixels.
- Use the whole square. Leave only a small margin; a tiny mark in a big empty square reads as a dot.
- Think of dark tabs. A dark mark on a clear background disappears in dark browser themes. Put it on a colored shape, such as a rounded square from the Shapes tool with a Radius, or give it a light Outline under Effects.
To check the small sizes, open an exported file and press Ctrl 1 to see it at 100%. If the 16-pixel one turns to mush, simplify the design rather than sharpening the file.
Starting from a logo
Open your logo in the Photo Editor. An SVG opens as a picture at least 2,000 pixels on its long side, so it stays sharp. If it is wider than it is tall, choose Image › Canvas size… and make both sides the same, with the logo in the middle, or crop it square around the symbol.
A logo on a white box looks odd on a gray tab: remove the background or select the white with the Similar colors option of the Select an object tool (W) and delete it.
Drawing the icon from scratch? The Vector Editor has an Icon (512 × 512) and an App icon (1024 × 1024) preset and exports PNG at exact sizes straight from the shapes. For the full logo, see the logo maker.
Octoolo or an online tool?
| Detail | Octoolo | A typical online tool |
|---|---|---|
| Your files | Stay on your computer | Usually uploaded to the site's server |
| Without internet | Works | Does not work |
| File size | No limit | Often capped on free use |
| Watermarks and ads | None | Common on free plans |
| Cost | $4.99 a month, all 17 apps | Free with limits, or a plan per site |
Questions, answered
Can it make a favicon.ico file?
No. Octoolo exports PNG favicons, which every current browser uses when the page links them. For an .ico, convert the 32-pixel PNG with a tool that writes ICO.
What size should a favicon be?
Design at 512 × 512, then export 32 × 32 and 16 × 16 for browser tabs, 180 × 180 for iPhones, and 192 and 512 for Android and web apps.
Can I keep a transparent background?
Yes. Start the canvas with a transparent background and export PNG.
Can I make one from text?
Yes. A letter or two in a bold font on a colored rounded square is a classic favicon, made with the Text and Shapes tools.
Does it work offline?
Yes. Everything is made on your PC, and nothing is uploaded.
Can I make app icons the same way?
Yes, at any square size. Export the sizes the app store or the platform asks for from one large design.
Favicon generator, and 16 more apps.
Download for Windows7 days free, then from $3.99 a month for all 17 apps. Windows 10 and 11.