After you have created a logo for your website, let’s create a favicon!
A favicon is short for favourites icon. This icon is an image file that contains one or more icons that can be used to represent a website, app, or even a single web page. Favicons will appear in places such as the browser’s tab, address bar, browser history, bookmarks bar or on the desktop of a mobile device. As well, favicons help the visibility of your brand as they use your website.
Why is it so important to have a favicon? It has a subtle – yet critical – role in building the brand on their website. When a visitor sees one on their website, that can be a reliable indicator that they came to the right place. And reassuring in a sense. It is an icon associated with a website or web page intended to be used when you bookmark the web page. Web browsers use them in the URL bar, browser tabs and other places depending on your browser and operating system.
At one point, a single 16×16 pixel icon was all that was needed and placed in the root directory of a website. Nowadays, with so many different medium devices from a tablet, mobile and desktop, we need between 14 to 20 size icons.
Instead of creating every single favicon ourselves, we need to create just one image and then use an online favicon generator. In Illustrator, I create an artboard size at 256 pixels by 256 pixels. At this size, I would be covering various different sizes when my favicon generator spits them out automatically.
Online Generator
The online generator will create the different size icons automatically and will give us the HTML code too. The one I have used in the past is Favic-o-Matic. A generator creates both the .ico & .png, and the HTML code needed to make your site awesome looking on every browser and every device. There are other generators, you can use this one or any other ones that you prefer.
Code on every page is quite messy?!
The main reason why you need to copy the code on each page of your HTML page because the favicon needs to be. If you decide to put it on the home page only, the favicon will only show on the home page. If a user chooses to bookmark the contact page, there will be no favicon to show, and it will default to a page document icon or a world icon. It’s all about your branding. Don’t waste this opportunity to show your website off.
Secondly, in the past, if you place your favicon in the root of the directory (i.e., besides the HTML files), this makes the web browsers to pick it up quickly. Granted, if you do indeed put it in a folder called images or assets, then you need to change the code to reflect where these favicons are. Copy and paste the generated HTML code in the head of your HTML document. Make sure you do this on all the web pages of your site, as you don’t know where the user is entering your website for the first time.
Hey, your website doesn’t have a proper favicon?
You are absolutely right. But, I did this on purpose to show you what I mean. I am taking a hit but, it’s a great way to show you, the learner how important it is.
Download sample logo and HTML code
I suggest using your logo for this exercise. Or you can also download the example from below.
🖍 Download the Sample Logo zip file (https://bit.ly/ulearn-samplelogo) and unzip the folder. Download a sample logo that was used in the How to Create a Favicon video tutorial (an Illustrator vector file) or use your own logo to follow along.
📂Download the Favicon Code zip file (https://bit.ly/ulearn-favicon-code) and unzip the folder. The folder contains an example of the HTML code as well as 19 icons and text file with the code. Copy your new favicons to this folder. It will ask you if you want to replace the icons. Click on Replace.
Click here to watch the video?
Logo?
- Make sure you have already created a logo.
- If not, pause this video and create one. When ready, come on back to this video
Steps in Creating a Favicon
- If you have the logo, open the logo file.
- Make sure the whole logo is selected. Better yet, after selecting all of the art elements of the logo, Group it.
- Command G (for a Mac), or Control G (for a PC).
- This way, you know all the art elements are group together.
- After grouping the logo, Copy the logo (Command C for a MAC, Control C for a PC).
- Now, create a new document, Command N for a Mac or Control N for a PC
- Or go to the menu, and select new. Enter the size of 256 pixels by 256 pixels. It will be a perfect square.
- Now Paste the logo that you had copied into this new document, Command V (for a Mac), Control V (for a PC).
Why this Size?
Why did I create this special document size? The favicon won’t be any bigger than 256 pixels, but it is a decent size to making sure the favicon is sharp in detail. You don’t want to start with a small icon and make the third party generator to resize it bigger, which will create a pixelated icon (aka fuzzy icon). It’s always better to resize things smaller from a bigger artwork.
Resize to the File Document
- Do a free transform (Command T, for a MAC, Control T for a PC) to the full size making sure that it barely touches the edges of the file because we don’t want to cut the edges of our logo either.
- You might have noticed I did not stretch the logo to fill the space unless one wants a distorted icon.
- Hold the Shift-key and grab it by the corner while free-transforming to prevent any distortion of the icon.
- And I use the align tool to horizontal-align and vertical-align center the icon on the artboard.
Time to Save the Image for the Favicon Generator
- When ready, save your image for the web. File – Export – Save for the Web.
- I will keep my favicon logo as a PNG24 because this would preserve sharp details like those in logos, or type.
- I check on Transparency too because you don’t want a white background behind the logo
- Unless you want a white background it!
You could create your favicons, but it gets tedious, especially when you may need to create 20 or more different sized icons and different formats. Lately, I have been using https://favicomatic.com/.
You have the choice of 2 simple icons or Every damn size, sir!. I select Every damn size, sir! because I want to show you how many icons gets generated in a short time frame. It takes seconds to create your favicons. Upload your image simply by dragging your newly created image right on top of that banner area, where it says Upload your Image.
It should automatically be downloaded to your computer. Unzip the downloaded file. Inside this folder are 19 icons and text file with the code. Typically, one can place the icons in the root of the website. And the site tells you exactly where to put the favicon code, which is in the header.
In my example, I will place it in the sample folder that I have attached in this tutorial and place the icons as is. It will ask me if I want to replace the icons, and I will say ‘yes’. And now, when I refresh the HTML page, and you should see the new favicon!
Thanks, everyone, here is the Favicon video, How to Create a Favicon for a Website If you have any issues, please let me know in the comments.