Easily generate favicons for today's devices with Sketch.
Switch branches/tags
Nothing to show
Clone or download
Latest commit cc94b05 Oct 18, 2017
Permalink
Failed to load latest commit information.
LICENSE initial commit Dec 28, 2015
README.md Update README.md Oct 15, 2017
favicon-exporter.sketch initial commit Dec 28, 2015

README.md

Sketch Favicon Exporter

Sketch Favicon Exporter

What does it do?

The Sketch Favicon Exporter is a Sketch template to easily generate all the necessary favicons for today's devices.

The template generates 4 sets of favicons:

  1. iPhone specific icons

  2. Android specific icons

  3. Windows mobile specific icons

  4. Browser specific icons

Installation

Just download the source and open the favicon-exporter.sketch file with Sketch. Go to File > Save as Template... and give it a name.

From now on, you can access the template via File > New from Template.

Usage

Add your assets to the different artboards (with the bigger ones you can add more detail) and export via Share > Export....

HTML

Use this piece of HTML in your code to add the favicons.

<link rel="apple-touch-icon" sizes="57x57" href="/images/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/images/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/images/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/images/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/images/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/images/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/images/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicons/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

Credits

Frederik Jacques, frederik@the-nerd.be

License

Sketch Favicon Exporter is available under the MIT license. See the LICENSE file for more info.