14.2 Favicons - Video Tutorials & Practice Problems

<v Michael>Now that we've got our custom fonts working,</v> we're going to add a little detail that we just can't resist, which is a favicon. We can get a sense of what that is by going to learnenough.com. You can see right here, this little thing that appears in the address bar is a favicon. <v Lee>Yeah, unfortunately, we're using Safari,</v> which doesn't show you them on the tabs but if you use Google Chrome, you can see the favicon is there all the time. It's an easy way to identify it. Hopefully Safari will change this some time soon that we actually can see those 'cause it really makes browsing through tabs quickly easier. <v Michael>Yeah.</v> <v Lee>Anyway, so we wanna add one of those</v> because it makes your site look better than having either nothing or a weird little blank icon like sometimes you see. <v Michael>Right, and it also shows up</v> in the bookmarks too. If we add this to favorites. <v Lee>It does, yeah.</v> <v Michael>Let's take a look at that.</v> Let's add it to Favorites and then if we go here, it shows up here in the menu. <v Lee>Right.</v> <v Michael>So let's add one of those to our current site.</v> And in fact, let's add this. I just wanna show what it looks like. So this is what it looks like without a favicon. It's just this generic little globe in this case. So in this section, we're gonna add a favicon and we'll also add another kind of icon that we'll get to as a special bonus for screencast watchers. So let's start with this. Now, the favicon used to be a weird format. I remember this, it was a file type called ICO. But nowadays, pretty much every browser supports the PNG format, the Portable Network Graphics format. <v Lee>Right. Yeah, I mean--</v> <v Michael>So it's a lot easier than it used to be</v> to make one of these things. (Lee chuckling) Yeah, and so the rule is that it needs to be square and some, was it a multiple of eight by eight? <v Lee>Exactly, right, yeah, so when it gets displayed,</v> most browsers display them at something like 16 pixels by 16 pixels, which is tiny. It's incredibly small. So you have to make sure that your design can be shrunk down to something like that and still be recognizable. <v Michael>So in this case,</v> we've already got a design and we're just going to download it to the local disk. So it's on the Learn Enough CDN. And it just lives here in this directory. In fact, take a look at this. If we look at this here, you can see the Jekyll is actually looking for favicon.ico. In fact, oh, it's also looking for apple-touch-icon. Oh, that's some foreshadowing for later in the section. So what we're gonna do here is just put it in the root directory 'cause that's where Jekyll is looking for it. You can see. So that means we can just curl it right from the Learn Enough CDN. And let's take a look at it. So this is what it looks like in its full resolution. <v Lee>Yeah, it's pretty big.</v> <v Michael>How big is it?</v> <v Lee>I think it's maybe 128 by 128.</v> It might be 144 by 144. I can't remember exactly what I made it. But it was pretty large so that it can be scaled down. <v Michael>So let's have it.</v> It has a size but not the resolution. <v Lee>You could always open it in the browser.</v> That'll tell us. <v Michael>Oh, let's do that.</v> I can just drag it, right? <v Lee>And then just get info about it</v> or inspect the element. <v Michael>Yeah.</v> <v Lee>You didn't click on the icon.</v> Come on, Michael, you've gotta get with it. There we go. So if you wanna see sizes, there you go, 144 right here. There you go, right here. Great, also down here in this little icon too. <v Michael>Nice, cool.</v> All right, well, I learned something there. (both chuckling) That's great. I got schooled by Lee. (Michael chuckling) <v Lee>Oh, you know what?</v> Hold on, let me, before we do this, let me set this back. Make sure it's... There we go. <v Michael>Okay.</v> <v Lee>So it's back on the rules</v> 'cause we wanna see the CSS rules that are applied to something. <v Michael>All right, in order to use that favicon</v> on our page, we need to link to it. I'll put that in the head here. <v Lee>Yep.</v> <v Michael>And we can just link right here</v> under the title. It really can go anywhere up in this head part. Favicon.png and its relationship is icon. And this is the kind of thing you just copy from somewhere. You don't have to memorize this. I wouldn't have remembered this offhand. So if we include it, let's take a look. If I refresh it, I'm actually curious to see if we've gotten rid of that error in the Jekyll server. Okay, it looks like that error may be gone. <v Lee>It's happy now.</v> <v Michael>And click around here.</v> So you might expect to see it here. Let's take a look, oh, look at that. It did appear. Cool. Now, sometimes it won't appear right away because of the way that browser caches work. So if you don't see the favicon, you can try clearing your browser cache or visiting the page using a browser you haven't hit the page with before. So this is one annoyance that you have to deal with with favicons. Sometimes it's quite hard to get the thing to refresh. But in this case, it just worked, which I'm kind of surprised by actually. (Lee chuckling) Let's add a bookmark. Oh actually no, we already added it, didn't we? So let's take a look. <v Lee>Oh yeah.</v> <v Michael>Oh, it's working, look at that.</v> It's really cool. I'm really surprised that it just works. It often does not. But you can see here the favicon has appeared, which is really cool. And we can also take a look at Chrome. And here we are. You can see right there in the tab it appears. That's great. All right, we mentioned a special bonus for screencast watchers and that is related to this. You Show Favorites here. And you can see that Learn Enough to be Dangerous has this nice icon here in the Favorites list but our sample site is just this generic icon. And I actually didn't know about this. This is something that Lee taught me as part of this tutorial, one of many things I learned. Its is called the Apple Touch Icon. Is that right, Lee? How does this work? <v Lee>It's just a larger icon</v> or larger than most favicons that is used for things like favorites and also if you add the site to a mobile device, like an iPhone. This would be the icon that would show up for that. <v Michael>Great.</v> <v Lee>Yeah.</v> <v Michael>So it's the same thing.</v> We just wanna load it to the current directory and as before, we've made one and put it up on the CDN. So it's called apple-touch-icon. It's so great that these are all just PNGs too. (Lee grunting in agreement) Got it, here it is. So it's basically the same design but just a different size, is that right? <v Lee>Right.</v> <v Michael>And let's take a look here.</v> <v Lee>Although technically, I think</v> we're actually using the exact same size for both. <v ->Really?</v> <v ->Yeah.</v> <v Michael>So we could have actually just</v> copied it probably. <v Lee>We could have but you know.</v> <v Michael>But in general, they can be different.</v> <v Lee>Right, exactly.</v> <v Michael>So we wanna...</v> So let's include that. And by which I mean to say link it. I keep saying include. I mean include it in our site but I'm not using the Jekyll include or anything like that. This is just a link. And it's the same thing, right? We just put it right in here, right? <v Lee>Exactly.</v> <v Michael>And probably is it the rel</v> is apple-touch-icon? <v Lee>That's right.</v> <v Michael>Okay.</v> So let's see if that works if I refresh it. Okay, so this is probably just some sort of caching issue. Or do I have to re-add it? I'm not clear on this. Let's clear it. <v Lee>You probably have to re-add it.</v> <v Michael>Let's take a look here.</v> Aha. <v ->There it is.</v> <v Michael>It looks like clearing the cache</v> actually did work. So it now associated it. Here is the Apple Touch Icon. So that looks great. <v Lee>Yeah.</v> <v Michael>A major improvement over just the generic icon.</v> <v Lee>Exactly.</v> <v Michael>Cool.</v> <v Lee>It seems like a little thing to add</v> but if you're gonna have people saving your site or bookmarking it, it's nice to have a little bit of branding there just so that things don't look cheap. <v Michael>Yeah, it's basically a way</v> of getting away from this generic appearance and making it custom branded for the site, similar in a sense to the font changes we made. But even more specialized to our particular site. <v Lee>Yeah, and you'd be surprised.</v> Even something as simple as... Even if it was just a square that was a single color, at least making it different from the default makes it so that your website is identifiable quickly and that's a good things. <v Michael>And it really looks a lot more professional.</v> <v Lee>Yeah.</v> <v Michael>Great.</v>