Gratuit · Sans inscription · S’exécute sur votre serveur

Générez des favicons parfaits à partir de n’importe quelle image

Transformez vos images en favicons professionnels avec la prise en charge de SVG, PNG, JPG et de tous les grands formats. Téléchargez un package de favicons complet contenant toutes les tailles nécessaires pour un affichage impeccable sur tous les appareils et navigateurs.

Ultra rapide· Prise en charge SVG· Multiples formats

Commencer la conversion

Téléversez votre image

Glissez & déposez une image ou cliquez pour parcourir. Nous générons toutes les tailles de favicon dont vous avez besoin.

Déposez votre image ici

ou cliquez pour parcourir les fichiers

Choisir un fichier

PNGJPGGIFWEBPBMPSVGICO≤10MB

Génération de votre package de favicons…

Désolé, ce fichier n’a pas pu être traité. Veuillez utiliser un PNG, JPG, GIF, WebP, BMP ou SVG carré de moins de 10 Mo.

Votre package de favicons est prêt

ZIP contenant ICO, PNG, l’icône Apple touch, les icônes Android et le manifeste web.

Télécharger le package de favicons

Générateur de favicon à partir de texte

Transformez des lettres ou un texte court en un favicon soigné. Saisissez vos initiales, choisissez les couleurs et une forme, prévisualisez en direct et téléchargez le package d’icônes complet.

Générateur de favicon à partir d’emoji

Transformez n’importe quel emoji en favicon. Choisissez un emoji, une forme et une couleur de fond, prévisualisez en direct et téléchargez le package d’icônes complet.

Éditeur de favicons en pixels

Dessinez votre propre favicon pixel par pixel sur une grille de 16×16 à 64×64. Crayon, gomme et pot de peinture avec annuler/refaire, puis exportez un pack complet ICO, PNG et Apple/Android.

Téléchargeur de favicons

Saisissez l’URL de n’importe quel site web pour récupérer et télécharger son favicon aux formats PNG et ICO.

Vérificateur de favicons

Saisissez l’URL de n’importe quel site web pour auditer instantanément sa configuration de favicons — favicon.ico, icône Apple touch, favicon SVG et manifeste web. Obtenez un score de santé en quelques secondes.

Tout ce dont vous avez besoin pour des favicons parfaits

Un générateur de favicons professionnel regroupant tous les outils et formats nécessaires pour créer des icônes nettes qui fonctionnent partout.

Ultra rapide

Traitez les images en quelques secondes grâce à un moteur de conversion optimisé. Aucune attente, aucun délai.

Prise en charge SVG

Prise en charge complète des fichiers SVG avec une optimisation et une mise à l’échelle propres pour des résultats parfaits.

Tous les appareils

Générez des favicons pour ordinateurs, mobiles, tablettes et PWA avec toutes les tailles requises.

Package complet

Téléchargez tout : ICO, fichiers PNG, icônes Apple touch et un manifeste web.

Multiples formats

Prise en charge de PNG, JPG, GIF, WebP, BMP et SVG — convertissez à partir de n’importe quel format répandu.

Prêt à l’emploi

Obtenez des extraits de code HTML et des instructions d’installation pour une mise en place immédiate.

Multi-navigateurs

Compatibilité impeccable avec Chrome, Firefox, Safari, Edge et tous les navigateurs modernes.

Haute qualité

Un traitement d’image avancé préserve des favicons nets et clairs à toutes les tailles.

Professionnel

Générez le package de favicons standard du secteur utilisé par les meilleurs sites web du monde.

Formats pris en charge

Tailles de favicon

100%

Compatible navigateurs

Temps de traitement

Guide d’installation facile

Suivez ces étapes simples pour ajouter vos nouveaux favicons à votre site web.

Téléchargez le package de favicons

Utilisez le générateur ci-dessus pour créer et télécharger votre package de favicons complet sous forme de fichier ZIP.

Extrayez les fichiers

Extrayez tout le contenu du ZIP dans le répertoire racine de votre site web (le même dossier que index.html).

Ajoutez le code HTML

Copiez le code HTML ci-dessous et collez-le dans la section <head> de vos pages.

Testez vos favicons

Déployez votre site et vérifiez que le favicon s’affiche dans les onglets du navigateur, les favoris et sur mobile.

Code d’intégration pour votre framework

Choisissez votre stack et copiez le code prêt à coller. Les fichiers se placent à la racine de votre site (ou dans app/ pour Next.js App Router).

index.html

<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">

// app/layout.tsx
// 1. Drop these files into app/ (Next.js auto-detects them):
//    - favicon.ico, icon.png, icon.svg, apple-icon.png
// 2. For extra PNG sizes + a manifest, declare them here:
import type { Metadata } from 'next'
import './globals.css'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon.ico', sizes: 'any' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon.svg', type: 'image/svg+xml' },
    ],
    apple: ['/apple-touch-icon.png'],
  },
  manifest: '/site.webmanifest',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en"><body>{children}</body></html>
  )
}

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <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" />
      </Head>
      <body><Main /><NextScript /></body>
    </Html>
  )
}

// Vue (public/index.html) — put files in public/
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

// Nuxt 3 (nuxt.config.ts)
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
        { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
        { rel: 'manifest', href: '/site.webmanifest' },
      ],
    },
  },
})

// 1. npm i gatsby-plugin-manifest
// 2. gatsby-config.js — point icon at a 512x512 PNG
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: 'Your App Name',
        short_name: 'App',
        start_url: '/',
        display: 'standalone',
        icon: 'src/images/android-chrome-512x512.png',
      },
    },
  ],
}

// Also copy favicon.ico to the static/ folder for the browser fallback.

// src/app.html — files live in static/
<!doctype html>
<html lang="en">
  <head>
    <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/svg+xml" href="/favicon.svg" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display:contents">%sveltekit.body%</div>
  </body>
</html>

Où placer les fichiers ? Déposez favicon.ico, icon.png et apple-icon.png directement dans le dossier app/. Next.js les détecte automatiquement — aucune balise link manuelle n’est nécessaire.

site.webmanifest

{
  "name": "Your App Name",
  "short_name": "App",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Fichiers inclus

Votre package de favicons contient les fichiers suivants.

favicon.icofavicon-16x16.pngfavicon-32x32.pngapple-touch-icon.pngandroid-chrome-192x192.pngandroid-chrome-512x512.pngfavicon.svgsite.webmanifest

Conseils de pro

Conservez chaque fichier de favicon à la racine de votre site web pour une compatibilité optimale.
Effectuez une actualisation forcée (ou videz le cache) après avoir mis à jour les favicons pour voir le changement immédiatement.
Testez votre favicon sur plusieurs appareils et navigateurs pour vous assurer qu’il s’affiche correctement.

Questions fréquentes

Réponses aux questions courantes sur la génération et la mise en place des favicons.

Quels formats d’image sont pris en charge ?

Vous pouvez téléverser des fichiers PNG, JPG, GIF, WebP, BMP ou SVG. Pour un résultat optimal, commencez par une image carrée d’au moins 512×512 pixels. Les fichiers jusqu’à 10 Mo sont acceptés.

Quelle taille doit avoir l’image d’origine ?

Une image source carrée de 512×512 ou plus est idéale. Le générateur la réduit proprement ; une source grande et nette produit donc les plus belles petites icônes.

Prenez-vous en charge les favicons SVG ?

Oui. Les fichiers SVG sont conservés en tant que favicon.svg vectoriel pour un rendu net sur les navigateurs modernes, et sont également pixellisés dans toutes les tailles PNG et ICO pour les navigateurs plus anciens.

Quelles tailles de favicon sont générées ?

Le package inclut des PNG 16×16 et 32×32, un favicon.ico multi-résolutions, une icône Apple touch 180×180, des icônes Android/PWA 192×192 et 512×512, ainsi qu’un manifeste web.

Comment ajouter le favicon à mon site web ?

Extrayez le ZIP à la racine de votre site et collez l’extrait HTML fourni dans le <head> de vos pages. Les instructions complètes et le code par framework figurent ci-dessus.