Member Avatar for wickedsunny

Hey guyz. i knwo how to put up a favicon. but it restricts the size to 16 x 16 or 32 x 32. but is there a way we can put up favicon liek microsoft corporation. its a long favicon. with like more then 32px width. do anyone knows how to do it?

thx

  • 6 Contributors
  • 6 Replies
  • 127 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by BSkiLLs

Dani AI

Generated

Short answer: the small square image shown in browser tabs is the classic favicon and tabs will always display a compact square. What looks like a "long" or larger Microsoft branding is a different asset used by the OS/browser (pinned-site tiles, Start/menu tiles, bookmarks, or mobile home‑screen icons). To reproduce that effect you must supply additional icon files and platform metadata — not a single oversized tab favicon.

A simple set to support modern browsers and OS tiles:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">

Practical steps and gotchas: generate a multi-resolution .ico or separate PNGs for every target size; include a manifest (for Android/Chrome) and msapplication meta tags or browserconfig.xml for Windows tiles; place a fallback at /favicon.ico. Clear the browser cache (or use versioned filenames) to see changes. Confirm files load directly and return the right MIME types (image/x-icon for .ico, image/png for .png). Test in each browser/context (tab, bookmarks, pinned site, mobile home screen) because behavior differs.

Context notes: asked about a long favicon; , , , and pointed out browser/platform differences. The correct approach is to supply multiple icons and metadata — you cannot force a tab to show a wide image, but you can provide the larger branding assets where platforms expect them.

Recommended Answers

All 6 Replies

Member Avatar for Ritesh_4

The Microsoft favicon is only M unless I missed something on the page really...

Member Avatar for SolidSolutions

the wider favicons are applied to secure sites (https:// instead of .

Member Avatar for teedoff

hmmm
When I go to is not a secure "https" site, I see a normal size favicon.

Can you give specific examples?

Edited by teedoff because: n/a
Member Avatar for terabyte

are you using IE?

Member Avatar for BSkiLLs

Not sure about that one or any tricks to but...
I was gone to ask that as well about what browser. As they will display them different as well.

I know about & how to with an animated one but not sure bout the long one as havent seen myself soo...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.