HomeToolsHow to convert the icons into BASE64

How to convert the icons into BASE64

Converting free SVG icons into BASE 64 format requires developing an understanding towards it. It cannot be done without the help and thus, mostly everyone has to rely on BASE 64 converters available in the market. 

Before we delve more into its details, we must clear a few facts related to such conversions. We will also see if BASE 64 converter tools are the only way out or if there can be many other ways to do it without them.

We would begin first by talking more about Icons.

convert the icons into BASE64

Icons, BASE 64and their usefulness

ICO is a file format that contains an ICON- a tiny digital-friendly image with a few striking features that makes it so popular.

  1. The size and color of an icon can be altered.
  2. The image depth can also be changed at any time. 
  3. ICO is mostly Microsoft Windows-friendly images.
  4. The color depth of every ICO file must be less than 32 bit,
  5. They will contain two types of bitmap- 1- AND bitmap alongwith XOR bitmap.

Any image that symbolizes or depicts a program, file type, or company is known as an icon. An icon’s uniqueness is what matters the most as they are used in websites, logos, and even features images. 

Usually, the friendliest icon format is the SVG format. Many websites host a free SVG icon converter like Iamvector.com for creating proper SVG icons from other formats. 

If you are here to know why we need an image or icon in the BASE 64 format, then you must also know a bit about BASE 64 before moving ahead to the conversion part. 

To put it simply with BASE 64, one can make icon images in text format. The binary that goes into text coding creation (encoding data to its plain text) is present with BASE 64. It is extremely popular in the World Wide Web as its use in HTML or CSS text files is immense. BASE 64 is the process that goes into sending to-and-fro email attachments. It is the text version of bytes, in short, and frankly has nothing to do with images.

There are 64 characters in all BASE 64 formats.  The format is generally given below;

  • Upper case alphabets as characters from A to Z
  • Lower case A to Z characters
  • Numbers from 0 to 9
  • Characters like + and /
  • The equal to sign is used for padding

As we know by now a lot about icons and BASE 64, we will see how it can be done.

Benefits of using BASE 64 file formats

The primary benefits of using the BASE 64 , a basic binary to ASCII encoding mechanism includes the following;

  1. If you want to transfer or store data within a character set, you can try to do so in BASE 64 format. The basic benefit of using BASE 64 format is when someone wants to transmit the binary data as ASCII characters. This way binary data can be easily transmitted in ASCII formats.
  2. When you need to preserve the icon in a text field somewhere you can try using BASE 64 format.
  3. You can also use it to embed binary data within an XML file.
  4. BASE 64 can be used when users need to communicate with government fiscal sign printing machines.
  5. It can be used to code images within scripts.
  6. Using it in CSS property such as the background image is a way one can utilize the BASE 64 format.
  7. When you need a non-corrupted dataset for yourself.

The process to alter Icons to BASE 64 images

There are a few ways to alter icons to their BASE 64 counterparts.

  1. The first way will show you a manual way to convert icons to their BASE 64 versions in JAVA.
  2. Secondly, you can use a BASE 64 image converter for converting icon files.
  3. Manual way to convert icons to the BASE 64 formats

To convert icons (including free SVG icons) to their BASE 64 formats, you can try the below process.

  • Take a local file you want to convert /users/youruser/documents/Myicon.ico.
  • Tag it with the BASE 64 file so that it prints the file in that format.

“public static void main (String[] args) throws IOException 

{final String fullImagePath = “/Users/youruser/Documents/MyIcon.ico”;

final String base64 = fileToBase64 (Paths.get (fullImagePath));

System.out.println(base64)”

  • The BASE 64 output file data is visible on your console.
  • Now, take it up and build an image file out of it.

While building it, you must remember that the prefix is very important.

Like if you place the data prefix, you are telling your system, it is not an URL of any sort.

If you place image/x-icon will direct the icon format’s release.

When you will place base64, THE_BASE_64_STRING, you are telling the browser it is a BASE 64 file.

For an input command for your JAVA file, import java.util.BASE64.

Use a BASE 64 image converter

An image converter will allow easy conversion of free icon files to BASE 64 formats. 

On the converter, press on the Add File tab, and then from the dropdown, choose BASE 64 and convert your file accordingly.

There are many icon converters online, try to use any that suits your need and that has a faster conversion rate. 

Here are a few general steps for converting ICO to BASE 64 via online converters.

  • You must select the image source for yourself.
  • Paste the URL in the space meant for it.
  • You can also choose an ICON as an image for your computer.
  • There will be a tab that will instruct you to press it for converting icon files to Base 64 formats.
  • Once the file conversion completes, download the converted file on your system.

Generally, the input format for the file will all be ICO file type.

For the Output files, like a red dot ICO file, you must find these BASE 64 encoded ICO image formats.

  • Plain text conversion file will be:

AAABAAEAAQEAAAEAIAAwAAAAFgAAACgAAAABAAAAAgAAAAEAIAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAP//AAAAAA==

  • For data URL:

data:image/x-icon;base64,AAABAAEAAQEAAAEAIAAwAAAAFgAAACgAAAABAAAAAgAAAAEAIAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAP//AAAAAA==

  • If it is a CSS background image, you must have a file that is similar to the one below;

.base64 {background-image: url(“data:image/x-icon;base64,AAABAAEAAQEAAAEAIAAwAAAAFgAAACgAAAABAAAAAgAAAAEAIAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAP//AAAAAA==”)}

  • When using it for HTML hyperlink, you must try;

<a href=”data:image/x-icon;base64,AAABAAEAAQEAAAEAIAAwAAAAFgAAACgAAAABAAAAAgAAAAEAIAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAP//AAAAAA==”></a>

  • If it is for HTML image::

<img alt=”” src=”data:image/x-icon;base64,AAABAAEAAQEAAAEAIAAwAAAAFgAAACgAAAABAAAAAgAAAAEAIAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAP//AAAAAA==” />

  • For HTML Iframes, you can seek out the following file format;

<iframe src=”data:image/x-icon;base64,AAABAAEAAQEAAAEAIAAwAAAAFgAAACgAAAABAAAAAgAAAAEAIAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAP//AAAAAA==”>  The “iframe” tag is not supported by your browser.</iframe>

Other file formats can also be obtained as an output file like the XML, JavaScript Popup, and JSON formats.

Wrap up:

This is practically what is a must-to-know about BASE 64.If you intend to use the BASE 64 format, it is wise to begin by collecting information about it from different sources. One of the sources for reference is this article, read thoroughly to understand more about the conversion of icons to BASE 64 formats. All free SVG icons and PNG files can be easily converted into this format.

Don't Miss

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Related Articles

Categories