How to export favicons from Figma using Favvy

Video Transcript

Today I’m going to show you how to create favicons for your website directly from a figma project. The first step if you haven’t already installed it, we’re going to download a Figma plugin called “Favvy”.

If you click on the Figma logo up the top here, and then click on “Plugins” and then go to “Browse all plugins”, you’ll see the search bar up the top. Search for “Favvy”, and if you haven’t installed it, you’ll see a button that says “Install”. I’ve already installed it, so that’s why mine looks like that, but once you’ve clicked “Install”, you can jump back to your project and you’ll immediately have access to Favvy in your Figma plugins panel. To access that, you just right-click anywhere on the page, go to “Plugins”, hover over that, and then you’ll see “Favvy Favicon Exporter”, so that’s what we’re going to click on.

You can see here that there’s only a few things we need to pay attention to; there’s the empty placeholder state, which is telling us to select a single square layer, and it’s recommending that that should be at least 512 by 512 pixels in dimension, and then there’s a couple of fields over here; one is for website name and the other one is for theme color. Perhaps if we just select one of the frames that we’ve got set up here, so for example we can select this the Favvy icon, and by clicking that you can see it’s immediately giving us a bit of a preview of how that icon might look at different icon sizes (different favicon sizes) that different websites and different apps will actually use. For example, this one at the top is the 16 by 16, so that’s one that you might see in a Chrome tab or Chrome toolbar; this is the 32 by 32, this one 64 by 64, and 150 by 150, which is used for things like iOS devices and things like that.

So it just gives a little bit of a snapshot upfront of how that might actually look and scale across different sizes. If we change the layer, you can see here, it immediately reflects that change in the preview panel in Favvy. We can we can switch between these and it will just keep switching the preview as well.

Let’s try exporting this one just as a test. So the website name field is actually where you can put the name of your site; this will show up in certain certain applications, for example if you’re building a progressive web app and somebody saves the the website or they app to their desktop, sometimes this is used as a name reference, so I’d keep this pretty short and I would just give it the name of the website without any extra title or anything like that.

Then the theme color; this is also something that’s used by certain browsers, so if you’ve noticed if you use Chrome for example on your mobile device, on Android, you’ll notice that sometimes the chrome area of where the URL bar is and where all the controls are at the top of the the browser, sometimes when you visit certain websites you’ll notice that that color changes; so setting this HEX value here is going to influence what that looks like. By default, we can just leave it as “white”, so if we pop in the white HEX value (#ffffff), which it will default to anyway if you actually don’t include a value, so you can leave that out; likewise with the website name, these are both optional, but for now I’m just going to export them with the two fields filled out.

Using the Doge icon, I’m just going to click “Export Favicons”; and you can see it’s already finished! It’s ultra quick, it takes less than a second to do all of the work. Up here you can see we’re being prompted to save a zip file, so by default this is named as “favvy” with today’s date and the time, just so it doesn’t conflict if you’re exporting a few different ones to try a different designs out. You can rename that, so I might actually just rename that one, and I’ll just call it “Doge”. I’ll save that to the desktop.

Then the other thing that we’ve got is a little snippet of HTML, which we can use in our own website. There’s a little button here to “Copy HTML” if we like, so I’m going to copy that HTML by clicking the button. Now it’s telling us that the HTML has been copied to the clipboard, so what we can do is to now have a look at what that actually generated.

You can see here we’ve got a zip file that we just saved, so I’m just going to double click on that and I’m just going to open this folder and you can see here we’ve got a whole bunch of files. I’m just going to go through them. So we’ve got the Android Chrome 192 by 192, Android Chrome 512, the Apple touch icon, we’ve got a browser config file (which is used for Microsoft), and this is the 16 by 16 PNG, 32 by 32 PNG, this is the sort of old school (but still necessary) favicon.ico; so this is kind of the default favicon that a web server will look for, and there’s multiple image sizes embedded in this .ico file actually, so that’s a really good one to have. The ms-tile is again used for certain Microsoft applications, and finally we’ve got the site.webmanifest file which is used for progressive web apps or “PWA”s, as I mentioned before.

So what we can do is we can actually take these files and we can use them in a website that I’ve kind of just thrown together; it’s just a very simple HTML file. What I’m going to do is, I’m going to go into my website folder, so this is the example I’ve created and I’ve already got an index.html file in there. I’ll open up my editor as well just so you can see that so what I’m going to do. I’ve just copied all those files and now I’m going to paste them into this folder, so all of them go into the root of the project folder. So what I can do is, I’ve already copied this HTML to my clipboard (if you haven’t, that’s totally fine, as the zip also includes a file called head.html, which has exactly the same content but sometimes it’s easier just to click that button to copy it straight away which I’ve just done), so I’m going to drop that in there. I’ve just pasted all of the stuff that I got from the clipboard in Figma, I’ve just dropped that directly in my head tag in my sample index.html file, and what I’m gonna do is open up this file locally just to show you what it looks like.

You can see here I’ve got my favicon example page which I’ve just loaded up, which is the one we’re looking at in the editor window here, and you can notice up the top there’s a favicon and it’s our little Doge that we exported a second ago. That’s all working as expected, and so we can see in here it’s linking to all of our all of our icons. Our webmanifest here; and to see what’s inside of that, I’ll open it up in in my code editor so this is the site.webmanifest file, you can see here it has taken what we put in from the Figma input in Favvy and our color scheme. So we just put the HEX code for white, so let’s put that in as the theme color and the other file is generated is the browser config file which is pointing to the ms-tile file, which we’ve also generated here and it’s also taken that color value and set it as the tile color.

The plugin has done all this work for us, we didn’t have to generate any image sizes, we didn’t have to export any images manually, and all of the code has been generated for us, all of the files have been generated for us; so it really is as simple as dropping off the generated files into the root of your project directory.

You can actually delete this head.html file if you’re finished with it, that’s more of just a thing in case you forgot to copy it from Figma when it generated, so you can you can actually delete that if you like; it doesn’t really matter if it’s there but I’ll just delete that.

That’s as simple as it is to generate these files. There’s a couple of other things we can do, so if we close this off again. This one that we’ve just done is a a transparent frame, so this is just an SVG file that I’ve dropped in, but sometimes you might want to have a background and you might want to have something that’s not totally transparent. So what I’m going to do is I’ve just grabbed a frame, just a regular frame in Figma, and I’m just going to draw that out. I might as well just set it as 512 by 512, so this is my new icon, and what I can do is I’ll grab this other icon and I’ll pop it in there. If we want to have a background on this icon or even have some padding on this icon, what we can do is we can select the icon inside of the frame, so that’s nested inside of the parent frame, now I’m just going to give it 24 pixels of padding around the edges, just so it’s not completely flush with the sides because I’m going to add a background color and it might look a little bit weird if it has no space around it.

What I can do is I can click on the frame I can go to the fill over here, so I’ve got the fill property currently it’s just set to white ,I’m gonna grab the color picker and I’m actually going to grab this pink color and I’m just going to shift that a little bit to be a slightly different shade. If I set it like that, so now the frame that the icon is sitting in has a background color and now what we can do instead of clicking on the the SVG of the icon itself, I’m just going to click on the frame and re-run the Figma plugin, so “Plugins”, then “Favvy Favicon Exporter” and you can see here, it has taken our selection of the parent frame, and now it’s showing us a preview of what it’s going to look like with that background color. I’m actually going to grab this background color, so I’m going to grab the fill, get a copy of that HEX value, and I’m going to drop it into here; nd so now this is going to be used as our theme color in the progressive web app (PWA) file and that other file that it’s generating.

I’m just going to re-export that now; click the “Export Favicons” button. This is a new one, this is the “favvy” icon so I’ll export him to desktop and once again it gives us the option to copy the HTML, however, because I’ve already got the HTML in here I don’t need to re-copy and paste that; all the filenames are exactly the same, so it makes it really easy just to find and replace those files every time. What I can do is check out my new zip file that I just saved, so this is the favicon, I can grab all of these files. I’m not going to include the head file this time because I don’t really need it, I’ve already got that content. I’ll copy these files, go back to my web site, paste, and then I’m just going to replace all of those. So, they’ve all just been replaced, now if I go back to my browser, I’m just gonna hit refresh and you can see it has immediately updated my favicon to use the new one that we’ve just exported.

This is just a really easy way to create and export favicons directly from Figma. As you saw, it takes less than a second every time, so the cost of re-trying is very low, and hopefully seeing that preview in Favvy (in the Figma plugin itself) is a really good way to save time without needing to re-export and constantly check what it’s going to look like at different sizes.

So that’s that’s roughly the Figma tutorial for Favvy. Of course, this is going to differ depending on what kind of website you’re using, in terms of what templating language you might be using, so you might want to create a different file just for your favicon code, but really, it’s pretty much the same for any website as long as this code here is getting rendered in your head tag, and as long as these paths are referencing the files that you’ve generated, then that’s all you really need to worry about; and you should be good to go.

I hope this has been a valuable Figma tutorial for anyone who is wondering how you can design an export favicons from Figma. I guess the answer is you haven’t been able to (without using this Figma plugin), so if this is something that you need to do at your agency or need to do just for your own side projects, I would say this is (by far) the quickest and easiest way to get favicons exported directly from Figma.

If you have any questions please reach out to me, but until then I hope you enjoy the Favvy Figma plugin and I’m looking forward to giving more of these Figma tutorials in the future. Thanks for watching!