Real Favicon Generator

Outildesign

Publié par le , mis à jour le (52033 lectures)

favicon android ios winphone css font-face icone performanc

Real Favicon Generator est un outil gratuit en ligne permettant de vérifier et de générer des fichiers "favicon" pour son site web.

Bien plus complet que d'autres outils du même acabit, RFG ne se contente pas de la version favicon de bureau mais également des versions pour smartphones et tablettes iOS, Android et Windows Phone.

Ainsi, s'il manque certaines version ou tailles d'icones, ou que leur taille n'est pas correctement spécifiée, l'outil ne manquera pas de vous en faire part.

Une fois l'audit réalisé, Real Favicon Generator vous propose de concevoir l'ensemble des fichiers (ZIP) et vous livre le code HTML à copier dans vos pages.

Commentaires

Merci pour l'outil que je bookmark.

Par contre je trouve abberant d'avoir une multiplication de la même balise, alors que c'est juste la taille qui change ...

Exemple :
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160" />

On ne peut pas avoir des favicon SVG ?

Pratique en effet, mais inutilisable dans la vrai vie pour iOS et Windows si on veut quelque chose d'optimal qui s’intègre parfaitement au design des deux plateformes. En effet iOS préconise des icônes sur fond plein (et ajoute des bords arrondis), alors que Windows demande des icônes sur fond transparent. Il faudrait pouvoir proposer à l'outil deux icônes, une pour iOS, une pour Windows si on veut "bien faire". Vu que les icônes n'ont pas le même style sur les deux plateformes, il vaut mieux à mon avis le faire en deux fois et créer une icône dédiée. (Vous pouvez aussi utiliser cette astuce http://www.alsacreations.com/astuce/lire/1535... pour Windows)

J'ai rien dit, meaculpa,voir réponse plus bas de l'auteur :)

En fait @Stéphanie W. , lorsque tu soumets une image il te propose d'en charger une pour IOs et une pour Windows :) Plutôt bien fait, par contre il génère 19 images...

Je suis l'auteur de RealFaviconGenerator.

@XdiZ : C'est vrai que ça fait beaucoup de code... mais pourtant nécessaire pour que ça fonctionne partout. Il y a 8 images pour iOS pour combiner Retina/non retina, iPhone/iPad, iOS6/iOS7. Les terminaux iOS n'ont à vrai dire pas besoin de ces déclarations, car il vont chercher les images d'eux-même par convention de nommage (comme le fait IE avec la favicon.ico). Mais il faut savoir qu'Android pioche également dans ces images, et il a besoin des déclarations. Quelle image prend-il ? Ca dépend de l'appareil ! Un vrai bazar...

Quand aux favicon en PNG, il y en a pour tous les goûts. Par exemple la version en 96x96 est pour Google TV.

Pour l'image SGV pourquoi pas... mais toutes les docs officielles que j'ai trouvées (iOS, WIndows 7, Windows 8...) parlent de PNG (ou ICO pour Windows 7 et antérieur), pas de SVG. Dans ces cas-là je privilégie de pragmatisme à l'élégance.

@Stéphanie W. : Absolument. Et RealFaviconGenerator permet de coller aux guidelines des différentes platformes. Par exemple, si on soumet une image transparente, RFG propose d'ajouter un fond à la version iOS. Ok, juste un fond uni, sans dégradé ou autre. Donc si c'est un projet avec nécessité de faire une icone particulière, il faudra lancer Photoshop ou autre. Mais si le but est juste de faire quelque chose de présentable et consistant, alors RFG permet de faire cela en quelques clicks. Idem pour Windows 8, avec cette fois-ci la possibilité de créer une icone "blanche", comme les icônes Courrier, IE, etc.

@Philippe_B : Effectivement, je n'avais pas compris comment faire pour activer ce bouton bleu, meaculpa, il y a peut-être un petit truc à faire niveau ergo pour rendre ça plus "intuitif" :)
Autre remarque : j'ai créé une image de 144px (format final), du coup je l'upload et il me dit ensuite que c'est pas la bonne taille. Ça serait peut-être pas mal d'indiquer dès le départ la taille pour que l'utilisateur n'ai pas à re-uploader une image de la bonne taille :)
Enfin la page d'accueil parle d'Android, mais pour le moment pas encore de possiblité d'uploader là encore une icône pour cette plateforme : c'est en projet ?

En tout cas sympa de voir un petit outil made in France, bravo m'sieur :)

@Stéphanie W. : Merci pour vos encouragements !

C'est vrai que laisser l'utilisateur uploader une image trop petite sans préavis, ce n'est pas très fair play. C'est arrangé.

Android ne fait rien comme tout le monde. iOS et Windows 8 ont des règles spécifiques, définies pour eux. Avec Android, c'est l'école de la débrouille. Il cherche en priorité les web clips d'iOS, sans doute parce que les conventions d'Apple conviennent bien à Android (l'opacité de l'icone par exemple). A défaut, il prend les favicons en PNG. Quant à la résolution, cela dépend du device. Du coup, lorsqu'on utilise RFG pour générer une icone, le web clip iOS vaut également pour Android. Mais ce n'était indiqué nul part et c'est un tort. Corrigé à l'instant.

@Stéphanie W. : J'ai observé sur tous mes appareils Android (HTC Desire en 2.3, Galaxy Nexus en 4.3 et Nexus 7 en 4.3) que ce sont les icones iOS qui sont chargées. J'ai également trouvé des commentaires allant dans le même sens. Cela semble indiquer que l'ordre ne change pas.

A partir de là c'est le genre de chose à démontrer de façon empirique.

Salut,

Il y a une incompatibilité (d'affichage uniquement ?) avec IE8.
L'appui sur le bouton "Select your Favicon picture" n'est suivi d'aucune action visible.

@Eric2A : Arg... plupload est un peu capricieux sur IE8 c'est vrai... je vais débuguer tout ça. Merci de l'avoir signalé.

@LuciferX :
@XdiZ :
Thanks!

@Manumanu : Je ne connaissais pas ce site mais je me suis basé sur la référence de Microsoft (http://msdn.microsoft.com/en-us/library/ie/dn255024(v=vs.85).aspx). Sur les 4 vignettes citées, RealFaviconGenerator en supporte 3. Comme les images son plus petites que les vignettes, les tailles ne correspondent pas. En revanche, j'ignorais la vignette rectangulaire. Bizarre, elle est pourtant citée dans les specs de Microsoft, j'aurais du la voir... Bref, voici un TODO. Demain j'espère. Merci pour le feedback !

@Eric2A : 'rci ! :)

@Philippe_B : Le lien de la référence concerne Win8, il semble que les dimensions aient changé pour Win8.1 ; d'où la différence, apparemment.

@Manumanu : Arf ! C'est vrai, il y a du changement dans l'air. Quelques specs de Microsoft l'indiquent et notamment http://msdn.microsoft.com/en-us/library/ie/dn...

J'ai ajouté la génération de l'icone en 310x150 il y a peu. Je vais me pencher sur cette histoire d'image en haute résolution.

Avec des noms comme "msapplication-square310x310logo" j'étais certain de ne pas de tromper et pourtant... Merci d'avoir insisté !

@Didodu258 : avec l'adresse localhost ? Est-ce que tu as essayé d'ajouter une ligne dans ton fichier hosts comme "127.0.0.1 domainepasreel.com" et d'accéder à ton site avec ce nom de domaine ?

@Didodu258 : Merci ! Bon, problème résolu à part ça. Je ne connaissais pas le problème de localhost par rapport aux favicon, je travaille avec le fichier host pour jouer avec plusieurs sites à la fois.

Je trouve l'outil d'analyse que je trouve bien pratique. Pour le reste, l'outil est bien pratique pour les jeux de grandes icônes. Pour les petites, dans la plupart des cas, un redimensionnement donne de très mauvais résultats, et il vaut mieux: soit le corriger manuellement, soit redessiner carrément l'icône. Mais si il y a une aide pour le reste (en plus avec apple qui change de tailles comme de chemises) c'est toujours ça de gagné!

@kustolovic : Oui c'est l'idée. Pour les gens comme moi qui développent mais n'ont pas de compétence dans le graphisme, le redimentionnement bête et méchant est la seule option. Pour ceux qui savent faire, RFG permet au moins de produire les bonnes tailles d'image. A partir de là, à chacun de reprendre ces images une part une, en fonction de son savoir faire et... du temps/budget disponible :)

Bonjour, merci à l'auteur pour ce petit outil absolument génial..
j'étais loin de me douter qu'il fallait autant de favicon pour contenter tout ce petit monde.

J'aimerai simplement revenir sur la notion de racine. Vous recommandez et expliquez dans votre faq qu'il faut placer les favicon à la racine du site.
Mais cela fait vraiment beaucoup de fichier. Est ce que l'on ne pourrais pas se contenter de mettre favicon.ico et configbrowser.xml à la racine et le reste dans un dossier /FAVICON. D'après ce que je lis dans votre Faq cela marcherait non ?

Ensuite question spécifique à mes site, auquel vous ne saurez peux être pas répondre, masi je pose quand même au cas ou. j'utilise un CMS (spip en l'occurence) et habituellement on place le favicon dans le repertoire squelette ( là ou se trouve tout le site, javascript, html, css etc...) pensez vous que cela soit une bonne pratique, ou que l'on devrait mettre les favicon à la racine du site là ou se trouve le coeur de SPIP le .htaccess et autre.

Merci, cordialement.
En tout cas bravo pour votre outils.

@casp : Merci ! :)

Pour la racine : En plus de favicon.ico et browserconfig.xml, il y a également les images pour iOS, au nombre de 9. Ca commence à faire pas mal de fichiers qui préfèrent se retrouver dans la racine... Il est vrai que le code généré par RFG déclare ces fichiers, donc ils peuvent en théorie se trouver n'importe où. Mais dans la mesure où il s'agit d'une convention officielle d'Apple, il y a un risque qu'une autre plateforme la reprenne à son compte (et à sa sauce) et soit surprise de ne pas retrouver ces fichiers à leur place. Android par exemple utilise les images iOS, comme quoi la pratique est répandue.

Pour le CMS : Je ne suis pas un grand utilisateur de CMS donc je n'ai pas de franche opinion sur la question. Mettre les icônes dans un répertoire séparé sonne comme une bonne idée, mais comme vous le constatez cela ne répond pas aux contraintes du terrain, comme celle d'avoir favicon.ico à la racine. Il serait bon que le CMS génère un .htaccess pour mettre en place les redirections qui vont bien (/favicon.ico => 301 vers /icons/favicon.ico par exemple). J'ignore si toutes les plateformes supportent les redirections mais c'est au moins le cas pour Android et 4.4 et iOS 7.0.4. Donc à creuser... puis à implémenter dans les différents CMS. Mouais, pas si simple...

A partir de là, on peut imaginer une version moins "sûre" du code généré où tous les fichiers (même favicon.ico) seraient dans un répertoire séparé. Je le note en TODO, ce serait une option intéressante pour éviter aux utilisateurs de CMS de se retrouver au pied du mur.

Ok Merci pour votre réponse.

Et tant que j'y suis pour combler mon ignorance, rassurez moi: malgré la quantité de liens, les navigateurs ne chargeront que le favicon qui les intéressent et ignoreront tous les autres ?
(car sinon ca fait beaucoup de bande passante utilisé simplement pour des favicons)

Bonjour ! Merci pour cet outil de vérification des favicon.
Certains moteurs de recherche accordent aussi plus de poids aux sites qui en ont, comme Yandex et Baidu.

Bonjour ! Merci pour cet outil de vérification des favicon.
Certains moteurs de recherche accordent aussi plus de poids aux sites qui en ont, comme Yandex et Baidu.

Vous pouvez créer votre favicon en ligne et gratuitement sur http://onlinefavicon.com/, PNG JPEG ou un fi... gif à 16x16 ou 32x32 fichier ICO, vous pouvez également voir galerie avec favicons créés par d'autres utilisateurs et de télécharger le même . Avec l'outil de dessin, vous pouvez créer votre propre favicon. À la fin vous lisez la description comment configurer favicon à votre site.