How to make a favicon in Photoshop for your website

Key quotes:

• "Medium’s M? YouTube’s play symbol? Google’s stand-alone G? Favicons are all over the web."
• "Here are some of my browser tabs: I know I’m not the only one who’s tab-abuse culpable."
• "With a quick glance, I know which websites I’m on cab quickly rearrange or begin where I left off."
• "An .ico file will store your icon at various file sizes, so they work for tiny browser tabs, all the way up to the top sites section of a browser’s new tab."
• "Different smartphones and streaming devices like Roku or Chromecast have their own sizing needs, too."
• "In the above screenshots, the first has 256x256 favicons, and the second’s tab icons are 16x16."

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 →

Key quotes:

• "Designing in contextWhen designing an icon, you start to chip away and end up with a shape and design that you are happy with its really important at this point to take a look at it on a REAL device and NOT just a mock up in Sketch or Photoshop."
• "This effects as all; plugging away in design software, zoomed-in, mulling over the fine details and out of context without any other visual disruption, such as other icons, device bar and notifications."
• "Icons on different platformsNaturally this being the web, each vendor has its own style, requirements & preferred size, some platforms can have a transparent background and appear like any shape whist others require a background colour."

Key quotes:

• "At some point, I decided to collect all this information and compile it in one guide that helps and encourages designers to start drawing their own pixel perfect icons."
• "This guide is divided in five parts, including Setting up the document, Tips & Tricks, Icon Grid, Exporting icons and Creating an icon font."
• "When I first started to create icons, I thought I needed a grid before even trying to draw any of them."
• "After struggling and trying out a lot of different ways, I realised that you don’t really need a grid for your first icon set."
• "If you need some inspiration for your grid, you can check out the article Icon Grid: When And How To Use It?."
• "After creating an account, there are couple of steps you need to follow to get your icon font up and ready."

Transcript: Hi and welcome to this week's web design video blog today we're going to show you how you can make a favicon in Photoshop now a favicon otherwise known as a shortcut icon' website icon or a bookmark icon and is essentially this little image that you can see when you're browsing the Internet in things like a Explorer Safari Firefox and they come into play when you bookmark your pages or even in here like in Firefox where you tap your content you can see the browser lab little I stock camera and also the Adobe fav icon so five icons have been around for quite a while and web designers and Internet users are used to working with them and seeing them so the good news is making one for your website is very straightforward as a web designer is essentially a couple of options that you have open to allow you to create a favicon now the first one is you can Google you know how to make a favicon favicon creator and you can use one of the many free online favicon generation tools now this one here is quite popular its favicon dot CC and... See more →

Key quotes:

• "Favicon or Site Icon is the tiny image that appear next to your website title in the browser."
• "It helps your users identify your website and more frequent visitors of your site will build an instant recognition for that tiny image."
• "The favicon helps user identify your website and quickly switch to the tab they want."
• "Your site icon or favicon is also used when a user adds your site to their homescreen on a mobile device."
• "The recommended size for your site icon image is at least 512 pixels in both width and height."
• "The site icon image should be a square, you can use a larger rectangular image and WordPress will allow you to crop the image when you add it."

Key quotes:

• "So for as popular as these are across the web, it’s a bit surprising that neither Photoshop nor Illustrator supports directly exporting to ICO."
• "We’re going to assume for this guide that you want the following sizes in your ICO: 16, 24, 32, 48, 64, 96."
• "With my Photoshop method you’ll have control over the design of each individual icon size, unlike the Illustrator method."
• "Illustrator is great for SVG icons (the future) but I prefer to use Photoshop when it comes to ICOs."
• "Step 2: Create your icon! Step 2: Create your icon! In this next screen you want to export both artboards as PNGs at 1x, 2x, 3x, and 4x scale."

Transcript: Hello everyone this is danny from creating a web store calm and in this tutorial I'm going to show you how to create a favicon in Photoshop CC so to start you will need to get a plugin you can get this plug-in at WWE telegraph it's calm a you /sw forward slash once here you will see the plugins that they have available and right here this is the ICO windows icon format plug-in this is basically what you need and as you can see they have it for different versions of Photoshop I'm actually going to be downloading the Mac cs5 cs6 version they also have some for windows 32-bit for all Photoshop versions and then you have some more here which is compatible with Vista icons and much more and then you also have windows 64-bit which is compatible with photoshop cs4 5 & 6 so basically just download your version that will work best with your computer and with your Photoshop version so I'm going to download this so next you're going to want to locate that a file that you downloaded in my case this is a dmg file and as you can see I... See more →