web-dev-qa-db-fra.com

Comment ajouter un favicon dans Rails 3.2

Je sais que les nouvelles applications Rails sont livrées avec un fichier favicon.ico vide. Je veux savoir comment je vais ajouter un favicon. Je sais que vous pouvez utiliser l’assistant 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?

Merci

ruby-on-railsfavicon
72
noob

générez votre favicon par exemple ici: http://www.favicon.cc/ .__ et mettez-le dans le répertoire/public

UPDATE Le favicon dans le dossier public n'est pas précompilé et peut être mis en cache pendant une longue période. Il semble préférable d’utiliser favicon_link_tag pour éviter les problèmes de mise à jour de favicon. Je ne connais pas les navigateurs nécessaires favicon en root. Selon favicon wiki tous les navigateurs modernes maintiennent 

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

Ajoutez simplement ceci à la section <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'utilisez pas.

De plus, si vous utilisez Ruby 2.0 avec Rails 3.0.20 (et peut-être aussi 3.0.x), il y a un bogue qui provoque une exception lors de la tentative de rendu de favicon.ico.

Le correctif consiste à placer le code suivant dans application_controller.rb:

  config.relative_url_root = ""
111
Adrien Lamothe

Alors que toutes ces réponses disent de créer une icône 16x16, la réalité est que vous devriez créer à la fois un 16x16 et un 32x32, afin de prendre en charge les écrans Retina. Aucun des générateurs en ligne n'a fait un très bon travail avec cela.

Sur Mac, il existe une superbe application à 5 $ appelée Icon Slate , qui vous permet de créer facilement les deux formats dans un seul fichier ICO.

Sur Windows, j’ai utilisé Axialis IconWorkshop avec beaucoup de succès, mais c’est un outil beaucoup plus lourd, qui coûte nettement plus cher à environ 50 €.

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

Si vous utilisez le pipeline d'actifs, utilisez le dossier app/assets/images plutôt que/public. Le nombre de navigateurs marginaux qui ignorent la balise link approche rapidement de zéro, aussi ne vaut-il pas la peine de passer à travers les étapes pour les accueillir.

Comme mentionné dans d'autres réponses, utilisez ceci dans la head pour l'afficher:

<%= favicon_link_tag 'favicon.ico' %>
9
Tim Sullivan

Je recommande fortement cette option. Il était facile à utiliser et gratuit http://converticon.com

5
MFrazier

écrire dans application.html.haml :

= favicon_link_tag '/images/favicon.ico'

placer le fichier favicon.ico dans le répertoire:

project/public/images
3
shilovk

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

Vous pouvez toujours utiliser un éditeur d’image majeur pour convertir votre logo ou une autre image au format .ico. Il existe des options gratuites telles que Gimp qui permettent de créer de telles icônes sur la base d'une image existante mieux que les générateurs d'icônes en ligne.

2
fagiani

Pour générer un favicon pour toutes les plateformes (pas seulement pour les navigateurs de bureau), vous pouvez utiliser RealFaviconGenerator et le joyau Rails_real_favicon:

  • Accédez à RealFaviconGenerator et envoyez votre photo. Vous pouvez créer votre icône, plate-forme par plate-forme: iOS, Android, etc.
  • Une fois que votre icône est prête, cliquez sur l'onglet "Rails" pour connaître les étapes à suivre pour installer votre favicon dans votre projet Rails. En gros, il vous sera demandé de:
    • Ajouter la gemme Rails_real_favicon à Gemfile
    • Créez un nouveau fichier nommé favicon.json. Ce fichier décrit les icônes que vous venez de concevoir.
    • Exécutez Rails generate favicon pour créer les icônes et le code HTML.
    • Ajoutez render 'favicon' dans vos mises en page pour insérer le code HTML dans vos pages.

L'avantage de cette solution est qu'elle injecte les fichiers favicon (favicon.ico, Apple-touch-icon.png, mais aussi browserconfig.xml et manifest.json) dans le pipeline d'actifs.

Divulgation complète: je suis l'auteur de RealFaviconGenerator.

1
philippe_b

J'ai essayé les liens ci-dessus et les services n'étaient pas très simples à utiliser. Je trouve ce lien sur un autre site et il copié sur mon fichier .png sans faille et était très simple à utiliser. Je pensais partager ce lien aussi, car je pense que c'est un meilleur service.

http://www.chami.com/html-kit/services/favicon/

1
Matt

Cela fait des années que je ne l'ai pas fait, mais Gimp est capable d'enregistrer des fichiers .ico contenant plusieurs images de différentes tailles . Il vous suffit d'exporter au format .ico avec certains calques visibles.

1
marcpmichel

J'ai eu un problème lorsque j'ai mis le fichier dans /public/favicon.ico, j'utilise AWS EBS.

Je pourrais réparer l'erreur.

La meilleure solution pour moi a été mis le fichier dans /app/assets/images/favicon.ico et d'utiliser = favicon_link_tag 'favicon.ico'

0
hguzman

La solution qui a fonctionné pour moi était la suivante:

  1. Allez sur http://realfavicongenerator.net/favicon_checker et confirmez que vous avez un bon favicon. Si vous ne le faites pas, utilisez leur outil pour en créer un (ainsi que de nombreuses autres icônes utiles et connexes). Remarque: cela nécessite que vous ayez une bonne icône (par exemple, PNG) à utiliser comme base pour le favicon.
  2. Tirez parti de http://realfavicongenerator.net suggestion d'utiliser l'option ?v=version pour résoudre le problème de la mise en cache du navigateur. Cela m'a aidé.
  3. Copiez le fichier favicon.ico dans public et app/assets/images. Vous n'en aurez besoin que d'un seul, mais si vous ne savez pas lequel, copier dans les deux endroits ne vous fait pas de mal ... ou vous pouvez essayer de voir lequel fonctionne: utilisez le ?v=version pour effectuer votre test.
  4. Ajoutez la ligne suivante dans la section <head></head> de vos présentations dans les fichiers app/views/layouts (par exemple, application.html.erb):

<%= favicon_link_tag 'favicon.ico' %>

J'espère que cela fournit une recette simple. Je suis sûr que si quelque chose me manque, quelqu'un peut et va améliorer cette réponse.

0
Chip Roberson