Convert Icon to Base64 in Seconds

Ever needed to embed an icon in your web application without relying on external resources? Here's a simple and efficient method: converting an icon to a base64 string, which allows you to include the icon directly in your HTML or JavaScript. But how do you actually do this? Let's dive in.

The process involves converting your icon to a data URL, which is a URL that provides data without needing to retrieve it from an external source. This is achieved by encoding the icon in base64 format and prefixing it with the data URL scheme. Let's explore this process in detail.

Understanding Base64 Encoding

Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format. It's widely used to transmit binary data over text-only channels, like email or web pages. Here's a simple breakdown:

Conversion Rate Optimize Vector Icon Style

Base64 Decode online tool to decode base64 String, URL, File.

Conversion free icons designed by Magnific

1. The binary data (your icon, in this case) is divided into 6-bit blocks. 2. Each 6-bit block is then converted to a 8-bit block, using the Base64 character set (A-Z, a-z, 0-9, +, /, and = for padding). 3. The resulting 8-bit blocks are then joined together to create the final Base64 string.

Base64 Character Set

The Base64 character set consists of 64 characters, which are a subset of ASCII. These characters are:

the blue rounded button is shown in this image, it appears to be an app icon

a person looking at a target with an arrow in it

26 uppercase letters (A-Z)
26 lowercase letters (a-z)
10 digits (0-9)
2 special characters (+ and /)

The '=' character is used for padding when the input is not a multiple of 6 bits.

Here's an example. Suppose we have a 24-bit binary string: 101100 011011 110101. We would divide it into three 8-bit blocks, and then convert each block to a Base64 character:

Converting Icon to Base64

Now that we understand Base64 at a fundamental level, let's convert an icon to a base64 string. This process involves several steps:

the icons are designed to look like they have different shapes and sizes, but it is not

some type of computer icons are shown in black and white, including the letter f

the icons are arranged in different styles and colors

three red arrows pointing in opposite directions, with the center arrow at the top and bottom

a black and white image of a recycle sign with arrows pointing in different directions

1. Convert your icon to a format that can be read as a data URL, such as PNG, JPEG, or SVG. 2. Read the file using JavaScript's FileReader API. 3. Create a Base64 string from the file data. 4. Prefix the Base64 string with "data:image/[file-format];base64," where [file-format] is the format of your image (e.g., "png" for PNG, "jpg" for JPEG, etc.). 5. Embed the resulting data URL in your HTML or JavaScript.