it-swarm.com.de

Wie favicon in Rails hinzufügen 3.2

Ich weiß, dass neue Rails-Apps mit einer leeren Datei favicon.ico geliefert werden. Ich möchte wissen, wie ich ein Favicon hinzufüge. Ich weiß, dass Sie den favicon_link_tag-Helfer verwenden können, aber ich bin nicht sicher, wie Sie die Datei favicon.ico füllen. Verwenden Sie Favicon-Generatoren? Wenn ja, welches ist das Beste?

Ich möchte es auch zwischenspeichern können, macht Rails das auch automatisch?

Vielen Dank

72
noob

generieren Sie Ihr Favicon beispielsweise hier: http://www.favicon.cc/ und legen Sie es in das Verzeichnis public/ab

UPDATE Das Favicon im öffentlichen Ordner ist nicht vorkompiliert und kann für längere Zeit zwischengespeichert werden. Es scheint besser zu sein, favicon_link_tag zu verwenden, um Probleme bei der Aktualisierung von favicon zu vermeiden. Ich weiß nicht, dass Browser Favicon in root benötigt haben. Laut favicon wiki werden alle modernen Browser gepflegt 

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

Fügen Sie dies einfach dem <head></head>-Abschnitt Ihrer Layouts hinzu:

<%= favicon_link_tag 'favicon.ico' %>

Platzieren Sie das Bild favicon.ico in /app/assets/images/, wenn Sie die Asset-Pipeline verwenden, und in /public/images/, wenn Sie dies nicht tun.

Außerdem gibt es einen Fehler bei der Verwendung von Ruby 2.0 mit Rails 3.0.20 (und möglicherweise auch 3.0.x), der beim Versuch, favicon.ico zu rendern, eine Ausnahme auslöst.

Das Update besteht darin, den folgenden Code in application_controller.rb einzufügen:

  config.relative_url_root = ""
111
Adrien Lamothe

Alle diese Antworten besagen, dass ein 16x16-Symbol erstellt werden muss. In Wirklichkeit sollten Sie jedoch ein 16x16- und ein 32x32-Symbol erstellen, um die Anzeige der Retina zu unterstützen. Keiner der Online-Generatoren hat damit einen sehr guten Job gemacht.

Auf dem Mac gibt es eine großartige $ 5-App namens Icon Slate , mit der Sie beide Formate in einer einzigen ICO-Datei erstellen können.

Unter Windows habe ich Axialis IconWorkshop mit großem Erfolg verwendet, aber es ist ein viel schwereres Werkzeug und ist mit etwa 50 € deutlich teurer.

Beide erstellen eine ico-Datei mit 16x16- und 32x32-Bildern.

Wenn Sie die Asset-Pipeline verwenden, verwenden Sie anstelle von/public den Ordner app/assets/images. Die Anzahl der Browser, die das link-Tag ignorieren, nähert sich schnell Null, sodass es sich nicht lohnt, durch Reifensperren zu springen.

Wie in anderen Antworten erwähnt, verwenden Sie dies in der head, um es anzuzeigen:

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

Ich kann diese Option nur wärmstens empfehlen. Es war einfach zu benutzen und kostenlos http://converticon.com

5
MFrazier

schreibe in application.html.haml :

= favicon_link_tag '/images/favicon.ico'

platziere die Datei favicon.ico in dir:

project/public/images
3
shilovk

Sie benötigen eine 16x16-Pixel-Image-Datei mit dem Namen favicon.ico, die öffentlich im Stammverzeichnis Ihrer Site verfügbar sein muss.

Sie können jederzeit einen großen Bildeditor verwenden, um Ihr Logo oder ein anderes Bild in das .ico-Format zu konvertieren. Es gibt kostenlose Optionen wie Gimp, mit denen Sie großartige Symbole auf der Grundlage vorhandener Bilder besser erstellen können als Online-Symbolgeneratoren.

2
fagiani

Um ein Favicon für alle Plattformen (nicht nur für Desktop-Browser) zu generieren, können Sie RealFaviconGenerator und den gem. Rails_real_favicon verwenden:

  • Gehen Sie zu RealFaviconGenerator und senden Sie Ihr Bild. Sie können Ihr Symbol oder Ihre Plattform für jede Plattform erstellen: iOS, Android usw.
  • Wenn Ihr Symbol fertig ist, klicken Sie auf die Registerkarte "Rails", um die Schritte zur Installation Ihres Favicons in Ihrem Rails-Projekt zu erfahren. Grundsätzlich werden Sie gefragt:
    • Fügen Sie den Rails_real_favicon-Edelstein zu Gemfile hinzu.
    • Erstellen Sie eine neue Datei mit dem Namen favicon.json. Diese Datei beschreibt die gerade erstellten Symbole.
    • Führen Sie Rails generate favicon aus, um die Symbole und den HTML-Code zu erstellen.
    • Fügen Sie in Ihren Layouts render 'favicon' hinzu, um den HTML-Code in Ihre Seiten einzufügen.

Der Vorteil dieser Lösung besteht darin, dass die Favicon-Dateien (favicon.ico, Apple-touch-icon.png, aber auch browserconfig.xml und manifest.json) in die Asset-Pipeline eingefügt werden.

Vollständige Offenlegung: Ich bin der Autor von RealFaviconGenerator.

1
philippe_b

Ich habe die oben genannten Links ausprobiert und die Dienste waren nicht sehr einfach zu bedienen. Ich finde diesen Link auf einer anderen Site und kopierte meine .png-Datei einwandfrei und war sehr einfach zu bedienen. Ich dachte, ich würde diesen Link auch teilen, da ich denke, dass es ein besserer Service ist.

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

1
Matt

Seit Jahren nicht mehr, aber Gimp ist in der Lage, .ico-Dateien mit mehreren Bildern unterschiedlicher Größe zu speichern. Sie müssen lediglich das .ico-Format mit einigen sichtbaren Ebenen exportieren.

1
marcpmichel

Ich hatte ein Problem, wenn ich eine Datei in /public/favicon.ico stelle, ich verwende AWS EBS.

Ich könnte den Fehler beheben.

Die bessere Lösung für mich war, die Datei in /app/assets/images/favicon.ico zu legen und = favicon_link_tag 'favicon.ico' zu verwenden.

0
hguzman

Die Lösung, die sich für mich bewährt hat, bestand darin, Folgendes zu tun:

  1. Gehen Sie zu http://realfavicongenerator.net/favicon_checker und bestätigen Sie, dass Sie ein gutes Favicon haben. Wenn dies nicht der Fall ist, erstellen Sie ein Werkzeug (und viele andere nützliche und verwandte Symbole). Hinweis: Dies setzt voraus, dass Sie ein gutes Symbol (z. B. PNG) als Basis für das Favicon verwenden.
  2. Nutzen Sie die Option http://realfavicongenerator.net Suggestion, um die ?v=version-Option zu verwenden, um das Caching-Problem des Browsers zu beheben. Das hat mir geholfen.
  3. Kopieren Sie die Datei favicon.ico in public und app/assets/images. Sie brauchen nur eine, aber wenn Sie nicht wissen, welche davon, das Kopieren an beiden Orten nicht schadet ... oder Sie können experimentieren, um zu sehen, welche funktioniert. Nutzen Sie ?v=version, um Ihren Test durchzuführen.
  4. Fügen Sie im Abschnitt <head></head> Ihrer Layouts in app/views/layouts-Dateien (z. B. application.html.erb) die folgende Zeile hinzu:

<%= favicon_link_tag 'favicon.ico' %>

Hoffentlich liefert das ein einfaches Rezept. Ich bin sicher, wenn ich etwas verpasst habe, kann und wird jemand diese Antwort verbessern.

0
Chip Roberson