Your site's little icon in browser tabs, on Google and on phone home screens. From your logo or your initials, in a few seconds. Nothing is sent: everything happens in your browser.
Première fois ? Le déroulé, pas à pas
Appuyez sur « Choisir mon logo », ou passez à l'onglet « Des initiales » et tapez vos lettres.
Réglez la forme (« Carré », « Arrondi » ou « Rond »), la « Marge autour » et la couleur de fond en surveillant l'aperçu : onglet clair, onglet sombre, résultats Google et écran d'accueil.
Remplissez « Nom du site (pour les téléphones) » : c'est le nom affiché sous l'icône sur l'écran d'accueil.
Appuyez sur « Tout télécharger (.zip) », ou sur « Icône pour WordPress (512 px) » si votre site est sous WordPress.
Conseils
Fond transparent : l'icône de l'iPhone ne peut pas l'être, elle prend la « Couleur de fond » ; choisissez-la même si vous gardez la transparence.
Regardez l'aperçu sur l'onglet sombre : un logo foncé sur fond transparent s'y voit mal.
Wix, Squarespace, Shopify, Jimdo : l'image de 512 pixels du bouton « Icône pour WordPress (512 px) » suffit, à envoyer dans le réglage d'icône du service.
La nouvelle icône n'apparaît pas ? Les navigateurs gardent longtemps l'ancienne : vérifiez dans une fenêtre de navigation privée.
or drop it here. A square SVG or PNG of at least 512 pixels gives the best result.
Background colour
Also used for the iPhone icon, which cannot be transparent.
Background colour
Letter colour
Shape
Margin
Preview
Actualités
Météo
In Google results
https://votre-site.fr
On the home screen
iPhone
Android
Your logo stays on your device: the icons are made by your browser, nothing is sent or stored.
Install the icons
How do I install the favicon on WordPress?
Click “Icon for WordPress (512 px)” above.
In the dashboard: Appearance › Customize › Site Identity › Site Icon (or, with a recent theme, Settings › General › Site Icon).
Choose the image, then Publish. WordPress makes the other sizes itself: no need for the .zip.
How do I install it on a hand-made site (HTML, PHP)?
Download the .zip and unzip it.
Put the files at the root of the site (next to the home page), by FTP or with your host's file manager.
Paste the code above into the <head> section of every page.
And on Wix, Squarespace, Shopify or Jimdo?
These services have their own setting, often called “Favicon” or “Site icon” in the site settings. Upload the 512-pixel image there (“Icon for WordPress” button): it works everywhere.
Good to know
What if my logo is unreadable when tiny?
In a tab, the icon is 16 pixels: text or fine details disappear. Keep only your logo's symbol, or switch to initials.
A very wide logo becomes tiny in a square: use its left part (the symbol) or the first letter.
Reduce the margin so the design fills the square better.
Why can't I see my new icon?
Browsers keep the old icon in memory for a long time. Open your site in a private window to check. On Google, the change can take a few days to a few weeks.
What are all these files for?
favicon.ico: the browser tab and bookmarks, read everywhere, even by old software.
icon.svg (if your logo is SVG): an icon sharp at every size for recent browsers.
apple-touch-icon.png: the icon when someone adds your site to an iPhone or iPad home screen.
icon-192.png, icon-512.png, icon-maskable-512.png and site.webmanifest: the same for Android, which crops the icon into a circle or rounded square.
What size should a favicon be?
There is not one size but several: 16, 32 and 48 pixels inside favicon.ico for tabs and bookmarks, 180 pixels for the iPhone, 192 and 512 pixels for Android. The tool makes them all from a single image; start from a square logo of at least 512 pixels, or an SVG.
Is my logo sent to a server?
No. The icons are drawn in your browser, on your device: the logo you choose is neither sent nor kept.
Actualités
Météo