Créez vos favicons.
Simplement.

Tout ce dont vous avez besoin pour générer, personnaliser et intégrer vos assets web avec GiveYouFavicon.

Introduction

GiveYouFavicon transforme votre logo ou votre image source en un ensemble d'assets adaptés aux différents environnements web.

Le générateur produit notamment les favicons classiques, les icônes Apple, les assets Android ainsi que le manifeste nécessaire à une Progressive Web App.

Pour obtenir les meilleurs résultats, utilisez de préférence une image source carrée et suffisamment grande.

Installation

Aucun package supplémentaire n'est nécessaire pour utiliser le générateur depuis l'interface GiveYouFavicon.

Déposez simplement votre asset source, ajustez les paramètres disponibles puis lancez la génération.

Asset recommandé

PNGCarréHaute résolution

Personnalisation

Ajustez votre asset avant de générer le pack final. Les paramètres disponibles permettent notamment de contrôler l'apparence et l'adaptation de l'icône.

Coins arrondis

Appliquez un rayon cohérent sur les différentes tailles générées.

Marge

Ajoutez un espace intérieur autour de votre logo pour améliorer sa lisibilité dans les petites tailles.

Arrière-plan

Définissez une couleur de fond lorsque votre icône nécessite une surface opaque.

Suppression du fond

Retirez le fond de l'image lorsque cette option est disponible dans votre offre.

Intégration

Placez les fichiers générés dans le dossier public de votre application puis ajoutez les références nécessaires dans la balise<head>.

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

Manifest & PWA

Le fichiersite.webmanifestpermet de déclarer les informations nécessaires à l'installation de votre site comme application.

Utilisez les icônes générées par GiveYouFavicon dans les différentes tailles prévues par votre environnement.

json

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

Bonnes pratiques

Privilégiez la simplicité

Un logo trop complexe perd rapidement sa lisibilité lorsqu'il est affiché en 16 × 16 pixels.

Conservez une zone de sécurité

Évitez de placer les éléments importants trop près des bords de votre image source.

Vérifiez les petites tailles

Contrôlez toujours le résultat à 16 × 16 et 32 × 32 pixels avant de publier votre site.

Prêt à générer votre pack ?

Retournez au générateur et transformez votre asset en quelques secondes.

Ouvrir le générateur