- Read Tutorial
- Watch Guide Video
In this guide we are going to generate and then integrate a favicon. The favicon is the little icon you'll see right up here in the browser. You can see in pivotal tracker. They have their logo right here...
For us, we just have a plain document. I'd like to update that. We're going to use some different tools here. I have created a favicon that I'm going to use for my personal site. I also created one that you can use in case you don't want to use one that has my initials on it. Since that would be kind of weird. What I did is I went into Photoshop and I just created a completely square very basic looking image. For the one that I'm going to push up that you'll have access to. It'll just be some, ones and zeros which seemed like it'd be kind of cool. Because of the size, you really don't want to try to do too much here. A good rule of thumb with favicons is the more simple it can be the more basic. For my own I'm just going to have my initials and then for the one I'm pushing up. It'll be like you saw the ones and zeros. If you are doing this on your own and you've created your own PNG image or JPEG or anything like that then you can go to favicon-generator.org. This is going to be the tool that you can use to generate the favicon. The reason why you have to do this is because by default you can't just use any old image for your favicon. It has to be a very specific type. In fact, it has to be a favicon that ends in .ico. That is what we're going to do. I have saved my image on the desktop so I am going to say generate only 16 by 16 favicon. You can also do this to generate web, Android, iOS icons and things like that. I don't really think a lot of people are going to be saving my portfolio site to their iPhone home screens so I'm not going to worry about doing that. But you definitely can if you feel like it.
I'm going to click choose file, coming down, I'm going to click on binary. That's the name of the file I created, the one I showed you in Photoshop. If I hit create favicon it generated this for us and it also gave some Html. I'm not going to worry about this part of it because we are going to leverage some rails helpers to do this for us. Click on download the generated favicon. If I click open in finder, now I can drag it into my app. Inside of the app if you look in Sublime Text I created a new directory called favicons and I saved my personal one right here. I'm also going to push up the other one so that you have access to it if you prefer to use it over one you create yourself. I'm going to just say 'other_favicon'. Now we can drag this in so that you have access to it. How can we integrate this? Let's open up our application HTML file and I'm going to come up inside of the head tag. Let's just put it right above the style sheet call. I can put in some embedded Ruby here. Now I can just say, let's see what's the name of this method. If I remember correctly I believe it is just like the stylesheet one where it's going to be favicon and then link tag and then we have to pass in the path. Automatically it's going to look in the image directory. But remember we created favicons as a directory so I'm going to say favicons and then inside of this whatever the name is for this one I'm just going to say favicon.ico. I believe that is all I need to do. Let's test this out and see. Start up the rails server. This is only going to work in the application where you have to populate this on the blog and on the portfolio. One of the cool things is because we're using a custom favicon per layout. If you wanted to you could put a different favicon on each layout if you felt like it. Starting this up, coming to the site let's go home and we will see if this works or not. Look at that, we have our little favicon. Yours will obviously look a little bit different depending on which one you choose to use. But this is working. Let's come back and I'm going to populate this on our blog. Then also in our portfolio just so every one of them has access to it. Paste that in, hit save. If I hit refresh this is still working here. If I click on blog we have our favicon, click on portfolio. It is right there. This is all looking very nice so this is a little bit more of a professional look and feel and if you do something like put your initials up here. Then it's going to show that you know how to use favicon and to do some little neat things. When it comes to building a portfolio whether it's for freelance jobs or whether it's for an actual full-time job you're applying to. You never know what is going to push the potential hiring manager or a client over the edge. They may go up see your cool little favicon there and that may be the one little feature that pushed them over the edge where they have the trust that you can build the type of applications that they want you to work on. Anytime I can find little tiny tricks like that I like to implement them.
Let's see what we have here. We added favicons and we updated each of the layouts that's perfect git commit -m "Integrated favicons on all layouts". Like I said if you look at the source code in the resource section then you will see that I provided the other favicon that you can use if you do not want to generate your own. I think that 'one and zero' will be a cool little thing. Even though it's not your initials it will give you, definitely a better look and feel than the majority of other portfolios that most hiring managers are going to look at. Let's switch over to pivotal tracker. Click on favicon integration that is now done. Let's take a look at what we want to do next. One thing that I noticed, we're missing one pretty big one here. Not that it's going to take a lot of time just it's important to implement, is the portfolio image fix. As you may have noticed navigating through the site. Some of our portfolio thumbnail images are not rendering properly so we're gonna fix that. But we'll do that one in the next one because the largest set of items is going to be updating our about page. I am going to save those for right after we go and fix our image. I will see you in that guide when we attack the last item for our portfolio layout.