Application Icon Formats

README.markdown

App Icon Generator

Quickly generate web, mobile and social icons.

Introduction

Your new project needs icons. Different platforms have different icon guidelines. This project seeks to condense those requirements into a single script that handles all the technical guidelines.

Provide the script a single image and it will generate everything you need.

Usage

Provide the script a single square image, and it appcons.sh output correctly named and formatted images.

./appcons.sh wetalky.png

I recommend feeding the script an image that is at least 350x350 pixels.

Reference

Apple

Apple iOS Icon Guidelines

Open Graph

An image URL which represents your object within the graph.

Open Graph

Facebook Page

Facebook Meta Tag Icon

Twitter

Twitter doesn't provide specific guidelines.

Favicon

Favicon Icon Guidlines

Origins

I was inspired to create this project when I realized I was spending an inordinate amount of time resizing images whenever our designer updated the WeTalky mascot.

Contributing

Contributions to the project are most welcome, so feel free to fork and improve!

appcons.sh

#!/bin/bash

# Make sure directory exists.
if [ ! -d "${PWD}/generated" ]; then
	mkdir -p ${PWD}/generated
	mkdir -p ${PWD}/generated/ios
	mkdir -p ${PWD}/generated/social
	mkdir -p ${PWD}/generated/www
fi

# Ideally should be a square image.
# I recommend at least 350x350 pixels
SOURCE_IMAGE=$1

## iOS ICONS

# iOS application icon (required)
sips --resampleHeight 57 $SOURCE_IMAGE --out ${PWD}/generated/ios/ios-application-icon-57x57.png &> /dev/null
sips --resampleHeight 114 $SOURCE_IMAGE --out ${PWD}/generated/ios/ios-application-icon-114x114.png &> /dev/null

# iOS settings/search results icon
sips --resampleHeight 29 $SOURCE_IMAGE --out ${PWD}/generated/ios/ios-search-settings-icon-29x29.png &> /dev/null
sips --resampleHeight 58 $SOURCE_IMAGE --out ${PWD}/generated/ios/ios-search-settings-icon-58x58.png &> /dev/null

# iPad application icon (required)
sips --resampleHeight 72 $SOURCE_IMAGE --out ${PWD}/generated/ios/ipad-application-icon-72x72.png &> /dev/null

# iPad search results icon
sips --resampleHeight 50 $SOURCE_IMAGE --out ${PWD}/generated/ios/ipad-search-50x50.png &> /dev/null

## SOCIAL WEB ICONS

# Facebook Page
sips --resampleHeight 350 $SOURCE_IMAGE --out ${PWD}/generated/social/facebook-page.png &> /dev/null

# Twitter
sips --resampleHeight 250 $SOURCE_IMAGE --out ${PWD}/generated/social/twitter-avatar.png &> /dev/null

## WEB ICONS

# Open Graph
sips --resampleHeight 250 $SOURCE_IMAGE --out ${PWD}/generated/www/open-graph.png &> /dev/null

# Favicon
sips --resampleHeight 16 $SOURCE_IMAGE --out ${PWD}/generated/www/favicon.png &> /dev/null

# Apple Touch Icon
sips --resampleHeight 114 $SOURCE_IMAGE --out ${PWD}/generated/www/apple-touch-icon.png &> /dev/null