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.

Improve this question
3
  • There's a graphic design stack exchange site that may offer better results to this question, fyi.
    – Bradley Forney
    May 5, 2014 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, 2014 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, 2014 at 13:06

3 Answers 3

Reset to default
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.

Improve this answer
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, 2014 at 12:46
  • Ok. That wasn't clear in your question. Let me update the answer with some instructions.
    – drkblog
    May 5, 2014 at 12:50
  • Thanks I just needed a software than could do this. GIMP seems to be cool.
    – user320536
    May 6, 2014 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">
Improve this answer
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, 2014 at 12:48
  • you need to do it only to your main page.
    – Outdated Computer Tech
    May 5, 2014 at 18:03
  • This one actually preserves transparency when converting from a png with no background.
    – lucas
    Oct 23, 2019 at 15:16
0

I used the following site which gave me good result https://favicomatic.com/

and this site has the possibility to create all possible favicons for different browsers including mobile phones https://realfavicongenerator.net/

Improve this answer
1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Nov 8, 2021 at 19:14

You must log in to answer this question.