Favicon Generator
  • Favicon
    • Favicon generator
    • SVG Favicon
    • Favicon checker
    • Favicon generator for Gulp
    • Favicon generator for Grunt
    • Favicon generator for Ruby on Rails
    • Favicon generator for Node.js CLI
    • Favicon generator for ASP.NET Core
    • Favicon generator for Google Web Starter Kit
  • Social
    • Social generator
    • Social checker
  • API
    • API introduction
    • Favicon generation interactive API
    • Favicon generation non-interactive API
    • Download the favicon of a website
    • Favicon analysis
    • Web components
  • Contribute
    • Report an issue
    • Compatibility test
    • Donate
  • Misc
    • FAQ
    • Change log
    • Compatibility
    • Extensions
    • Blog
    • Contact us
    • Newsletter
    • Terms of service
    • Privacy policy
    • Cookies

Web Components

For CMS Plugin Editors and Website Builder Editors

A the editor of a CMS plugin or a web suite builder, you let your users design their own websites, blogs or online stores. They can make a choice among many themes, create pages, link their site to their analytics system...

Among all the aspects that need to be addressed, two are always overlooked:

Facebook metadata
When a visitor browses a website and shares a page on Facebook, the social network fetches the page and looks for various metadata (title, description...) to show the page to the visitor's FB friends.
Favicon and related icons
The favicon is that small icon to the left of the page title in browsers tabs. Although they are not called "favicon", there are other icons such as the one used when a visitor adds a page to the home screen on his Android phone, or the icon that appears in the Touch Bar of the recent MacBook Pro.

The problem

All platforms support these two topics. A favicon.ico is created. A title is provided. However, this support is always minimalist, well behind what website designers are entitled to expect nowadays.

Facebook

What your users have What your users deserve
Basic Facebook metadata
Advanced Facebook metadata
Image to illustrate the shared page
Image width and height
Image complies to Facebook requirements
Manual image resizing and cropping
Enforce page sharing format
Live preview

Favicon

What your users have What your users deserve
Favicon for desktop browsers
Favicon for iPhone & iPad
Favicon for Android
Favicon for Windows 10
Favicon for Mac OS
Icon designed platform-per-platform
Live preview
Permanent preview

We can help

Creating a compelling editor is a tedious task. You need to:

  • Provide a comprehensive UI to your users
  • Provide live feedback so your user can design their icons and understand how they will look like
  • Build preview images so anytime your users can find out how their icons look like
  • Implement not-that-obvious image manipulation. No, it's not only a matter of scaling down an image
  • Reverse engineer the Facebook algorithm which present shared pages in its newsfeed (no, this is not documented).
  • ...

RealFaviconGenerator already did the hard work by implementing the ultimate favicon generator. Good news: your users can benefit from the same experience and features.

You can embed RealFaviconGenerator's components in your own website builder solution and customize it to offer your users the ultimate, seemless experience they deserve.

The components

Our components, your User Experience

As a website builder editor, you already provide a consistent experience to your users. This UX relies on a UI and techologies you have chosen with care.

RealFaviconGenerator provides the components and sample code you need to easily create the favicon builder that suits your existing solution.

Facebook

Favicon

Transparent API

The favicon generation itself is triggered by a simple JavaScript call and performed by our infrastuctures. No complex image manipulation for you.

When it's done, you receive the files and HTML code you will inject in the built website pages.

User feedback

In addition to the favicon material itself, you get sample screenshots showing how the generated images look like on iOS, Android and others. You can present them to your users as a reference.

Tutorial

Components are still under development. Although the overall API should not change much, some non-backward compatible changes might occur.

If you want to be notified when the components become production-ready, please subscribe to the mailing list.

Get an API key

In order to build the full solution, including the actual image and code generation, you need an API key. However, if you only want to see the editor in action, you can skip this step.

Creating or finding your API Key...

Set up the component

Get the demo

To use the component demo, clone the demo project and open index.html.

How it works

The following scripts must be loaded, preferably at the bottom of the page:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://realfavicongenerator.net/web-components/js/core.min.js"></script>
<script src="https://realfavicongenerator.net/web-components/js/facebook.min.js"></script>

The editor itself can be initialized via a simple line:

var fb = new RFGFacebook({
  element: $('#facebook-editor'),
  master_image_src: 'sky.jpg',
  format: 'wide',
  title: 'Default title',
  description: 'Default description',
  url: 'http://www.example.com/a_page'
});

The rest of the code is about creating the surrounding UI. Most likely, a form where the user can type the post title and description, etc. Look at index.html in the demonstration for an example.

Generate the image and code

Once the user has designed his Facebook metadata and image, the final picture and markups must be generated. This is done with the help of RealFaviconGenerator API, which handles all the nitty gritties:

var request = fb.getApiRequest();

It is up to you to get this request server-side, where you will be able to run it, handle the response and store the generated markups and image. You can achieve this with an Ajax call or a classic form hidden field.

Server-side, you will want to inject your own RFG API key. You can do this by searching RealFaviconGenerator_API_KEY_Placeholder in the request and replace it with your API key.

Once the request is ready, post it to https://api.realfavicongenerator.net/v1/social and handle the response (ie. store the HTML fragment and generated image).

Beta registration

This feature is still under development. If you are interested, please fill the form below. We will drop you an email as soon as it is ready.

* indicates required

Of course, you can unsubscribe anytime. And you will receive only emails about web components.

  • Overview
  • Tutorial
    • Get an API Key
    • Setup the component
    • Generate the image and code
  • Mailing List
Favicon Generator
Favicon Checker
Favicon for Gulp
Favicon for Grunt
Favicon for Ruby on Rails
Favicon for Node.js CLI
Favicon for ASP.NET Core
Favicon for Google Web Starter Kit
FAQ
Blog
Report bug
Change Log
Compatibility
Extensions
API
Compatibility Test
Contact us
Donate
Newsletter
Terms of service
Privacy policy
Cookies
RealFaviconGenerator.net © 2013-2022