Favicon et manifeste web

Une image en entrée, le jeu complet en sortie : un vrai ICO multi-tailles, l'icône tactile Apple aplatie comme Apple l'exige, les PNG du manifeste, le manifeste web lui-même, et le bloc HTML à coller. L'outil vous montre aussi le rognage maskable d'Android avant qu'il ne morde — c'est là que la plupart des icônes perdent discrètement leurs bords.

Déposez une image ici ou cliquez pour choisir
Une image carrée fonctionne le mieux, d'au moins 512 pixels. Un PNG transparent donne le résultat le plus net.
Ce qui tient sous l'icône sur un écran d'accueil.
Remplit la transparence là où elle n'est pas admise, et sert de marge à l'icône maskable.
FichierTailleCe qui l'utilise
 

    


    

    

      
Pourquoi le .ico compte encore

      
Un simple PNG suffit à la plupart des navigateurs, et si vous n'aviez besoin que d'une icône d'onglet, vous pourriez vous arrêter là. Le ICO mérite sa place parce qu'il contient plusieurs résolutions dans un seul fichier et que c'est le système qui choisit la bonne : l'onglet prend le 16, un raccourci épinglé ou un lien du bureau prend le 32 ou le 48, et chacun est dessiné à partir d'une image faite pour cette taille plutôt que réduite à la volée depuis une grande. Le fichier produit ici est un conteneur de PNG avec un petit en-tête, ce que lit tout navigateur sorti dans ce siècle.

      
La zone sûre de l'icône maskable

      
Android ne promet pas d'afficher votre icône en carré. Selon le lanceur, il peut la rogner en cercle, en squircle ou en carré arrondi, et la seule garantie que vous avez, c'est le cercle intérieur : quatre-vingts pour cent de la largeur, centré. Un visuel qui va jusqu'aux bords est précisément celui qui perd ses bords. La parade consiste à donner aux icônes du manifeste une marge jusqu'à cette zone sûre, et l'aperçu ici trace le rognage pour que vous le voyiez avant un utilisateur.

      
Pourquoi l'icône tactile Apple n'a pas de transparence

      
iOS compose l'icône de l'écran d'accueil sur sa propre forme arrondie et ne respecte pas le canal alpha comme on l'espérerait : les zones transparentes ressortent en noir. Ce fichier-là est donc aplati sur votre couleur de fond avant l'encodage, tandis que les PNG du manifeste gardent leur alpha, là où il est correctement pris en charge.

      
Que faire des fichiers

      
Placez-les à la racine du site, pas dans un dossier d'assets : navigateurs et robots devinent le chemin du favicon et certains le demandent que vous le référenciez ou non. Collez ensuite le bloc HTML dans l'en-tête de votre page. Le chemin du manifeste est la seule ligne qui doive correspondre à l'endroit où vous déposez réellement le fichier.


      
FAQ

      

        
Ai-je encore besoin d'un favicon.ico si j'ai des PNG ?
À la lettre, non. En pratique, oui : quantité de robots, de lecteurs de flux et d'outils anciens demandent le favicon par son chemin sans jamais regarder votre balisage. Cela coûte quelques kilo-octets.

        
Mon icône est brouillonne à 16 pixels. Que faire ?
Rien ici ne peut y remédier, parce qu'il n'y a pas la place. À cette taille, une marque dispose d'environ dix pixels lisibles en largeur ; un logotype finira toujours en bouillie. Fournissez comme source une version simplifiée — une forme, une lettre — et gardez le lockup complet pour tout le reste.

        
Faut-il désactiver la marge maskable ?
Seulement si votre visuel comporte déjà une marge généreuse. S'il remplit le cadre, laissez-la active, sinon Android viendra rogner dedans.

        
Mon image est-elle envoyée quelque part ?
Non. Chaque taille est dessinée sur un canevas dans cette page et l'archive est assemblée en mémoire. Rien n'est envoyé.

      

      
Réalisé par l'équipe GO AI. Générateur d'icônes d'app · Redimensionneur par lots · Tous les outils gratuits