For compatibility with all browsers stick with .ico. .png is getting more and more support though as it is easier to create using multiple programs. for .ico <link rel=”shortcut icon” href=”http://example.com/myicon.ico” /> for .png, you need to specify the type <link rel=”icon” type=”image/png” href=”http://example.com/image.png” />
Yes, it is possible using filter: dropShadow(x y blur? spread? color?), either in CSS or inline: img { width: 150px; -webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222); } <img src=”https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png”> <img src=”https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png” style=”-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);”>
-background white -alpha remove -alpha off Example: convert image.png -background white -alpha remove -alpha off white.png Feel free to replace white with any other color you want. Imagemagick documentation says this about the -alpha remove operation: This operation is simple and fast, and does the job without needing any extra memory use, or other side … Read more
All modern browsers (tested with Chrome 4, Firefox 3.5, IE8, Opera 10 and Safari 4) will always request a favicon.ico unless you’ve specified a shortcut icon via <link>. So if you don’t explicitly specify one, it’s best to always have a favicon.ico file, to avoid a 404. Yahoo! suggests you make it small and cacheable. … Read more
I haven’t been able to get good results from ImageMagick in this instance, but Inkscape does a nice job of scaling an SVG on Linux and Windows: # Inkscape v1.0+ inkscape -w 1024 -h 1024 input.svg -o output.png # Inkscape older than v1.0 inkscape -z -w 1024 -h 1024 input.svg -e output.png Note that you … Read more
You should be aware of a few key factors… First, there are two types of compression: Lossless and Lossy. Lossless means that the image is made smaller, but at no detriment to the quality. Lossy means the image is made (even) smaller, but at a detriment to the quality. If you saved an image in … Read more
You can use filters with -webkit-filter and filter: Filters are relatively new to browsers but supported in over 90% of browsers according to the following CanIUse table: https://caniuse.com/#feat=css-filters You can change an image to grayscale, sepia and lot more (look at the example). So you can now change the color of a PNG file with … Read more
Original answer was specific to a similar question. This has been revised: const canvas = document.getElementById(‘mycanvas’) const img = canvas.toDataURL(‘image/png’) with the value in IMG you can write it out as a new Image like so: document.getElementById(‘existing-image-id’).src = img or document.write(‘<img src=”‘+img+'”/>’);