Now you know what a logo is,
and you have seen a few when you walk or drive by a coffee shop, supermarket or clothing store.
The logo is there somewhere on the product, wall or shelf.
There is a reason why I created these two videos, Negative Space and TV Show logos. Any of these logos had some form of brand identity tied to them.
Today's tutorial, we will create a favicon for a website.
What is a favicon?
It's the small icon that shows up in the web browser's tab, address bar, browser history,
bookmarks bar or on the desktop of a mobile device or tablet.
As well, favicons will help the visibility of your brand as they use your website.
I suggest using your logo for this exercise.
Or you can also download the example that I have at the bottom of the description
section of the video so that you can follow along if you like.
I have also included a folder of the HTML code if you didn't want to do the coding itself.
Copy your favicons to the folder, and your new icon should replace it.
And then, open the HTML file or refresh the HTML file in a web browser, and you will see your favicon in action!
In the past, one would have to create between 20-32 different size icons for different devices.
Thankfully, there are third-party generators that produce these icons for you in a split second.
But first, you need to create a high-quality logo to be used for them.
A blurry image is NOT the best solution.
Make sure you have already created a logo. If not, stop.
Go ahead and make your logo. Then come back to this video.
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 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.
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.
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 this website called 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 literally 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 a text file with the code.
Typically, one would 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, you should see the new icon!
Thanks, everyone, for watching. If you have any issues, please let me know in the comments.
For a more detailed tutorial, please check the above link for more information.
If you enjoy the video, like it, share it, and subscribe to the channel. Thank you for watching it and I will see you next time.