Favicons et icônes d’app
Pour les onglets du navigateur et l’écran d’accueil des téléphones
Mettez votre icône sur votre site
- 1Téléchargez les icônes
- 2
Site fait avec un créateur de site ? Choisissez-le ci-dessous et importez la seule image qu’il demande.
- 3
Pour tout autre site : placez les fichiers dans son dossier principal et collez les lignes ci-dessous dans l’en-tête de chaque page.
Dans un onglet du navigateur · Dans les résultats de recherche
Hearth & Key Realty · Maisons à vendre dans tout le comté de San Mateo
Sur l’écran d’accueil d’un téléphone
Android la découpe à sa propre forme
- Cercle
- Squircle
- Arrondie
- Goutte
En 16 pixels
Un onglet dessine votre icône en 16 × 16 pixels. La voici, pixel par pixel.
Taille réelle
Dans le ZIP
- favicon.ico16, 32, 48 pxOnglets du navigateur : chaque navigateur le demande au site
- favicon-96x96.png96 pxRésultats de recherche
- apple-touch-icon.png180 pxÉcran d’accueil de l’iPhone
- icon-192.png192 pxAndroid et applis web installées
- icon-512.png512 pxAndroid et applis web installées
- site.webmanifestJSONVotre nom, vos icônes et votre couleur, pour Android
- head.htmlHTMLLes lignes pour l’en-tête de vos pages
Mettez-la sur votre site
- 1
Décompressez le fichier et envoyez tout dans le dossier principal du site, à côté de sa page d’accueil.
- 2
Collez ces lignes dans l’en-tête de chaque page.
- 3
Publiez. Un navigateur peut mettre un jour à montrer une nouvelle icône.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#a16207">La barre du navigateur des téléphones prend la couleur de votre marque grâce à la dernière ligne.