77 votes

Comment ajouter une favicon dans rails 3.2

Je sais que les nouvelles applications rails sont livrées avec un fichier favicon.ico vide. Je voudrais savoir comment ajouter une favicon. Je sais que vous pouvez utiliser le fichier favicon_link_tag mais je ne sais pas comment remplir le fichier favicon.ico. Utilisez-vous des générateurs de favicon ? Si oui, lequel est le meilleur ?

Je veux aussi pouvoir le mettre en cache, est-ce que rails le fait aussi automatiquement ?

Remerciements

3 votes

stackoverflow.com/questions/6130593/ Ce billet vous aidera à

116voto

Adrien Lamothe Points 840

Il suffit de l'ajouter à la rubrique <head></head> de vos mises en page :

<%= favicon_link_tag 'favicon.ico' %>

Placez l'image favicon.ico dans /app/assets/images/ si vous utilisez le pipeline d'actifs, et dans /public/images/ si vous ne l'êtes pas.

Il y a également un bug si vous utilisez Ruby 2.0 avec Rails 3.0.20 (et peut-être aussi 3.0.x), qui lèvera une exception lors du rendu de favicon.ico.

La solution consiste à placer le code suivant dans application_controller.rb :

  config.relative_url_root = ""

0 votes

J'aime cette solution. Je recherche ce problème parce que je veux mettre des identifiants clairs dans la favicon pour les onglets dev/stage/prod, et c'est ce dont j'avais besoin !

0 votes

Hmm... Je viens d'avoir l'expression la plus bizarre de ce bug, le fait d'avoir favicon.ico dans mon répertoire public (qui fonctionne bien en développement et sur heroku) ne fonctionnait pas et bizarrement en essayant de regarder "myhostname.com/favicon. ico" me donnait l'écran de bienvenue de nginx (celui où vous venez d'installer nginx, aucune idée pourquoi, c'est pourquoi je poste ceci, parce que c'est incroyablement étrange pour moi) puis dès que j'ai ajouté le favicon_link_tag tout allait bien, le favicon apparaissait et le regarder directement fonctionnait. tout ceci à partir d'une application par ailleurs parfaitement correcte.

70voto

gayavat Points 3169

Générez votre favicon par exemple ici : http://www.favicon.cc/ et le placer dans le répertoire public/

U Le Favicon dans le dossier public n'est pas précompilé et peut être mis en cache pendant une longue période. Il semble qu'il soit préférable d'utiliser favicon_link_tag pour éviter les problèmes de mise à jour du favicon. Je ne savais pas que les navigateurs avaient besoin de favicon dans Root. D'après favicon wiki tous les navigateurs modernes maintient

<link rel="shortcut icon" href="favicon path" /> (favicon_link_tag)

0 votes

Merci. Pour une raison quelconque, je peux voir le favicon lorsqu'il est www.website.com mais lorsque je vais simplement sur website.com mais il ne s'affiche pas ?

26 votes

Le favicon n'est donc pas pris en compte dans le pipeline de ressources ?

4 votes

Il est préférable/standard d'avoir le favicon sur yourdomain.com/favicon.ico car certains navigateurs les demandent directement (même si vous n'utilisez pas la balise meta).

9voto

Tim Sullivan Points 10677

Bien que toutes ces réponses indiquent qu'il faut créer une icône 16x16, la réalité est que vous devriez créer à la fois une icône 16x16 et une icône 32x32, afin de prendre en charge les écrans rétina. Aucun des générateurs en ligne n'a fait un très bon travail à ce sujet.

Sur Mac, il existe une excellente application à 5 $ appelée Ardoise à icônes qui vous permet de créer facilement les deux formats dans un seul fichier ICO.

Sous Windows, j'ai utilisé Axialis IconWorkshop avec beaucoup de succès, mais il s'agit d'un outil beaucoup plus lourd et nettement plus cher (environ 50 euros).

Les deux créent un fichier ico contenant des images 16x16 et 32x32.

Si vous utilisez le pipeline de ressources, utilisez le dossier app/assets/images plutôt que /public. Le nombre de navigateurs marginaux qui ignorent l'option link se rapproche rapidement de zéro, il n'est donc pas utile de faire des pieds et des mains pour les satisfaire.

Comme indiqué dans d'autres réponses, utilisez-le dans la rubrique head pour l'afficher :

<%= favicon_link_tag 'favicon.ico' %>

4 votes

realfavicongenerator.net est gratuit et génial ! ne gaspillez pas votre argent ;)

3 votes

Investir dans de superbes outils, c'est ne jamais gaspiller son argent. Bien que ce site soit meilleur que la plupart des autres, il n'est même pas comparable à un outil comme IconWorkshop, ou à l'expérience utilisateur agréable d'Icon Slate, qui est également utilisable hors ligne.

5voto

MFrazier Points 109

Je recommande vivement cette option. C'était facile à utiliser et gratuit http://converticon.com

2voto

fagiani Points 175

Vous avez besoin d'un fichier image de 16x16 pixels appelé favicon.ico et il doit être disponible publiquement dans la racine de votre site.

Vous pouvez toujours utiliser un grand éditeur d'images pour convertir votre logo ou une autre image au format .ico. Il existe des options gratuites comme Gimp qui permettent de créer de superbes icônes à partir d'une image existante, mieux que les générateurs d'icônes en ligne.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X