Generator Tutorial About Contact

Generator

Tutorial

About

Contact

Tutorials

Video Tutorial on how to Generate a Favicon from Images, Texts or Emojis.

Have you gone through our short illustration in our home page and still need help to generate your favicon?, Kindly watch this short video below for further clarification.

img

Was this video Helpful?

image

Yes

image

No

Faviconify HTML Reference Guide for Developers

Tips on Creating a great Favicon.

Now, if you're wondering, “how can I create a memorable favicon?” don't worry!



Here are some actionable tips you can follow:



  • Keep it simple. Remember, you don't have a lot of space to play around with!
  • Keep it recognizable. Try and encapsulate your brand in the small space you have to work with. If you're used to using a logo that isn't a tiny square, try and create something that evokes that logo rather than unnecessarily trying to squeeze the whole original in.
  • Use as little text or lettering as possible. Remember that the favicon is a small image. Even if your usual logo has your company name spelled out, try to keep it concise in your favicon.
  • Think about color. Different web browsers (like Google Chrome, Android Chrome, Safari, and Internet Explorer) use different color palettes. And, with the increasing popularity of night mode, you'll want to make sure your favicon looks great regardless of the user's browser. All you have to do is ensure that the favicon looks good and stands out at least on white, gray, and black background colors.


The WordPress.com favicon, for example, uses just a simple, recognizable W letter. This makes the user think of WordPress but doesn't take up as much space as the whole word. It's perfect for a favicon!




Browser code (in most cases)

For the main favicon itself, it's best for cross-browser compatibility not to use any HTML. Just name the file favicon.ico and place it in the root of your domain.

This works in every desktop browser/version all the way back to IE6, except for SeaMonkey.



iOS, Android, and Windows mobile

If you want your site to have a unique icon when a user creates a shortcut to it on their mobile device screen, use the following:


  1. Touch icon for iOS 2.0+ and Android 2.1+:


    $ltlink rel="apple-touch-icon-precomposed" href="path/to/favicon-152.png" />

  2. Internet Explorer Modern UI (formerly Metro) tile icon:


    <meta name="msapplication-TileColor" content="#FFFFFF" />
    <meta name="msapplication-TileImage" content="/path/to/favicon-144.png" />

Where #FFFFFF is the Windows tile color of your choice.



Icons for specific Apple devices and everything else

Here's how to specify favicons for particular Apple devices:


  1. Largest to smallest apple-touch-icons:



    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="/path/to/favicon-152.png" />

    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/path/to/favicon-144.png" />

    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="/path/to/favicon-120.png" />

    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/path/to/favicon-114.png" />

    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/path/to/favicon-72.png" />

    <link rel="apple-touch-icon-precomposed" href="/path/to/favicon-57.png" />

  2. Favicons targeted to any additional png sizes that you add that aren't covered above:


    <link rel="icon" href="/path/to/favicon-32.png" sizes="32x32" />