What is a favicon and why does it matter for digital branding?
The history of the .ico format, how browsers look for a favicon on their own, the iOS Safari black-corner bug, the Android safe-zone trap and AkiTao's minimal 5-file set.
A favicon (short for "Favorites Icon") first appeared in 1999 with Microsoft's Internet Explorer 5. It started as a small 16x16 pixel image at the root of the server, shown next to the site name when a user added the page to their bookmarks ("Favorites").
Today a favicon appears in far more places than the tab and bookmarks: browser history, address bar suggestions, mobile search results, iOS and Android home screens, and PWA splash screens.
If a page does not declare a <link rel="icon"> tag, the browser requests /favicon.ico from the root of your website on its own. Without that file, the server answers each of those requests with a 404. Every favicon set should therefore include a favicon.ico at the root.
The .ico format and the SVG era
.ico is Microsoft's original format. Unlike PNG or JPEG, an .ico file is a container holding several images of different sizes. A standard favicon.ico typically packs 16x16, 32x32 and 48x48 pixel versions.
Modern browsers also accept SVG (Scalable Vector Graphics) favicons. SVG stays sharp at every pixel density without generating dozens of PNG files. You can also embed a CSS media query in the SVG itself to switch the icon color with the operating system's light or dark mode, as in the example below.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
path { fill: #070b14; }
@media (prefers-color-scheme: dark) {
path { fill: #00d4ff; }
}
</style>
<path d="M50 15 L85 80 L15 80 Z" />
</svg>iOS Safari black corners and the Android safe zone
Mobile icons have two traps that catch many designers and developers: black corners on iOS Safari, and Android cropping the icon to the launcher's shape.
When a user chooses "Add to Home Screen" on iOS Safari, apple-touch-icon.png must have an opaque background with no transparent pixels in the corners. With a transparent PNG, iOS paints the transparent areas black, and your logo shows up on the iPhone home screen with four black corners.
Android uses Adaptive Icons to crop an icon to each launcher's shape (circle, squircle, rounded square). The logo must sit inside the central safe zone, 80% of the diameter, and the background color must fill the whole canvas. Otherwise the logo loses detail to the crop or shows an empty border.
AkiTao's 5-file favicon set
Many older favicon generators export a ZIP of more than 20 images in every size (16x16, 24x24, 57x57, 72x72, 114x114...). That is a leftover from Internet Explorer and old iOS and Android versions. Declaring all of them in HTML only clutters the source and the directory.
AkiTao picks the smallest set that still covers modern browsers and mobile devices. You need only 5 files:
- ◆favicon.ico: a container holding 16x16 and 32x32 versions, placed at the root for older browsers and to stop the 404 requests.
- ◆apple-touch-icon.png: 180x180 pixels, opaque background, logo inside the safe zone, for iOS.
- ◆icon-192.png: 192x192 pixels, the launcher icon for Android and PWAs.
- ◆icon-512-maskable.png: 512x512 pixels, declared with
purpose: "maskable"for Android adaptive icons and PWA splash screens. - ◆manifest.json: describes the app name, theme color and icon list so the operating system can recognize the app.
The AkiTao Favicon Generator builds these 5 files from a logo you drop in. The download also includes icon-48.png and icon-96.png for SEO, plus an HTML snippet to paste into <head>. The image is processed in your browser and never uploaded to a server.