1 00:00:00,416 --> 00:00:04,558 [MUSIC] 2 00:00:04,558 --> 00:00:08,470 Well hey everybody, I'm Nick Pettit, @nickrp on Twitter. 3 00:00:08,470 --> 00:00:13,920 And today we are going to learn how to make a favicon, so let's get started. 4 00:00:13,920 --> 00:00:17,520 This is actually something that I blogged about recently in a 5 00:00:17,520 --> 00:00:22,600 post called How to Make a Favicon on the Treehouse blog. 6 00:00:22,600 --> 00:00:25,310 We're gonna talk about how to pronounce it. 7 00:00:25,310 --> 00:00:29,850 Some of the design challenges involved with making a very small 8 00:00:29,850 --> 00:00:33,190 image, as well as browser compatibility, how to 9 00:00:33,190 --> 00:00:37,930 deal with high resolution displays versus regular resolution displays, 10 00:00:37,930 --> 00:00:40,140 as well as how to deal with some of 11 00:00:40,140 --> 00:00:44,280 the difficulties when trying to refresh a favorite icon. 12 00:00:44,280 --> 00:00:46,350 So we're gonna get into all that. 13 00:00:46,350 --> 00:00:50,583 First up though, I wanna talk about design because favicons 14 00:00:50,583 --> 00:00:55,231 or favorite icons are literally smaller than a postage stamp which 15 00:00:55,231 --> 00:00:59,974 is usually used as a hyperbole to describe a low resolution image. 16 00:00:59,974 --> 00:01:01,875 They're even smaller than that. 17 00:01:01,875 --> 00:01:06,627 If you're not familiar, a favorite icon is the little icon that 18 00:01:06,627 --> 00:01:11,360 appears in browser tabs or in the address bar of your browser. 19 00:01:11,360 --> 00:01:16,000 So, in this blog post to have a couple of examples that are bit larger. 20 00:01:16,000 --> 00:01:19,160 So, you can see them. Here is Instragram, YouTube and Apple. 21 00:01:19,160 --> 00:01:20,340 So, they have these 22 00:01:20,340 --> 00:01:22,905 little favicons right here. 23 00:01:22,905 --> 00:01:25,850 There's also Wikipedia and a couple of 24 00:01:25,850 --> 00:01:29,260 other brands here that have favicons as well. 25 00:01:29,260 --> 00:01:33,870 Pretty much any professional website is going to have a favicon. 26 00:01:33,870 --> 00:01:38,230 Now, I mentioned there's some controversy in how to pronounce it. 27 00:01:38,230 --> 00:01:43,010 I've heard it said fav-ee-con, I've heard fave-icon, 28 00:01:43,010 --> 00:01:45,710 and I haven't really heard any kind of consensus. 29 00:01:45,710 --> 00:01:49,310 The most I've heard is favicons. So, that's what I say. 30 00:01:49,310 --> 00:01:52,330 I am sure there is many people that will tell me that I'm wrong. 31 00:01:52,330 --> 00:01:53,890 That's okay. 32 00:01:53,890 --> 00:01:56,140 But the pronunciation isn't really important. 33 00:01:56,140 --> 00:02:00,130 It's actually the technical details and design of 34 00:02:00,130 --> 00:02:02,840 favicons that can be a little bit tricky. 35 00:02:02,840 --> 00:02:05,950 Now, lets, let me show you why it's 36 00:02:05,950 --> 00:02:09,950 so difficult to design one of these small images. 37 00:02:09,950 --> 00:02:10,910 I'm going to go to 38 00:02:10,910 --> 00:02:15,720 Facebook brand er, let's see is it Facebook branding? 39 00:02:15,720 --> 00:02:23,040 I'm just gonna type it into Google. Yes, Facebookbrand.com and. 40 00:02:23,040 --> 00:02:26,170 This is Facebook's official brand resources, so 41 00:02:26,170 --> 00:02:29,300 you can download their logos, like buttons, 42 00:02:29,300 --> 00:02:33,916 all sorts of screen shots of their mobile apps and desktop apps, and so on. 43 00:02:33,916 --> 00:02:36,020 So, I'm gonna download their 44 00:02:36,020 --> 00:02:38,370 Facebook logo, because if you were making a 45 00:02:38,370 --> 00:02:42,870 small image like this, you might take your logo. 46 00:02:42,870 --> 00:02:45,580 And just resize it in PhotoShop. 47 00:02:45,580 --> 00:02:50,414 Right, so, I've downloaded this as a ZIP. Oops. 48 00:02:50,414 --> 00:02:54,660 There it is, and there's a couple of different file formats here. 49 00:02:54,660 --> 00:02:59,360 Here's a bunch of PNGs, so I'm going to take this high resolution one. 50 00:02:59,360 --> 00:03:01,925 And pop it into Photoshop. 51 00:03:01,925 --> 00:03:04,165 So there's what it looks like. 52 00:03:04,165 --> 00:03:07,750 Let's open up Photoshop and bring that in there. 53 00:03:07,750 --> 00:03:08,250 And, 54 00:03:10,980 --> 00:03:19,010 lets say that you were designing this logo and if it's time to make a favorite icon. 55 00:03:19,010 --> 00:03:22,330 Here's actually what it looks like at full resolution there. 56 00:03:22,330 --> 00:03:23,380 So, it's pretty high res. 57 00:03:24,440 --> 00:03:29,200 So, we're gonna resize it to a typical favicon size. 58 00:03:29,200 --> 00:03:36,050 Let's go to about 28, because I believe that's Facebooks favicon size. 59 00:03:37,080 --> 00:03:42,610 Now, if I zoom in here. You'll see all sorts of junk happening 60 00:03:42,610 --> 00:03:48,350 around this nice blue background and white F letter. 61 00:03:48,350 --> 00:03:53,100 You can see all sorts of pic, pixelation occurring that isn't really very good. 62 00:03:53,100 --> 00:03:57,840 It's, it's basically a situation where some of these pixels are kind 63 00:03:57,840 --> 00:04:02,422 of falling between two of these larger pixels when it gets resized and 64 00:04:02,422 --> 00:04:06,846 so it just takes this average and its ends up being a very blurry 65 00:04:06,846 --> 00:04:11,874 image. Now if we go over to Facebook and 66 00:04:11,874 --> 00:04:17,282 let's say we go to /favicon.icl and 67 00:04:17,282 --> 00:04:22,521 that's where a favicon is typically 68 00:04:22,521 --> 00:04:27,940 stored. So, if you go to /favicon.icl on 69 00:04:27,940 --> 00:04:31,620 any website. It's sort of a special file name that's 70 00:04:31,620 --> 00:04:37,390 treated similarly to index.html. It's just a default that, 71 00:04:37,390 --> 00:04:43,130 most servers will recognize we can grab Facebook's favicon here. 72 00:04:45,290 --> 00:04:47,840 Although I'm actually just gonna screenshot it, so you can 73 00:04:47,840 --> 00:04:49,810 see exactly what it looks like in the browser tab. 74 00:04:49,810 --> 00:04:53,390 I'm gonna take a little screenshot here, now let's go back 75 00:04:53,390 --> 00:04:58,110 to Photoshop and open that up and see what it looks like. 76 00:05:00,670 --> 00:05:03,410 So it should be on my desktop. There it is. 77 00:05:03,410 --> 00:05:09,010 Let's see if we can tear off these windows so we can compare this easily. 78 00:05:12,600 --> 00:05:17,570 So let me crop this, just so you can see what's going on here, and make a fair 79 00:05:17,570 --> 00:05:22,520 comparison. Here is the one we, we 80 00:05:22,520 --> 00:05:27,730 resized and here is what Facebook's actual Favicon looks like. 81 00:05:28,810 --> 00:05:34,830 So you'll notice that this actually looks very crisp and clean. 82 00:05:34,830 --> 00:05:38,380 They very intentionally made these white 83 00:05:38,380 --> 00:05:39,400 pixels here. 84 00:05:39,400 --> 00:05:42,550 The blue pixels here are very cleanly separated. 85 00:05:42,550 --> 00:05:44,330 You don't get all this kind of junk 86 00:05:44,330 --> 00:05:47,890 going on here where this a gradient between different 87 00:05:47,890 --> 00:05:50,090 colors of blues and whites and then they 88 00:05:50,090 --> 00:05:54,510 also added a pixel perfect shadow just below that. 89 00:05:55,650 --> 00:06:00,500 So, one trick when you are designing a favorite icon. 90 00:06:00,500 --> 00:06:04,080 Is to not actually resize it but instead 91 00:06:04,080 --> 00:06:10,030 try to draw it, pixel by pixel if you want the best results. 92 00:06:10,030 --> 00:06:12,010 However, that can be a little bit 93 00:06:12,010 --> 00:06:15,390 overwhelming if you have never done that before. 94 00:06:15,390 --> 00:06:19,000 So, one other trick, if you do just wanna resize your 95 00:06:19,000 --> 00:06:25,320 logo is to change the way that the image is resampled. 96 00:06:25,320 --> 00:06:29,440 So, in most image editing programs like Photoshop, you can 97 00:06:29,440 --> 00:06:34,950 adjust the image sampling. So, if I were to resize this, say 32 by 98 00:06:34,950 --> 00:06:40,230 32, and we resampled using the Nearest Neighbor 99 00:06:40,230 --> 00:06:45,330 algorithm instead of the Bicubic, we'll get slightly different results. 100 00:06:45,330 --> 00:06:50,290 So let me zoom in so you can see what this looks like. 101 00:06:52,230 --> 00:06:52,850 And here, 102 00:06:54,560 --> 00:06:57,110 we don't get any of that blurry stuff happening, we 103 00:06:57,110 --> 00:07:01,750 get very crisp and clean separation between the two different colors. 104 00:07:01,750 --> 00:07:04,940 Now, this won't look perfect as a favorite icon. 105 00:07:04,940 --> 00:07:09,940 You will still need to do some pixel by pixel editing but it 106 00:07:09,940 --> 00:07:14,710 will get you much closer to a final result that looks like this. 107 00:07:14,710 --> 00:07:17,650 So, if you need a really solid starting point, 108 00:07:17,650 --> 00:07:19,560 that's a great way to do it and then 109 00:07:19,560 --> 00:07:22,650 you can go ahead and edit using the Pencil 110 00:07:22,650 --> 00:07:27,120 tool in Photoshop to make pixel by pixel adjustments. 111 00:07:27,120 --> 00:07:29,090 So let me see if I can do that right now. 112 00:07:29,090 --> 00:07:31,220 So you can just click with the pencil tool 113 00:07:31,220 --> 00:07:35,010 just like that to edit one pixel at a time. 114 00:07:35,010 --> 00:07:40,310 And you'd be surprised it actually doesn't take you as long as you'd think. 115 00:07:40,310 --> 00:07:43,225 Because the image resolution is so low. 116 00:07:43,225 --> 00:07:44,720 There's actually not that many pixels 117 00:07:44,720 --> 00:07:48,390 here for you to even edit. So, you can do it pretty quickly. 118 00:07:48,390 --> 00:07:51,420 It is still a bit tedious but it's not terrible. 119 00:07:52,440 --> 00:07:56,910 So, on a larger note, when you're designs favicons, you 120 00:07:56,910 --> 00:08:01,260 wanna make sure that they are representation of your brand. 121 00:08:01,260 --> 00:08:04,600 It's not always best to just go with your logo 122 00:08:04,600 --> 00:08:08,130 because your logo might not look good at small sizes. 123 00:08:08,130 --> 00:08:09,930 It might not be a square 124 00:08:09,930 --> 00:08:14,670 enough image to look good as a square favicon. 125 00:08:14,670 --> 00:08:20,040 And some tricks that different brands use, is to use maybe their logo 126 00:08:20,040 --> 00:08:25,000 mark or a single letter that strongly represents their brand. 127 00:08:25,000 --> 00:08:29,150 So if I go back to that blog post and we look at these examples here. 128 00:08:29,150 --> 00:08:34,230 You can see, Instagram actually just uses the Instagram logo. 129 00:08:34,230 --> 00:08:35,350 Although there's 130 00:08:35,350 --> 00:08:36,350 no text with it. 131 00:08:36,350 --> 00:08:41,420 They don't have that scripty Instagram logo text with it. 132 00:08:41,420 --> 00:08:43,330 Apple is a really solid example. 133 00:08:43,330 --> 00:08:48,190 They have the Apple logo which is recognized worldwide. 134 00:08:48,190 --> 00:08:52,410 It's really meant to be put absolutely everywhere. 135 00:08:52,410 --> 00:08:54,430 So they've done a really great job of making 136 00:08:54,430 --> 00:08:58,230 a logo that also works as a favorite icon. 137 00:08:58,230 --> 00:09:00,695 However, if you look at some other brands here 138 00:09:00,695 --> 00:09:03,580 YouTube is another example, but also Wikipedia, 139 00:09:03,580 --> 00:09:08,210 Disney Google, and to some degree, even Facebook, 140 00:09:08,210 --> 00:09:11,540 they don't really have a logo that necessarily 141 00:09:11,540 --> 00:09:15,120 worked perfectly as a small square favorite icon. 142 00:09:15,120 --> 00:09:20,030 So they've done an approximation that is representative of their brand. 143 00:09:20,030 --> 00:09:26,180 So for example, Disney has their trademark D here, which isn't 144 00:09:26,180 --> 00:09:29,130 their full logo, but it's recognizable enough 145 00:09:29,130 --> 00:09:30,710 that the people will know what it is. 146 00:09:30,710 --> 00:09:31,730 Same with Wikipedia. 147 00:09:31,730 --> 00:09:36,000 They have this very unique W here as well as Google. 148 00:09:36,000 --> 00:09:40,840 They have, you know, this g here with the blue Google color. 149 00:09:40,840 --> 00:09:45,140 So if you can't make your logo work perfectly you can 150 00:09:45,140 --> 00:09:49,630 use a logo mark which is a close approximation of your logo. 151 00:09:49,630 --> 00:09:51,250 Another tip is not to use 152 00:09:51,250 --> 00:09:54,280 any kind of text because at these sizes, although may seem 153 00:09:54,280 --> 00:09:59,930 obvious, it is worth mentioning, text is not going to look good. 154 00:09:59,930 --> 00:10:04,214 Now, when you're designing in Photoshop, you wanna start 155 00:10:04,214 --> 00:10:07,420 with the largest size and work your way down. 156 00:10:07,420 --> 00:10:13,610 So, it depends what types of platforms you're trying to support, 157 00:10:13,610 --> 00:10:16,370 but in most cases if you're just trying to make a 158 00:10:16,370 --> 00:10:21,550 favorite icon you can go with 64 by 64 and 159 00:10:21,550 --> 00:10:26,060 then work your way down. So once you have a good 64 by 64 version 160 00:10:26,060 --> 00:10:31,310 of your logo You can then make a 32 by 32, a 16 by 16, and a 161 00:10:31,310 --> 00:10:36,160 few other square sizes. So, what are those 162 00:10:36,160 --> 00:10:41,310 square sizes exactly? Well I want to show you something called 163 00:10:41,310 --> 00:10:46,540 the Favicon-Cheat-Sheet. 164 00:10:46,540 --> 00:10:52,400 This is a page on GitHub that has all sorts of great information 165 00:10:52,400 --> 00:10:57,710 about how to design good favorite icons. Now, 166 00:10:57,710 --> 00:11:03,228 one thing you'll notice right off the bat is that there is an ICO file format. 167 00:11:03,228 --> 00:11:07,600 We'll get into how to export files using the ICO format 168 00:11:07,600 --> 00:11:11,940 in just a little bit here but typically you can use 169 00:11:11,940 --> 00:11:18,740 a .png to create the ICO file. Now, lets get back to image dimensions. 170 00:11:18,740 --> 00:11:24,310 You'll need 16 by 16 and 32 by 32 at the very least. 171 00:11:24,310 --> 00:11:29,770 This is the minimum that you can create for a favorite icon and get away with it. 172 00:11:29,770 --> 00:11:33,620 This is the default required by Internet Explorer. 173 00:11:33,620 --> 00:11:37,670 And if you use a PNG in addition to ICO, Chrome 174 00:11:37,670 --> 00:11:41,960 and Safari may pick the ICO over the PNG. 175 00:11:41,960 --> 00:11:46,100 So it's almost always best to actually just go with an ICO. 176 00:11:46,100 --> 00:11:48,310 Again, we'll talk about how to export that. 177 00:11:48,310 --> 00:11:51,630 But if you look at these different sizes 178 00:11:51,630 --> 00:11:55,270 here, if you're very obsessive you can create all 179 00:11:55,270 --> 00:11:59,100 sorts of different favorite icon sizes ranging from 32 180 00:11:59,100 --> 00:12:01,770 by 32 all the way up to 228 square. 181 00:12:03,260 --> 00:12:04,260 So what are these? 182 00:12:04,260 --> 00:12:08,890 Well, the first one is just kind of a basic 183 00:12:08,890 --> 00:12:12,300 size that's gonna work on a lot of different browsers. 184 00:12:12,300 --> 00:12:15,340 If you want to support iPad and other 185 00:12:15,340 --> 00:12:20,622 iOS devices such iPod touches, iPhones and so on. 186 00:12:20,622 --> 00:12:25,510 You, you're gonna wanna create a few additional sizes here. 187 00:12:25,510 --> 00:12:28,820 Now, if you put these in the favorite icon file. 188 00:12:28,820 --> 00:12:30,600 They may not necessarily come up. 189 00:12:30,600 --> 00:12:36,020 You're probably going to need to use additional markup, which you can find here 190 00:12:36,020 --> 00:12:41,130 where you use the rel attribute in your HTML to say, you know, 191 00:12:41,130 --> 00:12:46,490 that this is a touch icon and you want that to be on Apple devices. 192 00:12:46,490 --> 00:12:48,450 We're not gonna get into that, I'm actually going to make the 193 00:12:48,450 --> 00:12:54,940 distinction between those touch icons and what is typically known as a favicon 194 00:12:54,940 --> 00:12:59,650 because we're just gonna talk about favicons in the browser. 195 00:12:59,650 --> 00:13:02,710 However, that's something to keep in mind, if you do want to 196 00:13:02,710 --> 00:13:06,310 create those touch icons, this is a good opportunity to do that. 197 00:13:06,310 --> 00:13:09,390 You can make them at those larger sizes if you choose. 198 00:13:09,390 --> 00:13:11,670 Just be sure to start with the largest size 199 00:13:11,670 --> 00:13:14,590 that you wanna support and work your way down. 200 00:13:14,590 --> 00:13:18,348 A couple of these others are for iPhone at retina sizes. 201 00:13:18,348 --> 00:13:20,120 Of course, there's probably not too many 202 00:13:20,120 --> 00:13:23,080 iPhones out there that are not retina anymore. 203 00:13:23,080 --> 00:13:28,420 So, it's best to go with this larger size if you wanna support that. 204 00:13:28,420 --> 00:13:35,940 There's stuff for the Chrome Web Store, IE10 Metro Tiles Opera and so on. 205 00:13:35,940 --> 00:13:38,900 So you can get pretty in depth with this. 206 00:13:38,900 --> 00:13:43,230 However, we're just going to create an ICO File. 207 00:13:43,230 --> 00:13:45,640 So, there's a few sizes 208 00:13:45,640 --> 00:13:46,760 that we wanna support. 209 00:13:47,870 --> 00:13:53,850 Today, we're gonna do a 16 by 16, 32 by 32, and 64 by 64, but there's a 210 00:13:53,850 --> 00:13:56,380 few other sizes that you may wanna support if 211 00:13:56,380 --> 00:14:00,890 you wanna do Windows site icons or IE9 pinned sites. 212 00:14:00,890 --> 00:14:06,200 You can do 48 by 48, and 24 by 24, in addition. 213 00:14:06,200 --> 00:14:11,090 So this cheat sheet is super handy but basically covers 214 00:14:11,090 --> 00:14:12,958 cross browser compatibility. 215 00:14:12,958 --> 00:14:16,440 So, if you're wondering about how to make a favorite icon that's gonna 216 00:14:16,440 --> 00:14:20,480 work across a lot of browsers, this is a great place to look. 217 00:14:20,480 --> 00:14:23,280 One other tip is that you actually don't 218 00:14:23,280 --> 00:14:26,780 want to mention your favorite icon in HTML. 219 00:14:26,780 --> 00:14:28,260 You'll see this on a lot of websites. 220 00:14:28,260 --> 00:14:35,870 They'll use a HTML tag, I believe it's link, to reference the favorite icon, 221 00:14:35,870 --> 00:14:39,480 but it's actually better to just not reference it at all and 222 00:14:39,480 --> 00:14:44,520 just put it /favicon.ico and that will work all the way back 223 00:14:44,520 --> 00:14:48,720 to Internet Explorer 6 and I think there is only like, one 224 00:14:48,720 --> 00:14:52,710 really obscure browser that's really old that that's not gonna work in. 225 00:14:52,710 --> 00:14:54,990 It's mentioned in the cheat sheet well. 226 00:14:54,990 --> 00:15:00,930 So, just go with favicon.ico if you want the broadest support and you wanna do 227 00:15:00,930 --> 00:15:02,930 the simplest thing possible. 228 00:15:02,930 --> 00:15:07,455 Obviously, you can get more in-depth with that and use ICO and PNG files. 229 00:15:07,455 --> 00:15:12,200 If you want to, but most of the time it's really not worth it 230 00:15:12,200 --> 00:15:15,880 unless you have a very specific audience that you know you want to target. 231 00:15:15,880 --> 00:15:21,060 Whether that's in, you know, older versions Internet Explorer or 232 00:15:21,060 --> 00:15:26,408 particular mobile devices and so on. So we're just going to make a fit, 233 00:15:26,408 --> 00:15:31,990 a favicon.ico. So, let's look at some tools that will 234 00:15:31,990 --> 00:15:41,260 allow us to do that. I'm going to go to xiconeditor.com. 235 00:15:41,260 --> 00:15:47,749 And here you'll see this wonderful editor that allows you to upload your imagery. 236 00:15:47,749 --> 00:15:51,815 And then you can place them into these various 237 00:15:51,815 --> 00:15:55,274 sizes so 64, 32, 24 and 16. 238 00:15:55,274 --> 00:16:00,850 And then you can export it, so let's see what that looks like. 239 00:16:00,850 --> 00:16:04,950 Let's grab another file. So let's actually go to 240 00:16:06,070 --> 00:16:11,760 Treehouse, and see if we can take this Mike the frog image. 241 00:16:11,760 --> 00:16:15,090 Actually I'm gonna go. I take that back. 242 00:16:15,090 --> 00:16:16,660 I'm gonna go someplace else. 243 00:16:16,660 --> 00:16:19,140 Let's go to Facebook and 244 00:16:21,300 --> 00:16:30,800 let's see if we can grab their favicon. So I'm gonna save this out, to my desktop. 245 00:16:32,180 --> 00:16:34,800 And there should be multiple sizes in here. 246 00:16:34,800 --> 00:16:37,510 If there's not, we can try something else. 247 00:16:37,510 --> 00:16:38,210 Oh, yup. 248 00:16:38,210 --> 00:16:40,430 It doesn't look like there's multiple sizes. 249 00:16:40,430 --> 00:16:49,117 So let's try Apple. And let's go to favicon.ico, 250 00:16:49,117 --> 00:16:53,164 there we go. Let's try that one out. 251 00:16:53,164 --> 00:17:00,132 [BLANK_AUDIO] 252 00:17:00,132 --> 00:17:00,613 Hm. 253 00:17:00,613 --> 00:17:04,730 Doesn't look like they have 64 by 64 supported either. 254 00:17:06,040 --> 00:17:10,595 well, instead of doing this and importing an ICO. 255 00:17:10,595 --> 00:17:14,470 Let's do what we would normally do and let's go 256 00:17:14,470 --> 00:17:19,307 into Photoshop and make our own favicon real quick here. 257 00:17:19,307 --> 00:17:24,415 So, I'm gonna create a new file and I'll make it at 64 by 64. 258 00:17:26,240 --> 00:17:30,040 I'm gonna zoom in so I can see the pixels here. 259 00:17:30,040 --> 00:17:30,970 Can I see them? 260 00:17:30,970 --> 00:17:33,520 No not quite. That's okay. 261 00:17:35,640 --> 00:17:37,350 I'm gonna make a few shapes here and 262 00:17:40,240 --> 00:17:48,060 let's say we wanted to make a favicon that was just a plus button here. 263 00:17:50,180 --> 00:17:56,890 So, we'll drag this out. This isn't gonna be perfect, I apologize. 264 00:17:56,890 --> 00:17:57,480 There we go. 265 00:17:58,840 --> 00:18:04,620 So, duplicate that layer and rotate it here. 266 00:18:05,920 --> 00:18:06,530 There we go. 267 00:18:07,580 --> 00:18:11,470 So that's our favicon and obviously it's really simple and we want 268 00:18:11,470 --> 00:18:15,800 it to be pixel perfect so I went with a very simple shape. 269 00:18:15,800 --> 00:18:18,800 So, we're gonna use the save for web feature. 270 00:18:20,470 --> 00:18:24,525 If you go up to File and go to Save for Web. 271 00:18:24,525 --> 00:18:31,560 It'll bring up this dialog box and you can save it as a PNG 24-bit file. 272 00:18:31,560 --> 00:18:37,050 So, let's do that and we'll save our 24 version. 273 00:18:38,180 --> 00:18:41,249 So, I'll this favicon or I'm sorry 274 00:18:41,249 --> 00:18:44,500 our 64 version. Favicon64. 275 00:18:46,650 --> 00:18:50,420 Now we need to re-size this and again 276 00:18:50,420 --> 00:18:54,000 I'm gonna use Nearest Neighbor instead of Bicubic. 277 00:18:54,000 --> 00:18:56,100 So let's do 32 by 32. 278 00:18:56,100 --> 00:19:00,460 There we go and you can see how this re-sized. 279 00:19:00,460 --> 00:19:02,050 It's still pixel perfect. 280 00:19:02,050 --> 00:19:03,720 I'm actually gonna undo that. 281 00:19:05,410 --> 00:19:06,740 Just so you can see what it would look 282 00:19:06,740 --> 00:19:10,960 like if I used a different image sampling algorithm. 283 00:19:10,960 --> 00:19:11,860 Let's do 32 284 00:19:11,860 --> 00:19:12,430 by 32. 285 00:19:12,430 --> 00:19:17,090 Mh, it's a little hard to tell, but even at 286 00:19:17,090 --> 00:19:21,170 the edges here, you can see that it's not quite pixel-perfect. 287 00:19:21,170 --> 00:19:23,650 It's, there's already some blending happening. 288 00:19:23,650 --> 00:19:25,360 If I were to make this even smaller, I 289 00:19:25,360 --> 00:19:29,080 would imagine that additional blending would happening Would be happening 290 00:19:29,080 --> 00:19:33,890 along the green and white areas so, let's go ahead 291 00:19:33,890 --> 00:19:37,430 and do what we were doing before, using Nearest Neighbor. 292 00:19:38,820 --> 00:19:41,440 Make the 32 size. Save that out. 293 00:19:41,440 --> 00:19:49,350 By the way, the hotkeys I used to do that are Cmd+option+shift+S on a Mac. 294 00:19:49,350 --> 00:19:52,190 Don't know what the Windows hotkeys are off the top of my head, but if you just go 295 00:19:52,190 --> 00:19:57,070 to file, and save for web, you'll be able to see the ho keys right next to it. 296 00:19:57,070 --> 00:19:59,020 So, let's save that for web. 297 00:19:59,020 --> 00:20:02,530 Again, it's not perfect, you can actually see that it's slightly off center. 298 00:20:02,530 --> 00:20:03,870 I'm going to pretend that's 299 00:20:03,870 --> 00:20:09,110 part of our branding for some reason or another so lets save that out. 300 00:20:09,110 --> 00:20:15,060 We'll say favicon32, and let's do a 24 301 00:20:15,060 --> 00:20:18,710 version because I believe, yes, X-Icon Editor supports that. 302 00:20:18,710 --> 00:20:20,910 Now while I am doing this one other thing I 303 00:20:20,910 --> 00:20:24,185 want to mention is you don't have to use X-Icon Editor. 304 00:20:24,185 --> 00:20:29,770 There's a number of those different tools that will help you create those ICO files. 305 00:20:29,770 --> 00:20:34,315 In fact, I think while back, there used to be a Photoshop plugin that would do it. 306 00:20:34,315 --> 00:20:38,030 I'm not sure if that's still available or if it's free or what. 307 00:20:38,030 --> 00:20:40,280 But that might be something to look into. 308 00:20:40,280 --> 00:20:44,030 There's also realfavicongenerator.net. 309 00:20:44,030 --> 00:20:49,200 So, that is a good resource as well that can help you generate these. 310 00:20:49,200 --> 00:20:51,610 So just look around. Use the one that you like. 311 00:20:51,610 --> 00:20:54,020 You don't have to use the one that I'm using. 312 00:20:54,020 --> 00:20:55,880 It's perfectly fine. 313 00:20:55,880 --> 00:21:00,080 So, now I've got all of our various sizes 314 00:21:00,080 --> 00:21:03,813 here 64, 32, 24, and 16. 315 00:21:03,813 --> 00:21:07,551 I'm gonna go back to X-Icon Editor and I'm gonna 316 00:21:07,551 --> 00:21:11,638 import these images. Now, I can import these one at a time. 317 00:21:11,638 --> 00:21:20,880 So, let's say I wanna do my 64 one first. And, I have this image 318 00:21:20,880 --> 00:21:26,590 here and I'm gonna say, I just want this to be my 64 version. 319 00:21:26,590 --> 00:21:30,300 So I'll hit OK, and bam, now, it's 64. 320 00:21:30,300 --> 00:21:33,910 Now I can do this for the other sizes. So here's 16. 321 00:21:33,910 --> 00:21:36,480 I probably should go in order here, but that's okay. 322 00:21:36,480 --> 00:21:39,160 It doesn't matter. 323 00:21:39,160 --> 00:21:41,220 And let's grab our 24. There 324 00:21:43,960 --> 00:21:51,902 we go. And then finally, I'll get my 32 size. 325 00:21:51,902 --> 00:21:53,315 There we go. 326 00:21:53,315 --> 00:21:55,910 Now, like I said, it is slightly off center. 327 00:21:55,910 --> 00:21:58,960 Please excuse my rushed icon here. 328 00:21:58,960 --> 00:22:02,220 You spend a little bit more time designing it than I did. 329 00:22:02,220 --> 00:22:07,880 Now looking at these different sizes, it looks like, look at that. 330 00:22:07,880 --> 00:22:09,310 We have a slight problem 331 00:22:09,310 --> 00:22:10,670 with the 24 version. 332 00:22:10,670 --> 00:22:13,250 And, my guess would be, I didn't use 333 00:22:13,250 --> 00:22:16,690 Nearest Neighbor resampling there, I probably used Bicubic. 334 00:22:16,690 --> 00:22:21,620 So, let's go back, and see if we can undo the damage there. 335 00:22:21,620 --> 00:22:28,480 So, image size, see, 24, Nearest Neighbor. See if that gives us a 336 00:22:28,480 --> 00:22:34,481 better result, yes, looks like it does. So favicon 337 00:22:34,481 --> 00:22:40,071 24, place it. Let's go back, import, 338 00:22:40,071 --> 00:22:46,760 upload, favicon 24, and check off 24 there. 339 00:22:46,760 --> 00:22:48,730 See if that fixed it. Yes, it did. 340 00:22:48,730 --> 00:22:51,920 Okay. So that's probably what happened there. 341 00:22:51,920 --> 00:22:54,910 So now we have all my different image sizes and as I click around on 342 00:22:54,910 --> 00:22:57,320 these you can see X-Icon Editor actually gives 343 00:22:57,320 --> 00:23:00,160 me, you guessed it, a pixel editor here. 344 00:23:00,160 --> 00:23:03,040 Hence the name X-Icon Editor. 345 00:23:03,040 --> 00:23:06,470 So there's a couple of tools up here that are similar to Photoshop. 346 00:23:06,470 --> 00:23:10,520 I can click the pencil icon here, and start editing. 347 00:23:10,520 --> 00:23:11,960 I'm not gonna do that. 348 00:23:11,960 --> 00:23:14,230 If you don't have PhotoShop, this could be 349 00:23:14,230 --> 00:23:17,650 one way that you could actually make a favicon. 350 00:23:17,650 --> 00:23:20,640 I think that's kind of crazy to try and do. 351 00:23:20,640 --> 00:23:25,414 So avoid that if you can. It's best to do this in a more robust tool 352 00:23:25,414 --> 00:23:31,050 like Photoshop. So, now we have all of our image here, 353 00:23:31,050 --> 00:23:38,690 images here, we can say export, and it says your icon has been created correctly. 354 00:23:38,690 --> 00:23:39,470 So that's pretty cool. 355 00:23:39,470 --> 00:23:42,440 And now we can export our icon. 356 00:23:42,440 --> 00:23:46,867 And now we have this nice little favicon.ico. 357 00:23:46,867 --> 00:23:48,545 If I can show this in the finder, 358 00:23:48,545 --> 00:23:55,830 nd you know, I wonder, if I just open this up in the browser. 359 00:23:56,920 --> 00:24:00,020 I bet it will show up in the upper right. Not quite. 360 00:24:00,020 --> 00:24:06,050 So, looks like, I am gonna actually have to bring this into a webpage. 361 00:24:07,690 --> 00:24:13,635 So, I am gonna open up Sublime Text 362 00:24:13,635 --> 00:24:20,860 here and just gonna take my favicon here. 363 00:24:20,860 --> 00:24:23,120 Actually, I am just gonna save this actually, real quick. 364 00:24:25,340 --> 00:24:31,650 So, lets make a new folder, .website. And inside I'm gonna say index.html. 365 00:24:31,650 --> 00:24:33,930 I'm not actually gonna put any HTML in here. 366 00:24:33,930 --> 00:24:40,720 At least not yet. And, then we can move our favicon 367 00:24:44,970 --> 00:24:49,740 over to our website folder. Let me do that real quick. 368 00:24:51,200 --> 00:24:52,160 It's a website. 369 00:24:54,940 --> 00:25:00,270 Now let's see if that did it. Hm, not quite 370 00:25:00,270 --> 00:25:05,900 there's probably something else I need to do there. 371 00:25:09,060 --> 00:25:09,560 Well, 372 00:25:12,150 --> 00:25:17,960 one thing I do know is that Treehouse actually does have the favicon referenced 373 00:25:17,960 --> 00:25:23,920 in their HTML. So, let me grab this here 374 00:25:26,280 --> 00:25:32,220 and let's see if I put that into index.html if that will bring it up. 375 00:25:33,900 --> 00:25:37,460 The browser should be fairly forgiving here so I 376 00:25:37,460 --> 00:25:41,190 actually should be able to see this, just fine. 377 00:25:41,190 --> 00:25:42,440 A-ha. 378 00:25:42,440 --> 00:25:43,820 There we go. 379 00:25:43,820 --> 00:25:46,280 So, you'll notice I didn't actually have to put any other 380 00:25:46,280 --> 00:25:52,040 markup there, just putting the link to the favicon was enough. 381 00:25:52,040 --> 00:25:57,840 So now it's displaying. Right here in our browser tab. 382 00:25:57,840 --> 00:26:02,940 Now something that you might run into when you're creating favicons is 383 00:26:02,940 --> 00:26:08,040 difficulty in refreshing them, this is a difficult error to reproduce 384 00:26:08,040 --> 00:26:12,996 if it refreshes just fine, but I'm gonna try to reproduce it here. 385 00:26:12,996 --> 00:26:17,969 So, I am going to make some, some markings here. 386 00:26:17,969 --> 00:26:22,269 Just so we can see that this is a 387 00:26:22,269 --> 00:26:27,109 different favicon. I am just gonna X-Icon 388 00:26:27,109 --> 00:26:32,060 Editor to mark these up and now, I am going to export this again. 389 00:26:32,060 --> 00:26:38,940 But now, I have another favicon.ico. 390 00:26:38,940 --> 00:26:43,520 So if I drop that and 391 00:26:43,520 --> 00:26:46,375 replace the file, then I go back to 392 00:26:46,375 --> 00:26:49,950 index.html and try to refresh, oh look at that. 393 00:26:49,950 --> 00:26:51,740 It actually worked perfectly. 394 00:26:51,740 --> 00:26:54,070 So, [LAUGH] this is actually a bad example. 395 00:26:54,070 --> 00:26:56,920 However, a lot of times when you're developing websites 396 00:26:56,920 --> 00:27:02,220 you'll find that it's very difficult to refresh the favicon. 397 00:27:02,220 --> 00:27:05,080 It will just stay with whatever your favicon 398 00:27:05,080 --> 00:27:09,090 was previously and for whatever we, weird reason 399 00:27:09,090 --> 00:27:15,060 the browser will just hold onto it and it will cache it very, enthusiastically. 400 00:27:15,060 --> 00:27:17,990 So, a way to break that cycle and make 401 00:27:17,990 --> 00:27:21,140 the browser think that it's actually a new file. 402 00:27:21,140 --> 00:27:25,990 Is to add a queried parameter to your favicon. 403 00:27:25,990 --> 00:27:29,530 So, if we go back to Sublime Text here, 404 00:27:29,530 --> 00:27:32,360 you'll notice that I actually added this into the HTML. 405 00:27:32,360 --> 00:27:35,410 Normally, you wouldn't want this there. 406 00:27:35,410 --> 00:27:40,720 For best compatibility and, you know something that'll work 407 00:27:40,720 --> 00:27:44,250 on many browsers, you don't wanna have this here. 408 00:27:44,250 --> 00:27:49,750 You have to have a pretty specific reason to be using a PNG and other various files. 409 00:27:49,750 --> 00:27:55,310 However, if you're trying to refresh it, you can add this 410 00:27:55,310 --> 00:28:00,780 line to your HTML and then add a query string just like this. 411 00:28:00,780 --> 00:28:07,460 And you can put V for version and equal sign and then a number. 412 00:28:07,460 --> 00:28:09,610 So maybe this is version two. 413 00:28:09,610 --> 00:28:13,840 Or it's the third time I've tried this and so on. 414 00:28:13,840 --> 00:28:17,850 Now, this query parameter, by the way, could actually be anything. 415 00:28:17,850 --> 00:28:21,630 I could put any text there and I could put any number there and the 416 00:28:21,630 --> 00:28:26,080 browser is gonna think oh, here is a new variable, here is the new value for 417 00:28:26,080 --> 00:28:29,300 it but just doing this version is an easy 418 00:28:29,300 --> 00:28:32,040 way to understand in your markup what's going on. 419 00:28:32,040 --> 00:28:36,260 In case you accidentally leave that in for some reason. 420 00:28:36,260 --> 00:28:39,430 So, if you need to refresh your favorite icon 421 00:28:39,430 --> 00:28:43,470 during development, you can say version equals and then a 422 00:28:43,470 --> 00:28:46,930 number, and when you go back to the browser and 423 00:28:46,930 --> 00:28:51,110 upload that new HTML file and refresh it, you should 424 00:28:51,110 --> 00:28:56,340 see your new favorite icon up there. So, 425 00:28:57,390 --> 00:29:01,720 there's one other thing that I do want to touch on, then go back to 426 00:29:01,720 --> 00:29:06,300 this favorite icon cheat sheet. You can see down here 427 00:29:08,030 --> 00:29:12,440 there's a way to do, create hm, 428 00:29:12,440 --> 00:29:16,310 actually I think that's in my blog post. So there's way to 429 00:29:16,310 --> 00:29:22,230 make dynamic favicons. And we actually have a good example here. 430 00:29:23,850 --> 00:29:29,520 With Treehouse, we change the favicon if you have a new notification. 431 00:29:29,520 --> 00:29:31,050 So I have a notification right here. 432 00:29:32,140 --> 00:29:35,410 And even without looking at that browser tab, I 433 00:29:35,410 --> 00:29:38,350 can see, oh, there's a little number one there. 434 00:29:38,350 --> 00:29:40,980 And that will tell me that I have a notification. 435 00:29:42,380 --> 00:29:44,130 There's a couple different ways to do this. 436 00:29:44,130 --> 00:29:48,940 But one way is to use favicon.js. 437 00:29:48,940 --> 00:29:54,060 So there's a link to this. And it is a GitHub project. 438 00:29:54,060 --> 00:29:55,000 Hopefully it comes up here. 439 00:29:56,260 --> 00:29:58,930 And you can see what it looks like and 440 00:29:58,930 --> 00:30:02,470 I can actually increase or decrease the number here. 441 00:30:02,470 --> 00:30:06,880 So, if you look up right here at this little tiny area. 442 00:30:06,880 --> 00:30:07,480 I am not sure 443 00:30:07,480 --> 00:30:08,960 if that's showing up. 444 00:30:08,960 --> 00:30:14,170 You can increase it or decrease it and it will change the number right there. 445 00:30:14,170 --> 00:30:15,950 You can see a much larger version here. 446 00:30:15,950 --> 00:30:17,980 So, that's basically what showing up there. 447 00:30:17,980 --> 00:30:19,390 And just look here. 448 00:30:19,390 --> 00:30:24,600 That's what the favicon looks like. That's a little bit more advanced. 449 00:30:24,600 --> 00:30:26,750 You don't have to do something like that. 450 00:30:26,750 --> 00:30:28,630 You should really only do it if your application 451 00:30:28,630 --> 00:30:33,580 has some kind of notifications or similar construct involved. 452 00:30:33,580 --> 00:30:38,100 And you should also be aware that it's not perfect yet. 453 00:30:38,100 --> 00:30:43,270 There's a couple of issues here, particularly, it doesn't work very well in 454 00:30:43,270 --> 00:30:49,150 Safari or Internet Explorer, so that could be a big holdback for a couple of people. 455 00:30:51,570 --> 00:30:53,240 So that's pretty much it. 456 00:30:53,240 --> 00:30:55,900 At this point, I think we're ready to take some 457 00:30:55,900 --> 00:30:59,360 questions, so hopefully, have some good questions lined up for me. 458 00:30:59,360 --> 00:31:01,780 I hope you guys learned a lot. 459 00:31:01,780 --> 00:31:05,900 So, Lee asks, would you ever use Illustrator for 460 00:31:05,900 --> 00:31:09,130 making favicons so you don't have to worry about pixels? 461 00:31:10,160 --> 00:31:11,900 Mm, it depends, you have to be pretty 462 00:31:11,900 --> 00:31:16,630 good at using Illustrator and really understand exactly what 463 00:31:16,630 --> 00:31:18,130 you're going to be exporting. 464 00:31:18,130 --> 00:31:22,710 Often times, it really is best to just use Photoshop, so. 465 00:31:22,710 --> 00:31:26,000 If you're really good with Illustrator and you know exactly you 466 00:31:26,000 --> 00:31:29,350 know, what's gonna be outputted at different resolutions, you can do that. 467 00:31:29,350 --> 00:31:34,470 But oftentimes I find that when you're creating those vectors, and you try to 468 00:31:34,470 --> 00:31:41,850 apply an image to you know, some very small resolution like your favorite icon 469 00:31:41,850 --> 00:31:47,930 at like 32 by 32 or 16 by 16 it just doesn't produce the best results. 470 00:31:47,930 --> 00:31:49,630 It doesn't always look good. 471 00:31:49,630 --> 00:31:54,840 Sometimes it does and you can get away with it but oftentimes, I mean, really 472 00:31:54,840 --> 00:31:59,570 every time I've made a favorite icon I find myself doing pixel by pixel editing. 473 00:31:59,570 --> 00:32:03,970 So I do recommend you use Photoshop if you can. 474 00:32:03,970 --> 00:32:07,040 Next up Travis asks what are the advantages or 475 00:32:07,040 --> 00:32:11,538 disadvantages of using other formats like PNG over ICO? 476 00:32:11,538 --> 00:32:17,510 Well ICO's gonna have the broadest browser support and in a lot of cases 477 00:32:17,510 --> 00:32:23,610 even Chrome and Safari are going to favor an ICO file over a PNG file. 478 00:32:23,610 --> 00:32:26,630 So if you have both, if you have an ICO file 479 00:32:26,630 --> 00:32:32,320 and a PNG file, it is going to oftentimes pick the 480 00:32:32,320 --> 00:32:38,298 ICO file instead which is pretty frustrating if you have a really nice PNG. 481 00:32:38,298 --> 00:32:43,140 Maybe you have some really detailed alpha transparency on it 482 00:32:43,140 --> 00:32:45,440 that you wanna produce, that's something we didn't talk about. 483 00:32:45,440 --> 00:32:50,550 But you can make transparent favicons and they'll pretty much work across almost any 484 00:32:50,550 --> 00:32:55,570 browser if you do a transparent PNG at, I believe, 8-bit. 485 00:32:55,570 --> 00:32:57,574 It should work. I don't 486 00:32:57,574 --> 00:33:02,588 think 24-bit transpar, transparency will, will work perfectly. 487 00:33:02,588 --> 00:33:07,120 But, when you're exporting your favicons and you're 488 00:33:07,120 --> 00:33:09,580 using a tool like X-Icon Editor, you wanna 489 00:33:09,580 --> 00:33:13,160 export them from Photoshop or your image editor 490 00:33:13,160 --> 00:33:16,700 as PNG files because those will be pixel perfect. 491 00:33:16,700 --> 00:33:22,890 If you do a JPEG file, it's gonna, it's gonna apply JPEG compression and you 492 00:33:22,890 --> 00:33:25,090 certainly don't want that, especially at those 493 00:33:25,090 --> 00:33:29,020 smaller file sizes or smaller image sizes. 494 00:33:29,020 --> 00:33:32,010 You want something that's gonna be pixel perfect. 495 00:33:32,010 --> 00:33:35,270 So export them as PNGs, and then you can bring 496 00:33:35,270 --> 00:33:39,420 them into a tool like X-Icon Editor or Real Favicon 497 00:33:39,420 --> 00:33:45,270 Generator or whichever one you like, and it will generate a nice ICO file that 498 00:33:45,270 --> 00:33:51,314 should be pretty, pretty cross-browser compatible. 499 00:33:51,314 --> 00:33:54,710 So a couple of people, I guess, are asking about animated favicons. 500 00:33:56,290 --> 00:33:57,080 You can do it. 501 00:33:57,080 --> 00:33:59,150 Again it's gonna be pretty tricky. 502 00:33:59,150 --> 00:34:02,500 The thing that is gonna help you do that 503 00:34:02,500 --> 00:34:05,550 is the tool we looked at just a minute ago. 504 00:34:05,550 --> 00:34:07,060 Think I had it up. 505 00:34:07,060 --> 00:34:07,580 Let's see. 506 00:34:07,580 --> 00:34:08,980 Yeah. Here we go. 507 00:34:08,980 --> 00:34:12,590 favicon, or favico.js. 508 00:34:12,590 --> 00:34:15,710 Excuse me. So there's no n there. 509 00:34:15,710 --> 00:34:16,580 Could help 510 00:34:16,580 --> 00:34:18,940 you do those types of animations, and if you 511 00:34:18,940 --> 00:34:21,320 look here, there's actually a number of different animations 512 00:34:21,320 --> 00:34:24,880 here, so if I plus or minus these, you 513 00:34:24,880 --> 00:34:26,980 can look at what these different animations look like. 514 00:34:26,980 --> 00:34:32,460 So, they have a fade or a pop here, a position. 515 00:34:32,460 --> 00:34:37,030 And you can certainly do that. You could use some of the technologies 516 00:34:37,030 --> 00:34:42,596 that were used to make favico.js 517 00:34:42,596 --> 00:34:47,940 here and maybe apply them to a different kind of animation. 518 00:34:47,940 --> 00:34:51,370 It doesn't necessarily have to be a number here. 519 00:34:51,370 --> 00:34:53,750 That's a little bit more advanced though. 520 00:34:53,750 --> 00:34:58,760 So if you do that just keep that in mind. It's gonna be a little bit trickier. 521 00:34:58,760 --> 00:35:02,520 But it can be done. It's technologically possible. 522 00:35:04,460 --> 00:35:07,940 So I think that's all we got time for. It doesn't 523 00:35:07,940 --> 00:35:09,380 look like we have any more questions. 524 00:35:10,480 --> 00:35:14,570 Be sure to check us out at teamtreehouse.com the best place 525 00:35:14,570 --> 00:35:19,170 to learn web design, web development, mobile business and so much more. 526 00:35:19,170 --> 00:35:19,810 I'm Nick Pettit. 527 00:35:19,810 --> 00:35:23,940 Thank you so much for joining us today, and we will see you next week.