1 00:00:02,046 --> 00:00:04,775 Welcome to the last work section. 2 00:00:04,775 --> 00:00:07,297 We have come such a long way so far. 3 00:00:07,297 --> 00:00:09,375 Our website looks super great 4 00:00:09,375 --> 00:00:11,906 and has some cool animations. 5 00:00:11,906 --> 00:00:13,585 Now in this section, we'll do some 6 00:00:13,585 --> 00:00:15,741 optimizations on our web page, 7 00:00:15,741 --> 00:00:17,646 and then I will show you how you can 8 00:00:17,646 --> 00:00:21,063 launch your own websites to the internet. 9 00:00:22,417 --> 00:00:25,487 But before doing that, let's add a final touch 10 00:00:25,487 --> 00:00:30,112 before we make our webpage ready for launch, a favicon. 11 00:00:30,112 --> 00:00:32,839 Favicons are those little icons you see 12 00:00:32,839 --> 00:00:36,807 on browser tabs and on your bookmarks bar. 13 00:00:36,807 --> 00:00:39,796 It is part of the identity of any website 14 00:00:39,796 --> 00:00:42,452 and makes users recognize your website. 15 00:00:42,452 --> 00:00:44,733 So don't skip this step. 16 00:00:44,733 --> 00:00:48,324 There is a very easy, online tool to do this. 17 00:00:48,324 --> 00:00:51,507 We just need an image to serve as our icon. 18 00:00:51,507 --> 00:00:53,993 So, let's do that for now. 19 00:00:53,993 --> 00:00:56,029 So this is the tool I was talking about, 20 00:00:56,029 --> 00:00:58,529 so it's the Favicon Generator. 21 00:00:59,379 --> 00:01:02,529 And with this we can create icons for the browser, 22 00:01:02,529 --> 00:01:04,894 of course, for the iOS home screen, 23 00:01:04,894 --> 00:01:09,221 for Android home screen, and for Windows 8, 24 00:01:09,221 --> 00:01:11,872 and, yeah, for Windows in general. 25 00:01:11,872 --> 00:01:15,423 So, we just need to pick our image. 26 00:01:15,423 --> 00:01:18,756 In this case, I'm going to use the logo. 27 00:01:23,307 --> 00:01:25,101 And the black one of course, so I'm going to 28 00:01:25,101 --> 00:01:28,018 use this one to create the favicon. 29 00:01:31,950 --> 00:01:33,200 And here we go. 30 00:01:34,362 --> 00:01:37,138 So the first icon here is actually for iOS, 31 00:01:37,138 --> 00:01:39,834 and since ours is transparent, 32 00:01:39,834 --> 00:01:42,782 we'll need to add a background color, 33 00:01:42,782 --> 00:01:45,185 which will be white. 34 00:01:45,185 --> 00:01:48,352 And then we have Android here as well. 35 00:01:49,355 --> 00:01:52,744 And I will also add this white color. 36 00:01:52,744 --> 00:01:55,994 And this is not so important, actually. 37 00:01:57,102 --> 00:02:00,215 What really matters is down here. 38 00:02:00,215 --> 00:02:01,382 And we go now, 39 00:02:02,631 --> 00:02:04,415 click here because we want to 40 00:02:04,415 --> 00:02:08,459 choose a path where we're going to put our icons, 41 00:02:08,459 --> 00:02:11,561 because we don't want them in the root, 42 00:02:11,561 --> 00:02:14,419 so in the main project folder. 43 00:02:14,419 --> 00:02:16,836 So let me check what this is. 44 00:02:19,749 --> 00:02:22,796 So I want them here, then in the Resources, 45 00:02:22,796 --> 00:02:25,647 and I'll actually create a folder for them here, 46 00:02:25,647 --> 00:02:26,480 Icons 47 00:02:28,136 --> 00:02:29,053 or Favicons 48 00:02:30,996 --> 00:02:34,413 and so, it's Resources and then Favicons. 49 00:02:37,744 --> 00:02:39,327 So I want Resources 50 00:02:41,602 --> 00:02:43,102 and then Favicons. 51 00:02:45,484 --> 00:02:48,422 So this is where we'll put the icons. 52 00:02:48,422 --> 00:02:50,755 And then, let's generate it. 53 00:02:54,052 --> 00:02:58,013 Okay, so we just download this and we grab 54 00:02:58,013 --> 00:03:01,930 this code here, and insert it into our website. 55 00:03:06,414 --> 00:03:09,664 So let's just paste off this down here. 56 00:03:15,460 --> 00:03:18,960 It's a lot of code, but well, don't worry. 57 00:03:22,681 --> 00:03:25,664 And now we just need to put this stuff 58 00:03:25,664 --> 00:03:27,831 into our folder, actually. 59 00:03:29,494 --> 00:03:30,744 And here it is. 60 00:03:34,521 --> 00:03:35,604 So, Favicons. 61 00:03:43,537 --> 00:03:46,027 All right, so, put them into Resources 62 00:03:46,027 --> 00:03:48,598 and we can replace that folder we had 63 00:03:48,598 --> 00:03:50,845 because it has the same name. 64 00:03:50,845 --> 00:03:53,428 And so, here are all our icons. 65 00:03:58,311 --> 00:04:00,311 So let's check this out. 66 00:04:04,517 --> 00:04:09,290 So the icon is not showing up here as it should. 67 00:04:09,290 --> 00:04:10,473 And I actually don't know why, 68 00:04:10,473 --> 00:04:12,876 but I'm sure that it is working 69 00:04:12,876 --> 00:04:16,876 on your computer, because as we can see in here, 70 00:04:18,187 --> 00:04:21,437 everything is working fine, supposedly. 71 00:04:23,897 --> 00:04:27,777 Which means that the images are in the correct place 72 00:04:27,777 --> 00:04:32,637 and, yeah, this code, of course, is also correct. 73 00:04:32,637 --> 00:04:35,496 So I don't know why it doesn't appear here in my case, 74 00:04:35,496 --> 00:04:39,256 but probably on your computer it will appear. 75 00:04:39,256 --> 00:04:42,072 So, okay, now you know how to add 76 00:04:42,072 --> 00:04:46,438 that special touch to your website as well. 77 00:04:46,438 --> 00:04:48,475 Now, I could just have stopped here 78 00:04:48,475 --> 00:04:50,841 and then launched our website or show you 79 00:04:50,841 --> 00:04:52,959 how to launch your website. 80 00:04:52,959 --> 00:04:55,037 But I want to show you even more. 81 00:04:55,037 --> 00:04:57,811 I want our website to be perfect, 82 00:04:57,811 --> 00:05:00,421 and so every detail matters. 83 00:05:00,421 --> 00:05:02,463 line:15% So, let's now optimize our website's 84 00:05:02,463 --> 00:05:05,046 page speed in the next lecture.