2

Many websites offer such sort of favicons like this website itself. Look at it. There's no white background to ruin everything right? Now, I'm not that professional, but here's what I want:

I want to design a logo for my website that basically a J on an ellipse. Now, rendering into PNG or JPG (that are the only formats WordPress will accept) slams an additional sticking white background even if I initially choose a no-background paper.

I tried Corel Photo-Paint and it says something like masks will not be saved. Please help.

3
  • There's a graphic design stack exchange site that may offer better results to this question, fyi. – Bradley Forney May 5 '14 at 11:56
  • I checked all stackexchange for this reason only. However, it seems like it was the most reliable link. Maybe it didn't show up in where I checked. Anyway, can you provide the link? – user320536 May 5 '14 at 12:49
  • That'd be the Graphic Design SE; there's also Webmasters which might be applicable. However, please don't repost your question on another site in the network. You can use the "flag" link just below your question to flag the question for moderator attention and request migration, should you wish to do so. – user May 5 '14 at 13:06
6

You want a transparent image. You'll have to create a PNG file with transparency. JPEG doesn't support transparency. Steps may vary depending on the software you use. But basically you have to work over an image with alpha channel (transparency). You have to select some parts of your image and remove them. In its place you'll see some kind of pattern representing the background.

Sample image with alpha channel

Later you have to specify transparency option during PNG export.

UPDATE

Using GIMP create an image and add an alpha channel. Draw as desired and be sure you have some transparent area like explained above. Then choose File > Export... and select a destination file with PNG extension. GIMP displays an export options dialog like this one:

enter image description here

Be sure you have "Save color values for transparent pixels" and "Save background color" options selected, then press Export button.

3
  • Of course. When I said that I tried making my logo on a no-background, it means it got no layers (i.e., it's transparent - that checkboxes style). But after rendering in either .png or .jpg, it doesn't retain the no layers/mask thing. Your answer was a reconfirmation, not a solution. You didn't tell me exactly which software can render no-layers (or transparent) .png files... :/ – user320536 May 5 '14 at 12:46
  • Ok. That wasn't clear in your question. Let me update the answer with some instructions. – drkblog May 5 '14 at 12:50
  • Thanks I just needed a software than could do this. GIMP seems to be cool. – user320536 May 6 '14 at 5:07
3

I highly recommend you using a Favicon generator. Like this or this, after which you'll want to set this code in your header in order for the icon to show up as a favicon.

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
3
  • I run the Codilight theme on my self-hosted website. I don't think I can manually input text in its headed unless I edit the entire theme. I'll try that, thanks. – user320536 May 5 '14 at 12:48
  • you need to do it only to your main page. – Outdated Computer Tech May 5 '14 at 18:03
  • This one actually preserves transparency when converting from a png with no background. – lucas Oct 23 '19 at 15:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy