First of all, what is a favicon?

A favicon is a small “sweet” icon that represents your website. It was used for the first time in 1999, initally in Internet Explorer's bookmark section. Following it's standardization in the next decade, it's displayed as of today in browser tabs, bookmark lists, and next to your site's name in search engine results, while contributing to recognition of your brand in great amount. In other words, this tiny logo helps users quickly identify your website among many open tabs.

While favicons can come in various formats, the most common are .png (1996) and .ico (1985). The .ico format is highly compatible and can contain multiple sizes in a single file, while a .png favicon is a modern, high-quality alternative.

In this brief article, I'll show you how to create a perfect favicon in just a few simple steps using Image Guy.

1. Upload Your Image

Start by uploading your logo or any image you want to convert. The server accepts common formats like JPG, PNG, WebP, AVIF, and HEIC.

Upload your image to Image Guy

2. Choose Your Favicon Format

Select either "Favicon (PNG)" or "Favicon (ICO)" from the output options.

Favicon (PNG)

This will create a standard 32x32 pixel PNG icon, perfect for modern browsers.

Favicon (ICO)

This option generates a more traditional .ico file that contains multiple resolutions (16x16, 24x24, 32x32, 48x48, and 64x64 pixels) to ensure your icon looks sharp on all platforms.

Select favicon format
"Ready" appears, when the file is fully uploaded. Then, you can select your file format. Use "?" to learn more about formats.

3. Optimize & Download

Click the "Optimize" button. The process usually takes less than 10 seconds. After it's complete, you can download your new favicon. You can also use the "Edit & Crop" tool for any final adjustments before downloading. For example, you can crop your image into a circle.

Download the new favicon
Download the new favicon
Download the new favicon
Our server optimized the picture by reducing it's size from 238.19 KB to 3.9 KB, over 86%, without any significant loss in quality.

4. Add the Favicon to Your Website

Once downloaded, place the favicon in your website's root directory—root directories are the first places scanned by search engines—and add one of the following code snippets to the <head> section of your HTML. Remember to adjust the href path if needed.

For a .png favicon:

<link rel="icon" type="image/png" href="/favicon.png">

For an .ico favicon:

<link rel="shortcut icon" href="/favicon.ico">
Add code to your website
Enjoy using your favicon.

Footnote: All these images used in this article are optimized up to 76% and converted to webp format. Enjoy creating your new favicons! Thank you for reading.