RustDSH Icon Preview
Two candidate marks, the fin and the whale tail, rendered at every size a browser tab, home screen or launcher will show them. The mock surfaces use their real colours so the page theme never tints the icon under test.
Try your own icon
Processed in this browser tab with canvas. Nothing is uploaded anywhere.
Browser tabs at 16 px
Pinned tabs on the left carry every mark in all three variants. Open tabs show the selected mark.Phone home screens
iOS · 180 px asset, shown at 60 px with the system squircle
Android · maskable 512 px asset through launcher masks
Dashed ring is the 80% safe zone. The last tile is what Chrome does with a non-maskable icon: shrinks it onto a white disc.
Desktop and install surfaces
Chrome install dialog · 48 px
macOS Dock · 128 px asset at 52 px
Windows taskbar · 32 px asset at 24 px
Android splash · 512 px asset on background_color
Findings
The wordmark does not survive favicon sizes. At 16 and 32 px the word collapses into a grey and orange bar. It first becomes readable at 64 px and is comfortable from 128 px. Use the full logo for the splash screen or a 512 px store listing, never in the tab.
Fin at 16 px is the cleaner of the two. It stays a single bright wedge over the gear. The tail's two flukes fuse into one lump with a faint notch, so at 16 px it reads much like the fin anyway. From 32 px up the flukes separate and the tail is the more distinctive shape.
Transparent variants lose the white shape on light tab strips. On Chrome light only the orange gear remains, for both marks. On dark strips the transparent version is the cleanest of the three. Do not ship it as the only favicon.
The square tile shows its edges on dark strips. The ground is #0D0C0B against Chrome's #202124, so the tile appears as a slightly darker square with hard corners. The rounded tile reads as a deliberate app icon on both light and dark.
Gear teeth blur into a ragged ring at 16 px but the orange and white two-tone still separates the icon from neighbouring favicons. At 32 px every tooth is distinct.
Maskable icons keep every tooth inside the safe zone. The fin sits at 73% of the 512 px canvas and the tail at 79%, each with its farthest pixel at 97% of the safe radius, so the circle mask never clips.
Recommended set. Rounded tile for the favicon, opaque square mark for the Apple touch icon and the manifest's any entries, the maskable file for Android. Pick fin or tail from the pinned tabs above. Fin wins at 16 px, tail wins from 32 px up.
Use the files
icons/fin/ and icons/tail/ each hold
- 16 … 512.png — opaque square mark
- tile-16 … tile-512.png — rounded tile, transparent corners
- alpha-16 … alpha-512.png — transparent mark
- maskable-512.png — Android adaptive
- apple-touch-icon.png — 180 px opaque
- favicon.ico — rounded tile 16, 32, 48
- favicon-square.ico, favicon-alpha.ico
- manifest.webmanifest
Head snippet, swap tail for fin if you prefer
<link rel="icon" href="/icons/tail/favicon.ico" sizes="16x16 32x32 48x48"> <link rel="icon" type="image/png" sizes="32x32" href="/icons/tail/tile-32.png"> <link rel="icon" type="image/png" sizes="192x192" href="/icons/tail/192.png"> <link rel="apple-touch-icon" sizes="180x180" href="/icons/tail/apple-touch-icon.png"> <link rel="manifest" href="/icons/tail/manifest.webmanifest"> <meta name="theme-color" content="#0d0c0b">
To see the real favicon in your own tab, serve the folder and open index.html there, then use the Fin and Tail buttons to swap it live. The shared page runs inside a frame, so its tab icon is the host's.