There are two ways on how to create a favicon for your blog or website. There’s a quick & straightforward way, and then there’s the custom OG way. If you are a blogger, content creator, or a professional who is setting up their website and after you saw your site up in staging and was like, “damnit, the last thing I have to do is add a favicon and I can go live,” this quick how-to guide on favicons is written just for you.

What is a Favicon?

Favicon is a small icon that represents your website that serves as branding for your website and a convenient indicator to your visitors as a visual representation when they have multiple tabs open and can locate your page because of your favicon. 

Favicons Displayed on the Google New Window Page

The favicon design is usually the same icon of your profile picture logo branding that is part of your brand style guide. 

Favicon Examples:

Favicons Displayed in Browser Tabs
  1. Google
  2. Buy Me A Coffee
  3. YouTube

Method #1: Easy and Quick Favicon Generator 

Favicon Generator
Favicon Generator – https://favicon.io/favicon-generator/

This method doesn’t include you to understand Photoshop at all. It’s pretty much a couple of clicks, download it for free, and add it to your site. Even if you do have some Photoshop skills, but you are on the go and need one asap that exports into six different sizes automatically for you, this is the way to go as a short cut.

Favicon.io is a favicon generator that is free, easy, and intuitive to use. I also love how they have a few options on ways to generate a favicon – whether that is straight up text, image, or even an emoji.

PNG Exports

  • Android Chrome Favicon 192×192
  • Android Chrome Favicon 512×512
  • Apple Touch Favicon 180×180
  • Favicon 48×48
  • Favicon 32×32
  • Favicon 16×16

Method #2: Favicon Designed in Photoshop or Illustrator

Favicon - Adobe Illustrator
Illustrator Example – https://birdhouse-template.webflow.io/

If you have Adobe Photoshop or Illustrator and some necessary design skills, you’ll be able to create your favicon with the font family or typography that you desire. In Method 1, they have an extensive collection of fonts to choose from, but it doesn’t’ have all of them. 

If you are designing your logo in Photoshop, try to make it the most significant appropriate size, such as 1000×1000, and ensure to make it as a smart object. In this way, you can resize it and not lose quality when scaling it up and down for the various favicon and profile pic logo exports needed. 

If you are creating complete custom typography for your logo branding, definitely start in Adobe Illustrator to create your logo, and then (optional) port it over to Photoshop to make your different sizes, or just create new artboards in Illustrator. In this way, you’ll have an EPS asset you can always leverage for whichever medium you’ll need to use it in the future (e.g., 4k videos). 

Favicon against Theme
Google Chrome Theme Appearance Custom Example

As for exporting your favicon, you’ll want to export it as a PNG so your favicon is transparent against your visitor’s browser tab. Besides the mainstream visitor who has their browser settings as default from Google Chrome, there will be others who like to customize their browser appearance settings with a different theme for Google Chrome specifically or via their Windows/macOS system theme. And so, whichever color they do use in the background, your favicon will always stick out.

Favicon Checklist

  • Do you know what size you need to create for where you need a favicon?
  • Is your favicon logo the same for mobile app, and logo profile pictures for FB?
  • Across all logo exports, is your branding the same in colors (background color, font color)?
  • Have you exported your favicon with an alpha transparent background layer?
  • Is your favicon easy to read and is legible?
  • Is my export a PNG, not a JPEG or SVG?

Show and tell!

Congratulations, you’ve made your favicon! Whichever method you have chosen, I’m glad that you are able to have a favicon on your site, so you can go go go! I would love to see your blog, website, or portfolio! Let me know what your site is about in the comments below and I’ll check it out!

Learn some more tips as a creator here on the blog! πŸ™‚

Cheers
Cee

Cee Ng

Hello, I’m Cee! I’m a lifestyle blogger during my downtime and a consultant and producer during the day. This blog is to share experiences in travel, work, beauty, relationships, cooking, shopping and lifestyle tips that I hope can inspire you to live the best version of yourself in whichever stage you are in life and have fun with no regrets!