Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 

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.

About

Easily generate favicons for today's devices with Sketch.

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.