Images · Favicons

Générer les favicons d'un site web sur Mac

Tous les favicons dont un site web a besoin, plus le manifeste web et le code HTML à coller dans votre page.

S’exécute sur votre Mac

Demander à l’IAChatGPTClaudePerplexityMode IAGrokMarkdown

Télécharger OneMacTools Plus d’outils Images

Favicons sur un Mac

Favicons avec des fichiers d’exemple et ses options

Ce que Favicons a produit à partir des fichiers d’exemple

Captures d’écran de l’app, avec des fichiers d’exemple.

Comment utiliser Favicons

1
Déposez votre logo
Une seule image, carrée si possible et d’au moins 512 px. Les images non carrées sont recadrées en un carré centré.
2
Saisissez les informations de votre site
Saisissez le nom du site et la couleur du thème pour le manifeste web, et choisissez le fond de l’icône Apple touch.
3
Cliquez sur Créer les favicons
Tous les fichiers favicon sont créés, avec le manifeste et l'extrait HTML.
4
Mettez-le en ligne sur votre site
Copiez les fichiers du dossier « favicons » (dans un dossier daté dans Téléchargements › OneMacTools) à la racine de votre site web, et collez le HTML dans le <head> de votre page. L’extrait est aussi affiché dans l’app.

Ce que fait Favicons

À partir d'un seul logo, obtenez favicon.ico contenant les versions 16, 32 et 48 px, des PNG en 16 et 32 px, une icône Apple touch de 180 px sur fond uni pour qu'elle ne devienne pas noire sur iPhone, et des icônes de 192 et 512 px pour Android et les apps web installables — plus un site.webmanifest avec le nom et la couleur de thème de votre site, et l'extrait HTML pour votre <head>.

Idéal pour

Ajouter un favicon à un nouveau site web
Rendre un site installable sur les téléphones
Remplacer un favicon flou

Options expliquées

Nom du site: Le nom utilisé dans site.webmanifest, affiché quand quelqu’un installe votre site sur un téléphone. Si vous laissez vide, le nom du fichier image est utilisé. Le nom court correspond aux 12 premiers caractères.
Couleur du thème: Une couleur hexadécimale comme #1E90FF, utilisée pour la couleur de thème du navigateur et la couleur d’arrière-plan du manifeste. Blanc si le champ reste vide.
Fond de l’icône Apple touch: Blanc, Couleur du thème ou Noir. Les iPhone affichent sur fond noir les icônes transparentes de l’écran d’accueil : l’icône Apple touch de 180 px reçoit donc un fond uni.
Arrondir les coins: Désactivé par défaut. Arrondit les coins de votre logo dans chaque taille de favicon.

Bonnes pratiques

Utilisez un symbole simple, pas votre logo complet avec du texte. À 16 px, seules les formes marquées restent reconnaissables.
Partez d’un PNG transparent pour que le favicon s’affiche bien sur les onglets clairs comme sombres.
Saisissez la couleur du thème en valeur hexadécimale. Elle colore l’interface du navigateur sur certains téléphones : choisissez la couleur principale de votre marque.
Après la mise en ligne, ouvrez votre site dans une fenêtre privée pour vérifier la nouvelle icône, car les navigateurs gardent longtemps les favicons en cache.

Fonctionne avec

Dans: Une image, idéalement un PNG carré de 512 px ou plus.
Sortie: Un dossier « favicons » avec favicon.ico (16, 32 et 48 px à l’intérieur), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), android-chrome-192x192.png et android-chrome-512x512.png, plus site.webmanifest et add-to-head.html.

Les images non carrées sont recadrées en un carré centré.

Questions sur Favicons

De quels fichiers favicon un site web a-t-il besoin ?

favicon.ico pour les anciens navigateurs, des PNG de 16 et 32 px pour les onglets, une icône Apple touch de 180 px pour l’écran d’accueil de l’iPhone, et des icônes de 192 et 512 px avec un manifeste web pour Android. OneMacTools les crée toutes, ainsi que le HTML à coller dans le <head> de votre page.

Où vont les fichiers ?

Dans le dossier racine de votre site web, à côté d'index.html. L'extrait HTML et le manifeste s'attendent tous deux à les y trouver.

Comment créer un favicon.ico sur Mac ?

Déposez votre logo sur Favicons et cliquez sur Créer les favicons. Le fichier favicon.ico contient des versions en 16, 32 et 48 px, en plus des tailles PNG.

Pourquoi mon icône apparaît-elle noire sur l’écran d’accueil d’un iPhone ?

iOS affiche en noir les zones transparentes d’une icône de l’écran d’accueil. L’icône Apple touch est donc placée sur un fond uni blanc, noir ou de la couleur du thème pour l’éviter.

À quoi sert site.webmanifest ?

Il indique aux téléphones le nom, les icônes et les couleurs de votre site quand quelqu'un l'ajoute à son écran d'accueil ou l'installe comme app web.

Mon nouveau favicon ne s’affiche pas. Pourquoi ?

Les navigateurs gardent les favicons en cache très longtemps. Vérifiez que les fichiers sont à la racine de votre site et que l’extrait est dans le <head>, puis rechargez dans une fenêtre privée.

Favicons envoie-t-il mes fichiers en ligne ?

Non. Favicons s’exécute entièrement sur votre Mac : vos fichiers ne le quittent jamais et l’outil fonctionne hors ligne.

Favicons va-t-il modifier mes fichiers originaux ?

Non. Les résultats sont enregistrés comme nouveaux fichiers dans un dossier daté dans Téléchargements › OneMacTools, et vos originaux restent exactement tels quels, sauf si vous activez une option qui indique le contraire.

De quoi Favicons a-t-il besoin ?

Simplement un Mac sous macOS 26 ou ultérieur. Rien d'autre à installer.

Étape suivante

Images OG

Créez la carte 1200 × 630 qui s’affiche quand votre lien est partagé sur X, LinkedIn, Slack, WhatsApp et iMessage.

Icônes d’app

Une image carrée pour toutes les icônes d’app : le catalogue de ressources iOS pour Xcode, les icônes Android de lanceur et adaptatives, et un .icns pour Mac.