Créer un favicon
Pour créer un favicon, déposez votre logo : notre générateur en tire tous les fichiers, de l’icône d’onglet de 16 pixels à l’icône d’app de 512 pixels, avec le code HTML à coller. Tout se passe dans votre navigateur, et votre image n’est jamais envoyée.
Qwyzzle
Summit Roasters
Fox EsportsDéposez votre logo ici
PNG, JPG, WebP ou SVG. Une image carrée de 512 px ou plus donne le meilleur résultat.
Vos favicons sont créés dans votre navigateur. Votre image n’est jamais envoyée.
Ce qu’est un favicon, et où il apparaît
Un favicon est la petite icône carrée qui représente votre site. Son nom vient de l’anglais « favorite icon », l’icône des favoris : le premier navigateur à en afficher un le plaçait à côté de vos marque-pages, qu’il appelait Favoris.
Vous le voyez dans les onglets du navigateur, à côté du titre de la page, en 16 pixels de large, ou 32 sur un écran haute résolution. Il signale aussi votre site dans les favoris et l’historique. Quand quelqu’un enregistre votre site sur l’écran d’accueil de son téléphone, il devient une icône d’app. Et Google l’affiche à côté du nom de votre site dans les résultats de recherche.
Partout, son rôle est le même : se faire reconnaître d’un coup d’œil au milieu d’autres icônes.
Pourquoi un seul favicon devient tout un jeu de fichiers
Chacun de ces emplacements est apparu à une autre époque et réclame son propre fichier. Le générateur de favicon ci-dessus les crée tous à partir d’une seule image.
Les onglets, les favoris et l’historique utilisent favicon.ico, un seul fichier qui contient des versions de 16, 32 et 48 pixels. C’est le format le plus ancien : quand une page n’indique aucune icône, les navigateurs cherchent encore favicon.ico dans le dossier racine du site.
Partez d’un SVG et vous obtenez aussi favicon.svg, que les navigateurs capables d’afficher des icônes SVG utilisent à la place. Fait de formes plutôt que de pixels, il reste net sur tous les écrans.
Les iPhone et les iPad utilisent apple-touch-icon.png, un carré de 180 pixels, quand quelqu’un ajoute votre site à l’écran d’accueil. Comme l’iPhone remplit de noir les zones transparentes, cette icône a toujours un fond uni : votre couleur, ou du blanc si vous avez choisi la transparence.
Les téléphones Android, et les sites installés comme des applications depuis un navigateur, utilisent icon-192.png et icon-512.png. Ils les trouvent grâce à site.webmanifest, un petit fichier texte qui indique aux navigateurs le nom de votre site, si vous en avez saisi un dans l’outil, et l’emplacement de ses grandes icônes.
Les PNG séparés de 16 à 48 pixels sont des fichiers de rechange pour les services qui demandent un PNG. Pour les résultats de recherche, Google lit les liens d’icône dans le code HTML de votre page d’accueil.
Comment ajouter les fichiers favicon à votre site
Si vous modifiez vous-même les fichiers de votre site, ou si votre développeur s’en charge, il suffit de deux étapes.
D’abord, décompressez le téléchargement et placez les fichiers dans le dossier racine de votre site, le dossier principal où se trouve la page d’accueil. Pour vérifier, ajoutez /favicon.ico à l’adresse de votre site : l’icône doit s’afficher.
Ensuite, collez les lignes HTML du README (l’outil les affiche aussi) dans la section head de vos pages, c’est-à-dire la partie en haut du code HTML qui contient le titre de la page. Il y a une ligne pour le fichier ICO, une pour l’icône Apple Touch et une pour le manifeste, plus celle du SVG si vous en avez un.
En général, toutes les pages partagent le même gabarit : vous ne les collez qu’une fois. Supprimez d’abord les anciennes lignes d’icône, sinon les navigateurs risquent de garder l’ancienne icône.
Avec un créateur de site, vous pouvez sauter ces deux étapes : importez icon-512.png dans son réglage d’icône du site, et il ajoute le code HTML pour vous.
Comment rendre un logo lisible en 16 pixels
En 16 × 16, votre icône entière tient en 256 minuscules carrés de couleur. La plupart des logos n’ont pas été dessinés pour ça.
Commencez par le symbole, pas par le nom : un nom de huit lettres tassé dans 16 pixels ne laisse que deux pixels de large à chaque lettre. Pas de symbole ? Prenez la première lettre, en grand et en gras. Les lettres épaisses résistent bien plus longtemps à la réduction que les lettres fines.
Ensuite, enlevez du détail. Les traits très fins et les petits espaces se fondent dans ce qui les entoure, et un slogan devient une tache.
Ce qui compte, c’est le contraste entre clair et foncé, pas les couleurs elles-mêmes. Les onglets sont clairs ou sombres selon le thème, et une icône bleu marine disparaît sur une barre d’onglets sombre. Si votre logo est foncé, donnez-lui un fond clair dans l’outil, ou l’inverse.
La marge, l’espace entre votre logo et le bord du carré, est un compromis. Trop grande, et le logo rétrécit dans l’onglet. Trop petite, et l’iPhone, qui arrondit les coins des icônes de l’écran d’accueil, rogne les angles du logo.
Enfin, regardez les aperçus d’onglets clair et sombre ci-dessus à leur taille réelle, sans zoomer. Notre vérificateur de logo gratuit va plus loin : il réduit votre logo à 32 pixels et mesure la part de détails qui survit.
Quand redessiner le logo plutôt que le réduire
Parfois, rien ne le sauve. Dans une illustration détaillée ou un effet 3D fait d’ombres et de lumières, le détail est le design, et à 16 pixels, il disparaît. Cet outil peut redimensionner votre logo, mais pas le redessiner.
Ce n’est pas pour autant un mauvais logo, seulement un logo fait pour de plus grands formats. Dessinez exprès une petite version : un symbole simplifié, ou votre initiale dans la police de votre marque. Gardez vos couleurs et un peu de la forme, et les gens feront le lien entre les deux. Entre une initiale nette et une miniature floue, nous choisirons l’initiale à chaque fois.
Besoin d’un nouveau logo ? Notre générateur de logo IA en dessine un à partir du nom de votre marque, et d’une courte description si vous le souhaitez. Les logos issus de nos modèles de logo sont livrés avec le symbole dans un fichier séparé quand ils en ont un, et chaque logo que vous achetez chez nous comprend ses fichiers favicon.
Questions sur les favicons
Il est gratuit, sans inscription et sans filigrane. Et votre image reste chez vous : l’outil fonctionne entièrement dans votre navigateur. Il crée chaque taille et le zip directement sur votre appareil, et l’image n’est jamais envoyée à nos serveurs. Vous pouvez donc l’utiliser sans crainte pour un logo que vous n’avez encore montré à personne.
Carrée, et d’au moins 512 pixels de côté. La plus grande icône du jeu fait 512 pixels : un PNG, un JPG ou un WebP plus petit doit être étiré pour la remplir, et les grandes icônes deviennent floues. L’outil vous prévient quand c’est le cas. Un SVG n’a pas cette limite : fait de formes et non de pixels, il reste net à toutes les tailles. Un logo large ne remplit qu’une fine bande du carré, alors partez plutôt de votre symbole ou de votre initiale.
Il vous les faut tous, car les navigateurs et les téléphones ne demandent pas tous le même fichier, et le code HTML de l’outil indique à chacun lequel utiliser. Le fichier ICO est celui que tous les navigateurs comprennent. Les PNG servent aux téléphones et aux applications installées, avec des fichiers de rechange dans les petites tailles. Le SVG, que vous obtenez en partant d’un SVG, reste net sur tous les écrans dans les navigateurs qui le prennent en charge.
Le plus souvent, votre navigateur affiche une copie enregistrée. Les navigateurs gardent les favicons bien plus longtemps que le reste d’une page : l’ancienne icône peut rester alors même que les nouveaux fichiers sont en ligne. Essayez une actualisation forcée, qui recharge la page sans ses fichiers enregistrés : Ctrl+Maj+R sous Windows, Cmd+Maj+R sur Mac (Option+Cmd+R dans Safari). Si cela ne suffit pas, ouvrez l’adresse de votre site suivie de /favicon.ico et actualisez cette page, ou regardez dans une fenêtre de navigation privée. Les navigateurs de vos visiteurs se mettent à jour avec le temps.
Dans les réglages du créateur de site plutôt que dans un dossier. La plupart des créateurs de site et des plateformes de boutique en ligne proposent un réglage « icône du site » ou « favicon », où vous importez un seul PNG carré. Choisissez icon-512.png, le plus grand fichier du zip : le créateur de site aura largement de quoi faire pour créer les tailles plus petites. Si le réglage demande une taille précise, utilisez le fichier correspondant. Le créateur de site ajoute lui-même le code HTML : vous pouvez laisser le README de côté.
Google prend en compte un nouveau favicon au prochain passage de son robot d’exploration, le programme qui lit les pages web pour Google, sur votre page d’accueil. Il n’y a pas de calendrier fixe pour cela. Google veut une image carrée et le lien vers l’icône dans le code HTML de votre page d’accueil : vérifiez que les deux sont en place. Ensuite, ce qu’il affiche et quand, c’est Google qui en décide : laissez-lui le temps.
Pas encore de logo ? Créez le vôtre.
Concevez-le avec notre générateur de logo IA, ou partez d’un modèle dans le créateur de logo. Chaque logo que vous téléchargez sur DepthLogo est déjà livré avec ses favicons.