Use favicon * .ico in css background
I am creating a chrome extension that uses a searchable list to execute common commands. This list will also show open tabs with open windows, and the object Tab
comes with a favIconUrl file, which sometimes contains * .png or * .ico links, etc.
I would like to create list items with * .ico, but it looks like the css will not respect icons. I thought there might be a service that would dynamically convert the icon to png or something useful using css.
Then I could use background-image: url(http://ico2png.com/convert?ico=<favIconUrl>);
Is there such an animal or an alternative method?
EDIT:
Not bad, it looks like it works in Chrome.
<img src="https://www.google.com/favicon.ico">
<div style="height:32px;width:32px;background-image:url(https://www.google.com/favicon.ico);">
</div>
I thought it might be that the ico was indeed png, but I think not. I'll leave the question open to other browsers as I don't have time to investigate.
source to share
I cannot recommend using direct urls in your code. Many websites have a non-root icon.
But don't worry, you have many alternatives.
1. Chrome Favicons
You can use chrome badges. They will be served by the browser cache.
manifest.json
"permissions": [
...
"chrome://favicon/"
]
background.js
If you want to use icons in the context of a page (contentscripts), you may need to convert them to dataURLs to bypass CORS restrictions.
function convertImgToBase64URL(url, callback, outputFormat){
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function(){
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'), dataURL;
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
canvas = null;
};
img.src = url;
}
function getFaviconFromURL(url, callback){
return convertImgToBase64URL("chrome://favicon/" + url, callback);
}
getFaviconFromURL('http://google.com', function(dataURL){
console.log(dataURL);
});
You can even get different sizes of icons:
chrome://favicon/size/16@1x/https://www.google.com
chrome://favicon/size/16@2x/https://www.google.com
2. Use the Favicon API
source to share