How to Create a Favicon for Your Website: Complete Guide

What is a favicon?

A favicon is the small icon that appears:

• In the browser tab next to the page title
• In browser bookmarks/favorites
• In browsing history
• In some Google search results

Despite its small size, the favicon is an essential part of a website's visual identity. A website without a favicon looks unfinished.

What is the ideal favicon size?

The base favicon is 16x16 pixels, but to ensure quality across all devices you need multiple sizes:

Our tool generates all these sizes automatically from a single image.

How to create a good favicon

Design tips

• Use a square image as the base
• Prefer simple designs — details become invisible at 16x16 px
• Logos, monograms and icons work better than complex photos
• Use high contrast to be visible on both light and dark backgrounds

Step by step with our tool

1. Prepare your image (PNG or JPG, preferably square)
2. Access the [Favicon Generator](/gerador-de-favicon)
3. Upload the image
4. Download the package with all generated sizes

How to add the favicon to your website

Plain HTML

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

WordPress

1. Admin Panel → Appearance → Customize
2. Site Identity → Site Icon
3. Upload the image and save

Next.js

Place the favicon.ico file in the /public folder and Next.js detects it automatically.