Webpage to Icon API - Favicon Extractor with GrabzIt

With the Webpage to Icon API you specify the URL of a webpage to convert into an icon. One of he main benefits to using an icon conversion API is that it saves time and resources. Instead of making an icon yourself, you can use an API to create one quickly and easily.

This is especially useful for businesses or brands that have multiple websites or webpages that need icons. Using an API to generate icons ensures that your icon looks consistent and professional.

The Webpage to Icon API converts a URL to an icon. Try this demo to see it in action. The Webpage to Icon API is not simply a favicon grabber.

But instead bases the final icon on all the available icons for the webpage. If no favicons or meta icons are available it will generate one for the webpage. The chosen icon, the background and any border selected can change depending on the users selections.

To use the API replace the APPLICATION KEY text below with your application key. Then set the size parameter, which defaults to 32.

Finally specify the webpage that you want to turn into an convert. By passing the required URL to the URL parameter. In the following example, we convert https://www.astropioneer.blog/ into a 48x48 pixel image.

//api.grabz.it/services/icon?key=Sign in to view your Application Key&size=48&url=https://www.astropioneer.blog/

You should place the url parameter at the end of the querystring. This helps in avoiding the need to encode most URLs when using the API.

While you can download the image using a server-side language like PHP. You can also display it directly on a web page or use it in JavaScript as shown below. Remember that when using the API in a webpage. You must add the domain of the webpage to the list of authorized domains.

<img src="//api.grabz.it/services/icon?key=Sign in to view your Application Key&size=48&url=https://www.astropioneer.blog/"/>

<script>
fetch('https://api.grabz.it/services/icon?key=Sign in to view your Application Key&size=48&url=https://www.astropioneer.blog/')
.then(response => response.blob())
.then(blob => {
    console.log(blob);
});
</script>

You can also transform an image by selecting the desired transform from the options below. For instance, you can see an example here where the transform makes the resulting image sepia.

//api.grabz.it/services/icon?key=Sign in to view your Application Key&transform=sepia&size=48&url=https://www.astropioneer.blog/