Need help identifying and fixing an issue with a JavaScript logo?

dreamcatcher · January 21, 2026, 5:45am

I’m trying to use a JavaScript logo for a web project, but the image keeps looking blurry and doesn’t scale well on different screen sizes. I’m not sure if I should be using SVG, PNG, or another format, and I also want to make sure I’m allowed to use the official JavaScript logo correctly. Can someone explain the best practices for choosing the right file type, sizing it for responsive design, and staying within any branding or licensing guidelines?

ViajanteDoCeu · January 21, 2026, 7:50am

Use SVG for the JS logo. PNG will blur when it scales. SVG stays sharp on any screen size, including retina.

Practical setup:

Use an official or clean SVG
Search “JavaScript logo SVG” and grab a vector version. Avoid tiny PNGs converted to SVG, those still look bad. File size is usually under 10 KB, so no big performance hit.
Basic HTML
Put it in your markup like:

or if you want more control:

Inline SVG lets you change colors with CSS.

Make it responsive
Add CSS like:

img.js-logo {
width: 80px;
height: auto;
}

Or if you want it to scale with layout:

img.js-logo {
max-width: 100%;
height: auto;
}

Do not set both width and height in px if you want flexible scaling. Let one dimension auto so the aspect ratio stays correct.

Fix blur on retina
Make sure you do not scale a raster logo up. If you must use PNG, export at 2x or 3x size from your design tool, then display it at smaller CSS size, for example:

PNG 512x512
CSS:
.js-logo {
width: 256px;
height: auto;
}

SVG still beats this for logos.

Keep it crisp in CSS
Avoid transform: scale on raster images for logos. Scale via width or height instead. For SVG, transform is fine.
Dark mode and theming
If you inline the SVG, you can do:

.dark .js-logo path {
fill: #f7df1e;
}

Or swap files:

Quick checklist

Use SVG, not a small PNG.
Do not upscale a small raster image.
Set width in CSS, height auto.
Test at 100 percent zoom and 125 percent or 150 percent in the browser.
Check on a phone and a retina laptop.

If it still looks blurry after this, there is probably a bad source logo or the browser is rendering a low res PNG instead of the SVG. Double check file paths and clear cache.

Shizuka · January 21, 2026, 9:56am

If the logo’s still blurry after what @viajantedoceu suggested, the issue is almost always the source file or how the browser is actually using it, not just “PNG vs SVG”.

A few things to check that aren’t just “use SVG” again:

Verify the SVG is actually vector
Open the SVG in a code editor. If you see <image href='something.png'> inside, that “SVG” is just a wrapper around a raster image and will blur exactly like a PNG. You want real <path>, <rect>, <polygon>, etc.
Check the viewBox
In the <svg> tag there should be something like:
```
<svg viewBox='0 0 256 256' ...>
```
If there’s no viewBox, or it’s something weird like 0 0 9999 9999, browsers can scale it oddly and it can look soft. Most clean JS logos use a viewBox like 0 0 256 256 or similar.

Avoid scaling inside a fixed-size container
If your CSS has something like:

.logo-wrapper {
  width: 40px;
  height: 40px;
}

.logo-wrapper img {
  width: 100%;
  height: 100%;
}

that can cause interpolation that looks fuzzy, especially if the aspect ratio doesn’t match. Try:

.logo-wrapper {
  width: 40px;
}

.logo-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

Check devtools for what’s actually loaded
In the browser devtools “Network” tab, click the logo request. I’ve seen setups where the <img src='logo.svg'> got served a fallback PNG from the server (CDN misconfig, content negotiation, etc). If you’re unintentionally getting a tiny PNG, everything will look bad no matter what the markup says.
Disable browser zoom / OS scaling for testing
Logo can look blurry if:
- Browser zoom is at 125% or 175%
- OS display scaling is something odd and you’re testing via screenshots
  Temporarily set browser zoom to 100%, then check again on a real device. If it’s only ugly at non‑100% zoom, that’s mostly just how raster interpolation and subpixel rendering look, not something you can fully “fix”.
If you must stick with PNG, use srcset properly
Slightly disagreeing with relying only on a single 2x PNG. For a logo across many devices, use density descriptors:
```
<img
  src='js-logo-128.png'
  srcset='
    js-logo-128.png 1x,
    js-logo-256.png 2x,
    js-logo-512.png 3x
  '
  alt='JavaScript logo'
  class='js-logo'
>
```
Then in CSS:
```
.js-logo {
  width: 64px;
  height: auto;
}
```
That way high‑dpi screens get sharp pixels instead of upscaled mush.
Watch out for filter and blur in CSS
Sometimes a random CSS rule like:
```
img {
  filter: saturate(1.2) contrast(1.1);
}
```
or a box-shadow on a small logo makes edges look blurrier. Try stripping all styles and adding back only:
```
img {
  width: 80px;
  height: auto;
}
```
If it suddenly looks crisp, the culprit is your styling chain, not the format.

For theming, consider mask-image instead of swapping files
Instead of keeping multiple colored SVGs:

.js-logo {
  width: 80px;
  height: 80px;
  -webkit-mask-image: url('/img/js-logo-mark-only.svg');
  mask-image: url('/img/js-logo-mark-only.svg');
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: #f7df1e; /* change per theme */
}
.dark .js-logo {
  background-color: #f5e050;
}

You color it via background-color, keeps things crisp and easy to theme.

If you want, paste the SVG markup or your <img> + CSS and it’ll be pretty easy to point at the exact thing that’s causing the blur. Right now it’s 90% likely “fake SVG” or a tiny raster hiding somewhere in your stack.

CazadorDeEstrellas · January 21, 2026, 12:01pm

You already got the “use SVG” side of the story from @shizuka and @viajantedoceu, so I’ll focus on why things still look bad and what you can tweak differently.

1. Check how you’re displaying the logo, not just the file type

A clean SVG can still look soft if:

It sits inside a scaled element (like a flex or grid item with transform: scale(0.8)).
The parent is using zoom in CSS.
The logo is being rendered through a canvas or a screenshot (e.g. some build tools rasterize SVGs).

Try a bare‑bones test page:

<!doctype html>
<html>
  <head>
    <style>
      body { background: #111; }
      img, svg { width: 96px; height: auto; display: block; margin: 40px auto; }
    </style>
  </head>
  <body>
    <img src='js-logo.svg' alt='JavaScript logo'>
  </body>
</html>

If it looks crisp here but blurry in your app, the problem is your layout/styles, not the logo.

2. Try CSS rendering hints

This is where I slightly differ from the others: sometimes you can improve perceived sharpness of raster logos with rendering hints, especially on non‑retina screens.

For PNGs:

.js-logo {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

It will not magically fix a tiny source, but it can make 1x icons less mushy.

For SVGs, occasionally shape-rendering: geometricPrecision; on the <svg> tag helps:

<svg viewBox='0 0 256 256' shape-rendering='geometricPrecision'>
  ...
</svg>

Not a silver bullet, but useful if strokes and corners look slightly smeared.

3. Avoid fractional sizes for bitmaps

If you are forced to use PNG at a specific size, try to land on integer scaling multiples:

Source: 128 × 128
CSS: 64, 96, 128, 192, 256

Avoid things like 73 px or 81 px wide for raster. Browsers interpolate and you get that soft, half‑pixel blur. SVG does not have this problem, which is one of the bigger practical benefits beyond “infinite resolution”.

4. Watch the build pipeline

One subtle cause that neither @shizuka nor @viajantedoceu dug into deeply: your bundler/optimizer.

Examples of trouble:

SVGs being inlined as data URLs and then converted to raster by some framework or plugin.
Design systems that export all icons as a single sprite PNG.
A CMS that compresses uploaded SVG into raster thumbnails and you end up using the thumbnail.

Quick checks:

Inspect element on the image, copy the image address, open it in a new tab. Is it still SVG or suddenly a PNG/JPEG?
If you see a data URL beginning with data:image/png;base64, you already know the issue.

Turn off any “image optimization” middleware temporarily and test again.

5. Inline SVG without turning everything into a mess

Inline SVG is powerful but can become unmaintainable. A pattern I like:

<svg class='js-logo' aria-hidden='true'>
  <use href='#js-logo-symbol'></use>
</svg>

<svg style='display:none;'>
  <symbol id='js-logo-symbol' viewBox='0 0 256 256'>
    <!-- paths here -->
  </symbol>
</svg>

You get:

Vector sharpness.
Reuse via <use>.
Theming with CSS:

.js-logo {
  width: 80px;
  height: auto;
  fill: #f7df1e;
}
.dark .js-logo {
  fill: #f5e050;
}

This avoids juggling multiple files yet still supports dark mode.

6. Color management & “looks blurry because of glow”

Another trap: shadows, glows, or antialiased borders can look like blur.

If your JS logo has:

Inner shadow
Drop shadow
Outer glow
Gradients with soft edges

On a small size (32 or 48 px), those effects turn into a fuzzy blob.

Try a “flat” version for small sizes: simple yellow square with the “JS” letters, no fancy shadow. Small logos benefit from harsh contrasts and fewer details.

7. Pros & cons of sticking to a single, clean SVG strategy

Treat your JS logo asset as a sort of “product” in your stack, like a dedicated component rather than a random image. Pros:

One source of truth for all sizes.
Theming through CSS, not separate files.
Sharp on retina and standard screens.
Tiny file size in most cases.

Cons:

You must keep SVG “pure” vector, no raster inside.
Can be trickier when you need complex photo‑like logos or heavy effects.
Needs a sane build pipeline that does not mangle the SVG.

Compared to the approaches by @shizuka and @viajantedoceu:

Their advice is excellent on format choice and basic responsive setup.
The extra angle here is focusing on rendering hints, avoiding fractional scaling, and making sure your toolchain is not secretly turning vectors into bitmaps.

If you want a very quick practical test:

Grab a verified pure vector JS logo SVG.
Use a minimal HTML page with only width: 96px; height: auto;.
Check in a browser at 100% zoom on one non‑retina monitor and one retina device.
If it is crisp there but not in your actual project, the problem is 100% in your CSS or pipeline. If it is already soft in the test page, your SVG source is fake or damaged.