Quick Tip: Add Favicons Quickly and Easily to Your HTML

Favicons add that extra bit of polish to your website, helping to separate your site from the rest. These icons are increasingly more crucial as desktop clients, operating systems, and mobile devices let users pin useful sites for quick access. It’s important to get these favicons right so that regardless of where your site is pinned, your users will always get the best looking icon.

Favicons generally aren’t easy to manage. Because of the fragmentation of both mobile and desktop operating systems and browsers, catering to every device to ensure the best icon is used becomes a slow and tedious process. Sometimes you may have to manage 30+ resources for this task depending on how much support you want to provide.

However, thankfully there’s the Real Favicon Generator web service. This website takes you through a step by step process to quickly and easily generate all the favicons and web resources you’ll need.

Real Favicon Generator site

The Generation Process

Real Favicon Generator makes the whole process painless. You start by selecting your favicon and uploading it to the generator. When the page loads, you’ll see different screens for the different device targets.

Several of these sections offer similar options, such as being able to supply a dedicated picture to target the device, adding margins around the icon and applying background colors. Below are the main screens you can adjust, one for iOS, one for Android and one for others (Windows / Safari) respectively.

Favicon for iOS Screen

Favicon for Android Screen

Favicon for Other Screen

Continue reading %Quick Tip: Add Favicons Quickly and Easily to Your HTML%


Source: Sitepoint