Most of the websites you visit look professional. They even have their own icon sized down to appear as part of the tabs you see across the top of your browser, with the name of the website to boot. The default for a Rails project doesn’t look so pretty.
If you don’t change anything, the default appearance is to see this in your browser:
Eww. That looks like we haven’t learned anything yet. We can do so much better.
Webpage Title
For starters, we need to name the page. The title should inform the user where they are. Navigate to app/views/layouts/application.html.erb. This file includes all the relevant HTML that sandwiches every other View. All HTML need to include a tag, for instance. Rails has created this file to save you from needing to insert a tag on every single View you create.
Look for the HTML tag, . If you are not using the gem, Bootstrap, you will see the name of your application, all run together. If you are using Bootstrap, you should see Starter Template for Bootstrap. Change it!
Webpage Favicon
The little picture that appears in the browser on the tab is called a “favicon.” This picture can also be used for bookmarks by the browser, and many other uses. The thing is, it has to be in .ico format, which means you will either need a program that can convert images to this format, or use a website that can do it for you. Fortunately, you can use this website to create a proper .ico file for free! The most commonly used favicon size is 16 pixels square.
Once you have your picture, make sure you put it in the right place. For Rails projects, it will be able to find this picture if you place it in your app/assets/images/ directory. Make sure to call it favicon.ico. You can easily rename the picture to favicon, but make sure you use something to convert the extension to .ico – just changing the extension by name doesn’t work.
Now, make sure you tell your embedded ruby code that you actually have a favicon. Again, in app/views/layouts/application.html.erb, you will be changing what is included within the tags. This time, add a new line (it doesn’t make a difference where this line is added, as long as you keep it in the header, but it makes sense to group it next to the tag). This new line will be using embedded ruby to add this tag: <%= favicon_link_tag %>
Now, check to see your beautiful work! Your tab should show the beautiful picture, along with your edited title.
Ryan Spittler 