Hot File

How to Add Favicons Quickly and Easily to Your HTML

View: 357    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: HTML-CSS template   Fields: Other

9 point/2 review File has been tested

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.

Introduction

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

The visual interface makes tweaking your favicons easy, you can see exactly how your icon will appear when you pin your site to your device.

Besides actual favicons themselves, this generator will also handle the creation of a manifest file for mobile Chrome, along with other settings for pinnable tabs in Safari. These values are eventually turned into <meta> tags in the final output.

Using Your Favicons

When you’re ready to proceed, press the “generate” button. Once the page loads, it will give you the raw HTML you need to add to your site. Here’s an example of the output:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#cc0033">
<meta name="apple-mobile-web-app-title" content="Web Bird Digital">
<meta name="application-name" content="Web Bird Digital">
<meta name="msapplication-TileColor" content="#cc0033">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#cc0033">

The generator creates all of your <link> and <meta> tag elements based on the settings you provided earlier.

Now you just need to press the Favicon Package button to get your files. Once downloaded, just extract them somewhere and copy these icons to your site. As part of the generation process you can specify the directory if you will not be storing them on the site’s root location(for example storing them inside of a nested directory like /images/favicons).

Our Favicons Generated

Once you copy over your files and add your HTML to your site’s <head>, you’re good to go. When you pin your site on your device, your website will serve the best looking favicon to your users.

If you end up finding this service useful and find that it saves you time, you might consider donating a few dollars to them as a thank you (they even take Bitcoins!).

Extra Functions and Options

Besides generating favicons, the Real Favicon Generator service lets you check if your website is serving all the required favicons you need, giving you a breakdown of what you could be missing.

Favicon Checker

How to Add Favicons Quickly and Easily to Your HTML

How to Add Favicons Quickly and Easily to Your HTML Posted on 18-06-2016  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. 4.5/10 357

Comment:

To comment you must be logged in members.

Files with category

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd