Favicon generator

Favicon Generator

Turn one image into a complete favicon package — favicon.ico, all PNG sizes, apple-touch-icon, Android icons, a manifest, and the HTML — in a single zip.

favicon.ico + PNGs100% freeNo sign-upPNG · JPG · WebP · SVG

Déposez une image pour créer un favicon

Glissez-déposez, collez ou choisissez un fichier

PNG · JPG · WebP · SVG — icônes créées sur votre appareil

One image in, a full favicon set out

A modern favicon is not a single file — browsers, iOS, Android, and installable PWAs each want their own sizes and formats. This generator takes one square-ish image and produces the whole set: a favicon.ico with 16, 32, and 48 px, standalone PNG favicons up to 512 px, a 180 px apple-touch-icon, 192 and 512 px Android icons, a site.webmanifest, and a copy-paste HTML snippet.

Everything is rendered on your device with the canvas API, then bundled into a zip you download. Add a background color, padding, or rounded corners if your artwork needs a little breathing room inside the icon frame.

How to generate a favicon

  1. Add your image — drag & drop, paste, or choose a PNG, JPG, WebP, or SVG.
  2. Adjust the look — keep it transparent or pick a background, and tweak padding and corner rounding.
  3. Preview every size — check the live 16–512 px previews so nothing looks muddy when small.
  4. Download the zip — get favicon.ico, the PNGs, the manifest, and the HTML, then paste the snippet into your <head>.

Tip: design for the smallest size

At 16×16 a detailed logo turns to mush. Use a bold, simple mark with strong contrast, and add a little padding so the artwork is not clipped by rounded tab corners.

le jeu complet de favicons: sizes and where each is used

Un favicon moderne n'est pas un seul fichier mais un petit jeu, car les navigateurs, iOS, Android et les PWA installables recherchent chacun une taille et un format différents. Voici exactement ce qui est généré et où chaque élément est utilisé.

Size File Where it's used
16 × 16 px favicon.ico + favicon-16x16.png L'icône de l'onglet du navigateur et de la barre d'adresse en densité d'écran standard (1×) ; la plus petite taille, et la plus vue.
32 × 32 px favicon.ico + favicon-32x32.png L'icône de l'onglet et du favori sur les écrans haute densité (Retina), et le raccourci de la barre des tâches Windows.
48 × 48 px favicon.ico + favicon-48x48.png Inclus dans favicon.ico pour les raccourcis du bureau et les tuiles de site Windows qui choisissent une taille plus grande.
180 × 180 px apple-touch-icon.png L'icône qu'affiche iOS Safari lorsqu'un site est ajouté à l'écran d'accueil de l'iPhone ou de l'iPad.
192 × 192 px android-chrome-192x192.png L'icône de l'écran d'accueil / du lanceur Android pour une PWA installée, déclarée dans le manifeste web.
512 × 512 px android-chrome-512x512.png L'écran de démarrage de la PWA et l'icône d'application haute résolution, aussi utilisée comme icône masquable du manifeste.

Format & container

Vous obtenez les trois formats qui comptent : un .ico multi-tailles pour l'existant et Windows, des PNG nets pour les navigateurs modernes et les icônes du manifeste pour les installations de PWA — ainsi un seul envoi couvre tout.

How it's wired into your page

                <link rel="icon" href="/favicon.ico" sizes="any">
<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">
<link rel="manifest" href="/site.webmanifest">
              

Tip

Concevez d'abord pour le 16 × 16 : un logo détaillé devient illisible à cette taille, alors utilisez une marque simple et affirmée, à fort contraste et avec un peu de marge, puis laissez les tailles plus grandes être réduites depuis votre source haute résolution.

Tous les outils favicon et icônes

Questions fréquentes

What sizes does the favicon.ico include?

The generated favicon.ico packs 16, 32, and 48 px — the sizes browsers pick from for tabs, bookmarks, and the address bar. Larger displays use the standalone PNG icons.

Where are my icons generated?

Everything happens in your browser, so the files are created on your own device. How any data associated with the tool is handled is described in our privacy policy.

Do I need the web manifest?

If you want your site to be installable on Android or as a PWA, yes — site.webmanifest points to the 192 and 512 px icons. Otherwise it's harmless to include and future-proofs your setup.

What image format should I upload?

An SVG or a large PNG gives the crispest small icons because there is more detail to downscale from. JPG and WebP also work; just use the highest resolution you have.

Plus d'outils image