• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Black box behind web icon created in PS/AI

New Here ,
Feb 21, 2023 Feb 21, 2023

Copy link to clipboard

Copied

I have used Photoshop and Illustrator to make a picture to be used as a web icon for my Wordpress site. I have done this several times before with no problem, however, this time the web icon is shown with a black box behind it despite the background being transparent.

 

This black box is only shown in Safari on Mac (on multiple computers), not Chrome, Safari on iPhone, or Finder. I have tried using PNG and SVG format, same problem. I tried to upload a different picture (created with PS and AI as well) with transparent background and that showed up just as it should, no black box behind it, which leads me to believe the problem is with the specific file and not with my website or Safari. However I can't figure out what is different about this file than the previous ones I've used.

 

Does anyone have an idea why this is and how I can make the picture show without a black box behind it?

TOPICS
macOS

Views

528

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe
LEGEND ,
Feb 21, 2023 Feb 21, 2023

Copy link to clipboard

Copied

Without an actual screenshot of the file in PS as well as on the WP media gallery backend with all the info shown we can't tell you much. The most likely cause could be issues with wrong color profiles still being attached to the file, so that would be the first thing to check.

 

Mylenium

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 21, 2023 Feb 21, 2023

Copy link to clipboard

Copied

Thanks for replying. Here are screenshots of the file opened in Photoshop as well as the code from the Wordpress Media Gallery - hope this is what you meant, please let me know if I misinterpreted.

 

Skärmavbild 2023-02-21 kl. 11.31.40.pngSkärmavbild 2023-02-21 kl. 11.34.07.png

 

The color profile used is sRGB - specifically sRGB IEC61966-2.1. I noticed, though, the Destination Space was set to CMYK, so I changed this to sRBG as well. However, still same issue.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 21, 2023 Feb 21, 2023

Copy link to clipboard

Copied

Do the different creations show the same behaviour with your current browser? What happens if you exchange your icon with one you know that it works in WordPress?

ABAMBO | Hard- and Software Engineer | Photographer

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 21, 2023 Feb 21, 2023

Copy link to clipboard

Copied

LATEST

Thanks for replying. No, only this specific creation shows the black box. If I exchange it, it shows a transparent background just as it's supposed to.

 

I tried to use the file that works as a base and just pasted the other drawing as another layer on top of it - then there was a black box in the browser again.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines