I know new rails apps come with an empty favicon.ico file. I want to know how I go about adding a favicon. I know you can use the favicon_link_tag helper, but I am not sure how to populate the favicon.ico file. Do you use favicon generators? If so, which one is best?
I also want to be able to cache it, does rails do that automatically as well?
Thanks
Simply add this to the <head></head> section of your layouts:
<%= favicon_link_tag 'favicon.ico' %>
Place the favicon.ico image in /app/assets/images/ if you are using the asset pipeline, and in /public/images/ if you are not.
Also, there is a bug if using Ruby 2.0 with Rails 3.0.20 (and maybe also 3.0.x), that will throws an exception when trying to render favicon.ico.
The fix is to place the following code into application_controller.rb:
config.relative_url_root = ""
generate your favicon for example here: http://www.favicon.cc/
and put in to public/ directory
UPDATE
Favicon in public folder is not precompiled and it may be cached for a long time.
It looks like it is better to use favicon_link_tag to avoid favicon updating problems. I do not know browsers needed favicon in root. According to favicon wiki all modern browsers maintains
<link rel="shortcut icon" href="favicon path" /> (favicon_link_tag)
While all these answers are saying to create a 16x16 icon, the reality is you should be creating both a 16x16 and 32x32, in order to support retina displays. None of the online generators did a very good job with this.
On Mac, there is a great $5 app called Icon Slate, which allows you to easily create both formats in a single ICO file.
On Windows, I've used Axialis IconWorkshop with great success, but it's a much heavier-duty tool, and is significantly more expensive at about €50.
Both will create an ico file with both 16x16 and 32x32 images within it.
If you're using the asset pipeline, use the app/assets/images folder rather than /public. The number of fringe browsers that ignore the link tag is rapidly approaching zero, so jumping through hoops to accommodate them isn't worth it.
As mentioned in other answers, use this in the head to display it:
<%= favicon_link_tag 'favicon.ico' %>
I highly recommend this option. It was easy to use and free
http://converticon.com
write in application.html.haml:
= favicon_link_tag '/images/favicon.ico'
place file favicon.ico in dir:
project/public/images
You pretty much need a 16x16 pixel image file called favicon.ico and it must be available publically in the root of your site.
You can always use a major image editor to convert your logo or other image to the .ico format. There are free options like Gimp that can make such great icons based on existing image better than online icon generators.
I tried the links above and the services were not very simple to use. I find this link on another site and it copied over my .png file flawlessly and was very simple to use. I thought I would share this link too, as I think it is a better service.
http://www.chami.com/html-kit/services/favicon/
Haven't done it for years, but Gimp is capable of saving .ico files with multiple images having different sizes.
You just need to export to .ico format with some visible layers.
To generate a favicon for all platforms (not only for desktop browsers), you can use RealFaviconGenerator and the rails_real_favicon gem:
Go to RealFaviconGenerator and submit your picture. You can craft your icon, platform per platform: iOS, Android, etc.
Once your icon is ready, click the "Rails" tab to get the steps to install your favicon in your Rails project. Basically, you will be asked to:
Add the rails_real_favicon gem to you Gemfile
Create a new file named favicon.json. This file describes the icons you've just designed.
Run rails generate favicon to actually create the icons and HTML code.
Add render 'favicon' in your layouts to insert the HTML code in your pages.
The advantage of this solution is that it injects the favicon files (favicon.ico, apple-touch-icon.png, but also browserconfig.xml and manifest.json) in the asset pipeline.
Full disclosure: I'm the author of RealFaviconGenerator.
The solution I found that worked for me was to do the following:
Go to http://realfavicongenerator.net/favicon_checker and confirm you have a good favicon. If you don't, then use their tool to create one (plus many other useful and related icons). Note: this requires that you have a good icon (e.g. PNG) to use as a basis for the favicon.
Take advantage of http://realfavicongenerator.net suggestion to use ?v=version option to help defeat the browser caching issue. This helped me.
Copy the favicon.ico to public and app/assets/images. You'll only need one but if you don't know which one, copying to both places doesn't hurt...or you can experiment to see which one works - take advantage of the ?v=version to perform your test.
Add the following line in the <head></head> section of your layouts in app/views/layouts files (e.g. application.html.erb):
<%= favicon_link_tag 'favicon.ico' %>
Hopefully that provides a simple recipe. I'm sure if I missed anything, someone can and will improve on this answer.
I had a problem when I put file into /public/favicon.ico, I am using AWS EBS.
I could fix the mistake.
The better solution for me was put the file into /app/assets/images/favicon.ico and to use = favicon_link_tag 'favicon.ico'
In rails 6, simply place it inside the public folder and reload the page.
Related
I cannot find anything on the internet probably because I'm not sure how to ask the question properly, but I cannot seem to figure out why on some images or links to pages i have to put ../ in front of the file name for dreamWeaver to see the file. It's not every file just some of them.
It depends if the pages or images are in a separate folder.
If your page is in root/pages/home/index.html and your image is in root/pages/home/images/image.jpg then you will only need images/image.jpg but if the image is in root/pages/about/images/image.jpg then you require .. because it's outside of the local folder.
This is a good link: https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
I am working on a SproutCore project. I am trying to get the site as is on the IPAD, but the CSS background images, onClick and redirect is not working on the IPAD.
Let me know any solution on this.
When developing on the iPad, I have found the following to be useful in my Buildfile:
mode :debug do
config :all, :combine_javascript => true
end
Most iOS devices tend to have difficulty loading a large number of Javascript files, and this will concatenate them all into one. This may or may not resolve your issues, but many issues manifest if you leave them as separate files.
Also, do you have any errors in the debugger that you could share? It might help us track down the issue.
For broken images/CSS after building, it's often a relative path issue.
You might want to check your CSS / image paths in your compiled CSS & index.html files.
After building the project, look inside your output directory and try the following:
Open index.html file in your browser, and see which CSS/image files are not loading correctly.
Find your index.html file and replace instances of "/static" with "static"
Find stylesheet-packed.css & stylesheet#2x-packed.css and replace instances of "/static" with "../../../static" (or whatever fixes the path in your case)
I have build.sh script to automate this and it works for me. Let me know if you want it.. Good luck!
I have the following folder structure in my zend framework 2 tutorial project in Ubuntu:
/zf2tutorial
/module
/Album
/view
/album
/album
myImage.png
index.phtml
in my index.phtml code I have a line such as this:
<img alt='SMALLIMG' src='myImage.png'/>
this does not work.
If I change the myImage.png to be http://www.someurlhere.com this works fine.
How do I load in myImage.png instead? I tried giving it the direct URL:
/home/myUsername/NetBeansProjects/zf2tutorial/module/Album/view/album/album/myImage.png
I've also tried doing the following:
../myImage.png
but neither of these worked.
Also please note, it has to be a bad path (I must be doing something wrong here) because the broken image icon shows up... indicating there is a linking problem here.. the direct URL is copy pasted from the properties section of the image itself..
It's not a problem of image or path. You are trying to make an impossible thing.
You certainly define in your virtualhost configuration that the documentRoot is your public directory.
That means your web server will give access to resources located from this public directory.
You have to put your resources from this public path (css, images..) or you can define a symbolic link if you allow followingSymlinks.
Hope this helps.
<img alt="" src="img/2 header960.png" align="center" >
The fundamental issue you are confusing is the difference between views vs public content.
View files are essentially HTML templates into which you can inject certain values at runtime. Your directory structure correctly places this stuff within a views directory inside your module. These template files themselves are never exposed to the end-user. They are only used by the application to generate fully-populated HTML chunks that are eventually sent to the browser.
In contrast, static assets - like images, javascripts, external stylesheets, etc - are served directly by the webserver to your visitors. As such they need to be in a directory that the webserver has been told to publicly serve to visitors.
The easy thing to do is to simply move directories containing these static assets out of the module and into the app's public folder.
But this is undesirable in the sense that you might reasonably want the module to be a self-contained entity: it can contain its own routes, its own controllers/actions, and, in particular, its own static assets.
So, how to make the webserver reach down into the module and treat some of the content there as "public"?
The answer is to use an "asset manager", a component that links certain module content into the app's public directory. Typically this means:
Activate the asset manager module
Create a public directory inside your module
Place those static assets there
Inform the asset manager which public module directories into the public app directory.
Take a look at the AssetManager module by Roberto Wesley Overdijk and additional instructions for use.
[As a side note, welcome to the world of web development. ZF2 is a great framework, but it's not the easiest thing for a beginner. It provides a lot of flexibility for doing things in a "good way", but it can certainly come off as convoluted at first. Try not to get discouraged. ;-)]
the reason may be the image extension (.png)
please check your exact extension case, is it written in small or capital case???
update your image link exactly as like the name of image.
eg.
myImage.png or myImage.PNG
try to look for an .htaccess file somewhere in your dir most probably on module folder..that file blocks the access for the image you are trying to link..(my basis here is my application in yii which fails to show the image even if the path is correct)
you may create an images folder in your home dir: /zf2tutorial/images for example and put all the images there calling it: src="/images/myImage.png"..
or
find the htaccess im talking about, change the restrictions(or delete it:|) and you can use this path: src="/module/Album/view/album/album/myImage.png"..
<div id='small_image'>
<a href='/feeds/posts/default' title='smallimg'>
<img alt='SMALLIMG' src='c:/home/myUsername/NetBeansProjects/zf2tutorial/module/Album/view/album/album/myImage.png'/>
</a>
</div>
My situation is the following:
I have an index.html and some JavaScript that loads HTML snippets from the server. Inside these snippets, I have some URLs to images like
/some/folder/picture.jpg
Of course these do not work in PhoneGap. Weinre tells me that PhoneGap is trying to load the picture from
file:///some/folder/picture.jpg
Any ideas how to solve this? I was thinking about something like a base href, or some configuration in PhoneGap where one could specify a root path, but I did not find anything like that ...
Thanks,
Michael
I had the same problem especially when you have a lot of views (pages) and want to load one from a menu, yet you are at an unknown location.
The simple work around is to use the window.location object.
window.location.href.split('www')[0] + 'www'
This gives you the absolute URL to your 'base'. The www is the folder which is relevant for IOS and Android, so this also makes your app compatible in multiple platforms.
From this you can use a regular expression which passes the entire doc like jquery mobile does with data-* attributes to describe their elements. You simply replace the regular expression with the path returned. You'll want to do this during initialisation otherwise it will create a massive bottle neck.
Hope this helps and is along the lines of what you're looking for.
Cheers,
Sententia
You can't do that with a <base> because / is always host-relative — it can't be redefined to be in a subdirectory. You have two options:
rewrite your HTML to use fully relative paths like ../../some/folder/picture.jpg (or have something do the rewrite for you as a build step), or
alter the "browser" (PhoneGap's wrapper) so that it loads URLs differently.
I'm not familiar with PhoneGap so I can't comment on automatic options, but I personally would start using relative URLs.
I develop rails applications with my designer who has minimum knowledge about rails.
She works on Windows through file-sharing from a Linux server.
She always has hard time finding view files to work on.
I usually use 'grep' to find a view file.
But she can't.
If you have a good suggestion, please share with me.
I have an idea which may be overkill.
Is there a way to automatically add comments around view files (including layouts and partials?) in html file?
Like this:
<!--Starting app/views/some_dir/some_file.html.erb-->
HTML here...
<!--Ending app/views/some_dir/some_file.html.erb-->
This way, my designer can find the file very easily.
Of course, this should be automatic and development environment only.
Thanks.
Sam
I use the Rails Footnotes gem (https://github.com/josevalim/rails-footnotes) in some of my projects which allows me to click a link in the footer of my app that opens the current view (also shows partials) in TextMate. Not sure if it could be customised to work with a Windows text editor but you could look at the URL to work out the file name.
I.e to open a file in MacVim, it creates the following link:
mvim://open?url=file:///Users/steveholt/Sites/foo/app/views/projects/log.html.haml
and for TextMate:
txmt://open?url=file:///Users/steveholt/Sites/foo/app/views/projects/log.html.haml