# How to quickly create favicons for the desktop, Apple/Android devices, tablets, and more ## Метаданные - **Канал:** Corey Schafer - **YouTube:** https://www.youtube.com/watch?v=LOFQH4fVAQY - **Дата:** 03.04.2015 - **Длительность:** 7:58 - **Просмотры:** 3,766 ## Описание In this video, We will walk through the process of quickly creating favicons for your website or brand that look great almost any device using http://realfavicongenerator.net/ I am not affiliated with this site in any way; however I am a big fan. I used to create my favicons on my own. Once different mobile devices and tablets started to hit the market, it made it extremely difficult to keep up. This site allows you to drop in a single image, then it generates all of the icons and code you will need to support almost any device. ✅ Support My Channel Through Patreon: https://www.patreon.com/coreyms ✅ Become a Channel Member: https://www.youtube.com/channel/UCCezIgC97PvUuR4_gbFUs5g/join ✅ One-Time Contribution Through PayPal: https://goo.gl/649HFY ✅ Cryptocurrency Donations: Bitcoin Wallet - 3MPH8oY2EAgbLVy7RBMinwcBntggi7qeG3 Ethereum Wallet - 0x151649418616068fB46C3598083817101d3bCD33 Litecoin Wallet - MPvEBY5fxGkmPQgocfJbxP6EmTo5UUXMot ✅ Corey's Public Amazon Wishlist http://a.co/inIyro1 ✅ Equipment I Use and Books I Recommend: https://www.amazon.com/shop/coreyschafer ▶️ You Can Find Me On: My Website - http://coreyms.com/ My Second Channel - https://www.youtube.com/c/coreymschafer Facebook - https://www.facebook.com/CoreyMSchafer Twitter - https://twitter.com/CoreyMSchafer Instagram - https://www.instagram.com/coreymschafer/ ## Содержание ### [0:00](https://www.youtube.com/watch?v=LOFQH4fVAQY) hey how's it going guys i want to show you a quick tip and how you can quickly generate your icons for your favicon uh your apple device your android device and you know all these different devices all in one place i have a test website running on my local server here this is just a yeoman website right out of the box and the website that i'm gonna be using to generate all my icons is this website real favicon generator. net i really like this website i'm glad that i found it i used to create all my icons from scratch and then i would have to resize all of them for all the different devices and then hand write all the code and put that into the header of my website but since i've found this website it makes all that really easily so let's go ahead and get started with this now you do already have to have your picture that you want to use for your website this website isn't for that it's not for creating the picture it's for resizing the picture and giving you the code to use that once it generates those for you so you need to have a picture first over here on my desktop i have one here called icon. png and you can see down here before you ### [1:19](https://www.youtube.com/watch?v=LOFQH4fVAQY&t=79s) select your picture select your picture it says that you want to submit a square picture at least 70 by 70 and it should be at least 260 by 260 for optimal results this picture i have here for my website is i believe 800 by 800 so it is plenty big so i'm going to click on select your fav icon picture and then i'm going to navigate over here to my desktop then i'm going to select this icon. png and open that and once that's finished generating it'll give you a bunch of different options here i usually just leave these as is but you can play with these if you want you can mess around with some of the colors uh some of the margin sizes here if you look up here at the picture you can change the margin between your pictures but like i said i usually just leave these as the defaults one that i usually change is for this windows 8 tile i usually try to pick a picture or an image a background color that looks a little bit better with my icon here and then you can even choose your own but uh i'm not gonna fuss too much with this right now i'll just uh pick black there and or this dark blue and then kind of move on but you can match that closer to your icon if you want but yeah there's a lot of different options here i usually just leave these as default and then once you have all that set then you can go down here and ### [2:44](https://www.youtube.com/watch?v=LOFQH4fVAQY&t=164s) finalize and generate your favicons finalize and generate your favicons and your html code and once that finishes it does a couple of things here so it has your downloadable package of your favicons and your other icons it also has all this html code here and down here you can kind of see what the icons look like that it generated for you so first i'm going to go ahead and download this package and let's go ahead and unzip that and now you can see why this tool would be so useful because uh all of these images here um are four different devices you have your apple touch devices and all the different sizes that you're supposed to have for that you have your androids uh your favicons and things like that so to make all those from scratch from yourself and resizing all those would kind of be a hassle but with this just does it all in the one nice sip folder and you're good to go so i'm going to go ahead and copy all of these and copy 28 items and then i'm going to open up my test website here and you can see up here in the top left that i don't have a favicon yet so let's go ahead and paste all those into the root of the website and then if we go back to where it generated our html we can copy this to the clipboard now it says it's copied and if i open up my test website here then i can go and paste this into my top of my index. html file and that's all the code that it generated for me and i will tab that over and save that and if you're running a basic website that should be all that you have to do you should be able to save that file and then those favicons will show up i'm running a yeoman website here so i'm just going to do a grunt build to build that website and it'll quickly run through those and now that build all my files i should be able to go over here to my test website and reload this uh so actually since i'm running this from my local web server this relative path to these images is going to be a little bit different usually you will have these at the root of your website most likely when you put them in your live website they'll be at the root but just for the sake of demonstration here i'm going to change these to where it can find this in the same folder that my website lives and now let me rerun this grump build and now let's see if it can find those icons okay so now you can see here that the favicon is showing up in my web browser if you know if this was a live website and you dropped that code in there in those images then you would also you know if you saved that website to your iphone then that icon would pop up it would save on your android and all those devices that's what that website does for you it creates all those icons for your site's brand and creates those to where they're accessible on all those devices and one last quick thing about this website if i go back to the main page here once you've dropped in all your icons and updated all your code uh to point to those icons then you want to go down here to your uh to this check your favicon here and it'll give you a little box here to type in your ### [6:24](https://www.youtube.com/watch?v=LOFQH4fVAQY&t=384s) type in your website website and you can also say if your favicon isn't in the root directory of your website and just tell it that uh you know where to look um but in my case uh if i go to my personal website here coreyms. com and my favicons and all my icons are in the root of my website so then if i click this check button here it's going to go out and check your website and it's going to make sure that it can find all those icons and that except that those are accessible from all the different devices so you can see all these are in the green here so it's and it shows you a preview too of what each one of them looks like so on the desktop uh here's what it looks like in your browser this is the android ios windows 8 and then it also gives you all kinds of information here saying that you know you have the right sizes that file formats the png's and things like that so you know it's really useful i used to do all this on my own it took a lot of time for not that big of a payoff but you know for this you can make a quick icon drop it into this website get all your icons generated get all the code for it drop those in and you're good to go for just about any device that you can think of so i hope this tip was useful for you guys you should definitely go and check out this website you know if you have any questions just ask in the comment section below and thank you for watching --- *Источник: https://ekstraktznaniy.ru/video/12685*