How to add a favicon to your website to customize it

Transcript: Hi, this is Anne with Graphic Design How To,and today I'm going to tell you how to create a favicon for your website with Adobe Photoshop. A favicon are these little icons right uphere on the internet. And so if you have one, it helps with yourbranding on your webpage. And we'll be doing this in Photoshop. So let's open Photoshop. And the size for a favicon is 16 pixels by16 pixels. So I'm going to go to File>New. Even though this will end up as 16 by 16,I find it a little easier to work with 64 by 64 and then squeeze it down. So we'll have it at 72 pixels per inch. And we'll just say 'Create.' Okay, so that is very small. I'm going to hit CMD 0 to get it full size. And now I'm going to go grab my logo. I'm going to show you two different ways. First, we'll do one without a white background. So I'll just pull this onto Photoshop. 'Select All' with CMD A, 'Copy' and then 'Paste'in here. And it's so big that it's filling up the wholescreen. So I'm going to hit CMD T to resize that,and then CMD... See more →

Transcript: Hi today I'm going to show you how to add a favicon to your website what is a favicon it's this little icon here that shows up in your browser tab or next to your URL that shows up also in your bookmark bars and it basically is a little icon that represents your website right now you see the Wix icon because I'm in the Wix editor and that's their fav icon but to add one to my own site what you want to do is go into Wix com log in so that you are seeing your site here if you have multiple sites just click here to look at all your sites and select the site that it is that you want to use the fav icon on and hit select site the next step is to click on manage site and now your gonna be in your site manager this there's all kinds of stuff you can do in here you can set up your SEO settings you can set up your analytics your social like a Facebook share image and so forth but today we're going to look at the domain and find this fav... See more →

Key quotes:

• "Changing the favicon seems like a simple task, given there is quite literally a file titled favicon.ico in the public folder."
• "When you run create-react-app the following files are generated Most, if not all of our code will go in the src folder, so what’s the deal with the public folder? The manifest.json file will be compiled and added as a link tag in the head of the HTML template in index.html: <link rel=”manifest” href=”%PUBLIC_URL%/manifest.json”> This is a good time to address that funky looking %PULIC_URL% tag."
• "Remember the ‘escape hatch’ React provides in case we put assets in the public folder? Right now it is this beautiful atom But we’re professionals here, so we’ll generate a favicon and download the .ico file."
• "We can include this the easy way by simply deleting the old favicon, popping in our new icon into the public folder and naming it favicon.ico."

Key quotes:

• "Making people remember your brand takes much more than building a website and social media pages."
• "In this post, we will study how to create this favicon and why does your WordPress website need favicon."
• "Favicon: Introduction A favicon is a small icon displayed on a website’s page title."
• "Favicons can also be seen next to a website’s name (much like a site’s icon) in a list of bookmarked sites."
• "However, they can also be an image that is hyperlinked to a site’s branding, if this is more appropriate."
• "The favicon icon should ideally be the same icon image as your website’s logo so that visitors can instantly recognize it."

Transcript: In this video we're gonna be adding a favicon or is it a favicon favicon favicon anyway you know the little icon that appears up in your tabs in your browser here we're gonna be adding one to our WordPress website so let's get started hello it's Alex here from WP eagle thanks for watching so it's just very quick video we're gonna add a favicon a favicon or whatever it's called to our WordPress website so let's get on the computer and get it done ok so ever it zombie merkon which is the website i created in a previous video tutorial be sure to check it out if you haven't seen it but anyway this website and the theme that we're using it doesn't have an easy way to add a favicon and we call it a favicon going forward I'll stick with that so I'm gonna to do it with just the WordPress general setting so this should work on any theme that you're running it doesn't really matter now some themes do have a favicon option makes it quite easy but others don't so but they'll say this should work on any theme at all as... See more →

Key quotes:

• "Favicons have long existed on the web (these are the little icons that appear next to the webpage title in a browser tab), but since many websites are intended as web-apps these days, it’s commonplace to design app icons (known as touch icons) even for websites, and because device resolution varies from device to device, those icons should come in a variety of sizes."
• "Lets run through fav icons and touch icons, and I’ll explain which devices use which icons, and at which size they require those icons to be."
• "Since the introduction of the sizes attributes in HTML5, we don’t have to compress the .png files into an .ico format anymore (even though browsers do support .ico still)."
• "It really comes down to what you want too create support for — this is the HTML5 syntax for displaying favicons: Apple iOS has a feature called “Add to Home Screen”, which basically makes your mobile website look like an app (it hides the browsers’ address bar and everything); the Apple touch icon offers a device-specific app icon for this makeshift app."
• "As long as the touch icons are uploaded to the root folder of the website, Apple will know to look for them there, however other operating systems also use these icons — even Android!."

Key quotes:

• "A favicon or favorite icon is the icon located on the left side of a browser tab."
• "Adding a favicon can not only help users quickly locate a site among a sea of open tabs but it also gets rid of the annoying "GET /favicon.ico" 404 error that constantly appears in the CLI and Developer Tools Console."
• "While a favicon can be added to any website, this tutorial will show you how to specifically add a favion.ico file to your Django project."
• "Upload the image of your choice, preview the favicon on different devices, then generate the icon and download the zipped folder."
• "Save a copy of the favicon.ico file to the static > img folder located in your Django project folder."
• "This path will redirect to the ICO file located in the static > img folder whenever the favicon is requested by the browser."

Key quotes:

• "To add a custom icon to your Gatsby site in just a few a minute, let follow the steps below Go to the folder directory where you want your project to be saved on your disk and run gatsby new thenyourprojectname Note that you should have nodejs install and gastby-cli cd thenyourprojectname gatsby develop To open your gatsby site go to your favorite browser and browse http://localhost:8000/.This how your site should look if you have done everything properly, notice that Gatsby uses their icon as default no worry let me show how to customize it to your like."
• "As you can see above, I have added my own icon to the images folder As shown above, change the icon field value to be the path to your my-icon.png file Well, we have our custom favicon on our Gatsby site."
• "thanks to gatsby-plugin-manifest I hope this helps you guys to have your custom favicon on your Gatsby site without struggling."