Comment ajouter un favicon sur des rails 3.2

Je sais que les nouveaux rails applications viennent avec un vide favicon.fichier ico. Je veux savoir comment je vais sur l'ajout d'un favicon. Je sais que vous pouvez utiliser le favicon_link_tag helper, mais je ne suis pas sûr de la façon de remplir le favicon.fichier ico. Utilisez-vous des générateurs de favicon? Si oui, lequel est le meilleur?

Je veux aussi être capable de mettre en cache, ne rails de le faire automatiquement?

Grâce

InformationsquelleAutor noob | 2012-03-28
  1. 69

    générer votre favicon pour exemple ici: http://www.favicon.cc/
    et mettez-la dans public/répertoire

    Mise à JOUR
    Favicon dans le dossier public n'est pas précompilés et il peut être mis en cache pour une longue période de temps.
    On dirait qu'il est préférable d'utiliser favicon_link_tag pour éviter de favicon problèmes de mise à jour. Je ne sais pas les navigateurs besoin de favicon à la racine. Selon favicon wiki tous les navigateurs modernes maintient 

    <link rel="shortcut icon" href="favicon path" /> (favicon_link_tag)
    • Merci. Pour une raison quelconque, je peux voir le favicon quand il est www.website.com, mais quand je viens de passer à website.com, il ne montre pas?
    • essayez de mettre à jour le cache de votre navigateur
    • Ainsi, le favicon ne pas aller dans l'asset pipeline?
    • Il est mieux/standard avoir la favicon sur yourdomain.com/favicon.ico comme certains navigateurs demande pour eux directement (même lorsque vous n'utilisez pas la balise meta pour elle).
    InformationsquelleAutor gayavat
  2. 112

    Simplement ajouter ceci à la <head></head> la section de votre mise en page:

    <%= favicon_link_tag 'favicon.ico' %>

    Lieu le favicon.ico image dans /app/assets/images/ si vous utilisez l'asset pipeline, et dans /public/images/ si vous n'êtes pas.

    Aussi, il y a un bug si à l'aide de Ruby 2.0 avec des Rails 3.0.20 (et peut-être aussi 3.0.x), qui déclenche une exception lorsque l'on essaie de rendre favicon.ico.

    La solution est de placer le code suivant dans application_controller.rb:

      config.relative_url_root = ""
    • J'aime bien cette solution. Je recherche cette question parce que j'ai envie de mettre clairement les identifiants dans le favicon pour dev/stage/prod onglets, et c'est ce dont j'avais besoin!
    • hmm... j'ai juste eu le plus étrange expression de ce bug, juste après avoir favicon.ico dans mon répertoire public (qui fonctionne très bien dans le développement et sur heroku) ne fonctionne pas et bizarrement essayer de regarder "myhostname.com/favicon.ico" me donnerait la nginx écran d'accueil (celui d'où vous venez d'installer nginx, aucune idée de pourquoi, c'est pourquoi je poste ce, parce qu'il est incroyablement étrange pour moi) puis dès que j'ai ajouté le favicon_link_tag tout allait bien, le favicon a montré jusqu'à et regardant directement travaillé. tout cela à partir d'un ailleurs parfaitement beaux-app.
    InformationsquelleAutor Adrien Lamothe
  3. 9

    Alors que toutes ces réponses sont en train de créer une icône 16x16, la réalité est, vous devriez être en créant à la fois un 16x16 et 32x32, afin de soutenir les écrans de la rétine. Aucun de mise en ligne des générateurs a fait un très bon travail avec ce.

    Sur Mac, il existe un grand de 5 $app appelé Icône De L'Ardoise, qui permet de créer facilement des deux formats dans un seul fichier ICO.

    Sur Windows, j'ai utilisé Axialis IconWorkshop avec un grand succès, mais il est beaucoup plus lourd de l'outil, et est nettement plus chère à environ 50 euros.

    Deux va créer un fichier ico avec les deux 16x16 et 32x32 en son sein.

    Si vous êtes à l'aide de l'asset pipeline, l'utilisation de l'app/assets/images dossier plutôt que d' /public. Le nombre de franges les navigateurs qui ignorent le link tag approche rapidement de zéro, de sorte à sauter à travers des cerceaux pour les accueillir n'est pas la peine.

    Comme mentionné dans d'autres réponses, utilise dans le head pour l'afficher:

    <%= favicon_link_tag 'favicon.ico' %>
    • realfavicongenerator.net c'est gratuit et génial! ne gaspillez pas votre argent 😉
    • Investir dans de superbes outils n'est jamais gaspiller votre argent. Alors que ce site est mieux que la plupart, il n'est même pas comparable à un outil comme IconWorkshop, ou l'agréable expérience de l'utilisateur de l'Icône de l'Ardoise, qui est également utilisable hors-ligne.
    InformationsquelleAutor Tim Sullivan
  4. 5

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

    InformationsquelleAutor MFrazier
  5. 3

    écrire dans application.html.haml:

    = favicon_link_tag '/images/favicon.ico'

    placer le fichier favicon.ico dir:

    project/public/images
    InformationsquelleAutor shilovk
  6. 2

    Vous bien besoin d'un 16x16 pixels de l'image fichier nommé favicon.ico et il doit être à la disposition du public à la racine de votre site.

    Vous pouvez toujours utiliser une des principales éditeur d'image pour convertir votre logo ou l'image de l' .ico format. Il y a des options libres comme Gimp qui peut faire de grandes icônes basées sur image existante mieux que en ligne icône de générateurs.

    InformationsquelleAutor fagiani
  7. 1

    J'ai essayé les liens ci-dessus et les services n'ont pas été très simple à utiliser. J'ai trouvé ce lien sur un autre site et il copié sur mon .fichier png parfaitement et est très simple à utiliser. Je pensais que je voudrais partager ce lien, je pense que c'est un meilleur service.

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

    • Ce n'est pas de fournir une réponse à la question. À la critique ou à la demande de clarification d'un auteur, de laisser un commentaire en dessous de leur poste.
    • Va faire dans le futur. Bon conseil. J'étais encore un assez gros noob quand j'ai quitté ce commentaire.
    InformationsquelleAutor Matt
  8. 1

    Ne l'avez pas fait depuis des années, mais Gimp est capable de sauver .ico des fichiers avec plusieurs images de différentes tailles.
    Vous avez juste besoin d'exporter .ico format avec quelques calques visibles.

    InformationsquelleAutor marcpmichel
  9. 1

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

    • Aller à RealFaviconGenerator et soumettez votre photo. Vous pouvez créer une icône de la plateforme par plateforme: iOS, Android, etc.
    • Une fois que votre icône est prêt, cliquez sur "Rails" onglet pour obtenir les étapes pour installer votre favicon dans les Rails de projet. Fondamentalement, il vous sera demandé de:
      • Ajouter le rails_real_favicon gem pour vous Gemfile
      • Créer un nouveau fichier nommé favicon.json. Ce fichier décrit les icônes que vous venez conçu.
      • Exécuter rails generate favicon pour créer les icônes et le code HTML.
      • Ajouter render 'favicon' dans vos mises en page, insérer le code HTML dans vos pages.

    L'avantage de cette solution est qu'il injecte le favicon fichiers (favicon.ico, apple-touch-icon.png, mais aussi browserconfig.xml et manifest.json) dans l'asset pipeline.

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

    InformationsquelleAutor philippe_b
  10. 0

    La solution que j'ai trouvé qui a fonctionné pour moi a été de faire ce qui suit:

    1. Aller à http://realfavicongenerator.net/favicon_checker et confirmer que vous avez une bonne favicon. Si vous ne le faites pas, alors l'utilisation de leur outil permettant de créer une (et bien d'autres, utiles et des icônes). Remarque: ceci vous oblige à avoir une bonne icône (par exemple, PNG) pour l'utiliser comme base pour le favicon.
    2. Profiter de http://realfavicongenerator.net suggestion pour l'utilisation ?v=version option pour aider à vaincre la mise en cache du navigateur problème. Cela m'a aidé.
    3. Copiez le favicon.ico à public et app/assets/images. Vous aurez seulement besoin d'un, mais si vous ne savez pas lequel, la copie à la fois des lieux ne fait pas de mal...ou vous pouvez expérimenter pour voir ce qui fonctionne le - profiter de la ?v=version pour effectuer votre test.
    4. Ajouter la ligne suivante dans le <head></head> la section de votre mise en page dans app/views/layouts fichiers (par ex. l'application.html.erb):

    <%= favicon_link_tag 'favicon.ico' %>

    Je l'espère, qui fournit une recette simple. Je suis sûr que si j'ai oublié quelque chose, quelqu'un peut et va améliorer cette réponse.

    • Je suis l'auteur de RealFaviconGenerator. Merci pour le recommander! Vous devriez vérifier la RFG nouveau: intégration avec des Rails est plus simple que jamais 🙂 Et il n'est plus nécessaire pour la gestion des versions, comme l'asset pipeline gère.
    • Je pensais à l'aide de RealFaviconGenerator dans mon projet. Comment jamais, je pense qu'il ne prend pas en charge les différentes icônes simultanément pour la même application, ai-je le droit? Le problème, c'est que mon projet répond à plusieurs noms de domaine et de présenter quelque chose de différent pour chacun, ce qui doit inclure un autre favicon. Est-ce possible avec RealFaviconGenerator?
    InformationsquelleAutor Chip Roberson
  11. 0

    J'ai eu un problème quand je mets le fichier dans /public/favicon.ico, je suis en utilisant AWS EBS.

    J'ai corrigé l'erreur.

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

    InformationsquelleAutor hguzman