DevTools
Support us

Favicon Generator

Create professional favicons in seconds with text, emoji or image. Support for gradients and multiple fonts.

Settings
Maximum 4 characters for best display
80%
→ °
#5c94e5 → #8a77d7 (90°)
Preview
∞
Complete Favicon Installation Guide
What you receive in the package
  • favicon.ico - Universal icon
  • favicon-16x16.png - Navegadores desktop
  • favicon-32x32.png - Retina display
  • favicon-48x48.png - Windows taskbar
  • favicon-192x192.png - Android Chrome
  • favicon-512x512.png - PWA
  • manifest.json - PWA Configuration
  • how-to-use.html - Guia detalhado
Where to place the files

Extract all files from the ZIP to the root of your site (public folder where index.html is):

seu-site/
├── index.html
├── favicon.ico          ← Novo
├── favicon-16x16.png    ← Novo
├── favicon-32x32.png    ← Novo
├── favicon-48x48.png    ← Novo
├── favicon-64x64.png    ← Novo
├── favicon-128x128.png  ← Novo
├── favicon-192x192.png  ← Novo
├── favicon-512x512.png  ← Novo
├── manifest.json        ← Novo
└── how-to-use.html      ← Novo (opcional)
Add the code to your HTML

Copy this code and paste it inside the <head> tag of your HTML:

<!-- Favicon Links -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="192x192" href="/favicon-192x192.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#1E88E5">
Note: If your site is in a subfolder, adjust the paths (e.g.: href="/my-folder/favicon.ico")
Understand the meta tags
favicon.ico

Classic format supported by all browsers, including old versions of Internet Explorer.

apple-touch-icon

Icon used when the site is added to the iPhone or iPad home screen.

manifest.json

Configuration file for Progressive Web Apps (PWA), allowing the site to be installed as an app.

theme-color

Defines the color of the navigation bar on Android mobile devices.

How to test if it worked
  • Open the site in the browser and check if the favicon appears in the tab
  • Add the site to bookmarks and check if the icon appears
  • On mobile devices, add to the home screen and check the icon
  • Use DevTools (F12) → Application → Manifest to check the PWA configuration
  • Clear the browser cache (Ctrl+F5) if it does not appear immediately
Advanced tips

In WordPress, place the files in the installation root (where wp-config.php is).

Add the HTML code to the header.php file of your theme, inside the <head> tag, or use a plugin like "Insert Headers and Footers".

If the site is at example.com/my-site/, adjust the paths:

<link rel="icon" href="/meu-site/favicon.ico">

Browsers aggressively cache favicons. If it does not appear:

  • Chrome/Edge: Ctrl + F5 (forces refresh)
  • Firefox: Ctrl + Shift + R
  • Safari: Cmd + Option + R
  • Or use incognito/private mode to test