Logo - Full (Color)
Skip to content

Free Favicon Generator

Attract user attention and boost credibility by making a favicon for your website with HubSpot’s free favicon generator.

Create a Favicon

What is a favicon?

A favicon, short for favorite icon, is a small version of your brand’s logo displayed on your website tabs, search bar, and bookmark bar.

Favicons typically feature a logo, letter, or image that reflects the company it represents. Since favicons are small, they must be simple yet make an impact.

You can create your own custom favicons with HubSpot’s free favicon generator.

 

Attract user attention and boost credibility

Your logo is a way for your brand to speak without words. Displaying your logo on favicons is a great way to attract attention, boost brand awareness, and strengthen credibility.

Using favicons lets users immediately identify your website on browser tabs, bookmarks, and website history. Help users easily navigate your website when multiple tabs are open by displaying your logo as a favicon.

 

Create favicons for free

Generate favicons without installing design software. HubSpot’s free favicon generator lets you create and download a favicon straight from your browser.

Choose a favicon which you can customize by color, style, and typography.

 

Download your files from the favicon maker instantly

After designing your favicon, choose the appropriate image size and desired file format.

HubSpot’s free favicon generator supports multiple image file types — including ICO, JPG, PNG, WebP, and SVG. Download your favicon and instantly get the designs on your website.

Frequently Asked Questions (FAQs)

  • HubSpot brand kit’s free favicon generator is an online tool that allows you to create a favicon in three easy steps:

    • Step 1: Conceptualize your design. Fill out your business’s industry, name, and slogan to get personalized logo recommendations from HubSpot’s free Favicon Generator.
    • Step 2: Customize your favicon. Choose from a library of thousands of logo templates you can customize by style, color, and typography. HubSpot’s brand kit supports additional image formats — such as logos and social media icons.
    • Step 3: Save and upload your favicon. Generate a favicon in your desired size. Our free tool supports multiple favicon image types, including JPG, PNG, WebP, and SVG.

  • Adding a favicon within HTML isn’t as complicated as it looks. Follow the directions below:

    • Step 1: Upload the favicon file to your website directory. You can find your website directory under the “web,” “public,” or “public_html” folder. If you don't have one, create a folder in the root directory called images.
    • Step 2: Add a <link> element to your index.html file. The <link> element comes after the <title> element. Check the sample HTML code below for reference:

    • Step 3: Once you’ve uploaded the index.html file to your website, hit the refresh button to see whether your favicon is displayed on the web browser.

    You may not need a programming language to add a favicon to your site. Some CMSs, like the HubSpot CMS, let you add a favicon to your site without HTML.

  • Most favicons are 16x16 pixels in size and 32x32 pixels on high-resolution screens.

    Although Google uses 16x16 favicons for their mobile SERP results, they recommend creating favicons with sizes in the multiple of 48x48 pixels (e.g., 96x96 px, 144x144px, etc.).

  • Most modern-day web browsers support GIF, JPEG, SVG, and PNG favicons.

    However, most websites favor PNG files because images are high-quality and look better in most modern browsers and devices.

    HubSpot’s free favicon maker supports all these image types and more — including the now-obsolete ICO format.

  • When making a favicon, keep these tips in mind:

    • Make your favicons recognizable. They come in small sizes, so they must be easily identifiable and high-quality.
    • Consider the color scheme. Using colors with enough contrast helps with accessibility.
    • Take a minimalist approach. Keep your design simple. If using text, keep it to a few characters. The goal is to make your favicon stand out, but not in a way that distracts users.