You can create your favicon in whatever program you prefer, whether it be Photoshop, Illustrator, Gimp, Paint, or Sketch. And it is also recommended to keep it under 1 KB, or as small as possible. Step 1Ī favicon should generally be 16x16 pixels or 32x32 pixels.

Today we will be focusing primarily on generating a favicon.ico for your website. PNGs are used more commonly for IOS, Android, and Windows 10 devices. However, ICO files are typically used more than others as the file size is smaller and it is supported in all major browsers. How to make a faviconĪ favicon can actually be either a PNG, GIF, or ICO file. Making the favicon small and reducing the cookie size for the server's root cookies improves performance for retrieving the favicon. Since favicon.ico resides in the server's root, each time the browser requests this file, the cookies for the server's root are sent. Since the browser requests this file, you will see a 404 error if one isn't present. Every website should have a favicon associated with it. And Windows 10 takes goes a whole other way with a dedicated set of icons and HTML declarations.ĭo you need a favicon? The answer is yes. Android Chrome also uses these pictures if it finds them. An iPhone needs a 57x57 picture, whereas a brand new iPad with Retina screen looks for a 152x152 picture. iOS devices use a high resolution Apple touch icon to illustrate bookmarks and home screen shortcuts. Now we have iOS devices, Android devices, Windows 10 devices, and they all have their own size dimensions and file types that they support for associating an icon. However, it no longer just stops with desktop web browser favicons. Generally the favicon.ico is stored at the root of your website. This is then displayed in various places such as the tabs in your browser as well as the bookmarks bar. WebPageTest does show a in its waterfall analysis).

When a browser hits your website it does a silent lookup in the background for your favicon.ico (note: you might not see this in some website speed test tools. What is a favicon?Ī favicon, or favicon.ico, is a small image icon file that is associated with your website. As a CDN provider, we love sharing even the smallest of tricks that can help you stay ahead of your competition and ensure your sites load as fast as possible for both your visitors and Google. If you add up 20 small optimizations, suddenly you could be looking at seconds shaved off your load times.

This is definitely one of those optimizations that can be classified as lower priority, but everything adds up over time when it comes to web performance. Today we want to talk about your favicon and how to make a favicon small, cacheable, and fast.

Html how to make a favicon