Why do browsers display grafics different and how to change that?

I am working on a website right now. Sadly the png logo and as well the background which uses the same colors is displayed on some computers with Firefox in lila. With Chrome the blue looks as expected.

The used monitor also has an effect, but with Chrome everything looks fine.

Where does that issue come from, and how can I fix that?

Here is my image

Here you see a photo of my monitor. The lila with firefox (on the left) is visible slightly. The big issue is that the color is used in the background of my website, which looks lila than, with firefox, and the displayed color does not match the other colors in css at my website anymore.

The above picture is from firefox:

The above picture is from chrome:

Firefox handles images that contain an sRGB profile slightly differently from untagged images and HTML colors, by default. It has three modes of operation that you can select by going to "about:config", searching for gfx.color_management.mode. The default is "2". Change it to "0" (no color management) or "1" (color manage everything) and you'll get a good match.

See the four-year-old bug #621474 at https://bugzilla.mozilla.org and scroll down to comment #49 to see current status of the patch.

Because of these differences (you can't control which setting people use), it's probably best to just remove the iCCP chunk or sRGB chunk from your image. Browsers will assume the image is in the sRGB colorspace and display it properly against HTML colors.

"pngcheck" says you have iCCP and cHRM chunks:

$ pngcheck -v so-logo.png
File: so-logo.png (147985 bytes)
  chunk IHDR at offset 0x0000c, length 13
    506 x 171 image, 32-bit RGB+alpha, non-interlaced
  chunk pHYs at offset 0x00025, length 9: 2835x2835 pixels/meter (72 dpi)
  chunk iCCP at offset 0x0003a, length 2639
    profile name = Photoshop ICC profile, compression method = 0 (deflate)
    compressed profile = 2616 bytes
  chunk cHRM at offset 0x00a95, length 32
    White x = 0.31269 y = 0.32899,  Red x = 0.63999 y = 0.33001
    Green x = 0.3 y = 0.6,  Blue x = 0.15 y = 0.05999
  chunk IDAT at offset 0x00ac1, length 145212
    zlib: deflated, 32K window, maximum compression
  chunk IEND at offset 0x24209, length 0
No errors detected in so-logo.png (6 chunks, 57.2% compression).

There are various tools you can use to remove those chunks:

pngcrush (also removes the pHYs chunk):
pngcrush -rem alla -force logo.png logo_crushed.png

pngsplit+cat:
pngsplit logo.png
rm logo.png.0003.iCCP
rm logo.png.0004.cHRM
cat logo.png.00*.* > logo_split_cat.png