Guides / Finipix / Putting it online
Make a Favicon Set From Your Logo (ICO, PNG, Apple Touch Icon)
Finipix guide · Resize and compress images for the web. Open Finipix
A favicon looks like a five-minute job: take the logo, shrink it, done. Then the tab shows a grey smudge, the iPhone home screen shows something that is not your logo, and after you fix it the old icon keeps coming back. Most of these problems come from three things: the logo was not made for tiny sizes, a file or tag is missing, or a cache is holding on to the previous version.
This guide covers the icon files themselves. For the image that appears when a link is shared in a chat app, see favicons and link previews (Open Graph).
The sizes that are actually used
You will find lists online with twenty or more icon sizes. Most of them date from older Windows tiles and browser versions. For a current site, four files cover the places your icon appears.
| File | Size | Where it shows up |
|---|---|---|
favicon.ico | 16, 32 and 48px in one file | Browser tabs, bookmarks and history. Browsers also request /favicon.ico at the site root on their own when a page declares no icon. |
icon-192.png | 192×192 | A higher-resolution icon browsers and search engines can pick, and the smaller of the two sizes Chrome expects in a web app manifest. |
icon-512.png | 512×512 | The larger manifest icon, used when someone installs the site as an app, for example on Android. |
apple-touch-icon.png | 180×180 | The iPhone and iPad home screen when someone uses "Add to Home Screen". |
Google Search also shows a site icon next to results. Its documentation asks for a square icon of at least 8×8 pixels and recommends one larger than 48×48, so linking the 192-pixel PNG as well as the ICO gives it a sharper option. Google also notes that it can take several days to weeks before a new icon appears in results.
Why a detailed logo turns to mush at 16 pixels
A 16×16 icon has 256 pixels in total. A logo with a wordmark, a thin outline and a small symbol has to squeeze every stroke into that grid. Lines thinner than one pixel become pale grey, letters merge into a blur, and two close colors become one. At 32 pixels it is better but still tight.
Ways to make a logo survive:
- Use the symbol, not the full logo. Drop the company name and tagline. If the logo is only a wordmark, use the first letter or two in the logo's typeface.
- Fill the square. Remove most of the empty margin around the mark. A small icon with wide padding becomes a dot in the tab.
- Thicken thin lines and raise contrast. A light grey outline on white vanishes. One or two strong colors read better than a gradient.
- Start from a square image. Prepare a square version of the mark at 512 pixels or larger. If you give a wide logo to a tool that crops to a square from the center, both ends will be cut off.
- Judge it at real size. Look at the 16- and 32-pixel versions at 100%, not enlarged. That is what visitors see.
Transparent backgrounds and iOS home-screen icons
A transparent background works well in a tab, with one catch: tab bars are light in some themes and dark in others. A black mark on a transparent background disappears in a dark browser theme, and a white one disappears in a light theme. If your mark is a single dark color, give it a light outline or put it on a solid rounded square so it works on both.
The home-screen icon is different. iOS draws the icon in a rounded square on the home screen, and transparent areas do not stay transparent the way they do in a tab, so the result can surprise you. The safe approach is an apple-touch-icon with a solid background color you choose, usually your brand color or white, and the mark centered with some breathing room. Do not round the corners yourself; the system applies its own shape.
Where the files and tags go
Put the files in the root folder of the site, next to index.html, so favicon.ico is at https://www.example.com/favicon.ico. Then add the link tags inside <head> on every page:
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
The 512-pixel file is normally referenced from a web app manifest rather than a link tag. You only need a manifest if you want the site to be installable on Android; for an ordinary page the tags above are enough.
Watch the leading slash. /favicon.ico means "from the root of the domain". If your site lives in a subfolder, for example a GitHub Pages project site at username.github.io/project/, the root is username.github.io/ and the icon will not be found. In that case drop the slash (href="favicon.ico") so the path is relative to the page. On a multi-page site in nested folders, use the full path including the subfolder instead.
Testing, and why the old icon will not go away
After uploading, check these in order:
- Open
https://your-address/favicon.icoand the PNG addresses directly in the browser. If they do not load, the problem is the file location, not the tags. - View the page source (Ctrl+U) and confirm the tags are in the head of the published page, not just your local copy.
- Open the page in a private window to see the icon without your browser's cache.
- On an iPhone, open the page in Safari, use Share, then Add to Home Screen, and look at the result.
Browsers cache favicons separately from the page and keep them for a long time, so a normal refresh often still shows the old one. If you replaced an icon and it will not change, add a version to the file names or links, such as icon-192-v2.png or /favicon.ico?v=2, and update the tags. A new address forces a new download. Do this once when you change the icon, not routinely, since Google asks for a stable favicon URL. Bookmarks and installed home-screen icons may keep the old image until they are recreated.
Making the set in Finipix
Finipix has a Favicon set tab that builds the whole set from one image in your browser. Nothing is uploaded.
- Open Finipix and switch to the Favicon tab.
- Drop in your square logo, ideally 512 pixels or larger. A non-square image is center-cropped to a square, so prepare a square version first if the mark is not centered.
- Pick a background color for the Apple touch icon.
- Download the ZIP. It contains
favicon.ico(with 16, 32 and 48px inside),icon-192.png,icon-512.pngandapple-touch-icon.png(180px), plus the HTML<link>tags to copy. - Copy the files to the site root, paste the tags into the head of each page, and adjust the paths if your site lives in a subfolder.
Other routes work too. Any image editor can export the PNG sizes, and there are online favicon generators that also produce a manifest file; some of those upload your image to a server, so check before using one for an unreleased logo. If you edit the head by hand, a text editor such as VS Code is the simplest place to paste the tags.
Next
With the icon in place, set up the preview image and title that appear when the link is shared, as described in favicons and link previews. Finipix's Share image preset can crop that picture to 1200×630; making images smaller for the web explains the rest of its options.
Want to try it on your own images? Open Finipix. It runs in your browser and your images stay on your device.