Favicon generation + Example integration in rails view

README.md

Needs imagemagick + pngquant

• put a high res (at least 310x310) favicon_logo_big.png in the same folder as source.sh,
• run it bash source.sh
• move the bunch into your assets folder, e.g. app/assets/images/favicons
• See the attached application.slim for example on how to link it.

application.slim

  link rel="shortcut icon" href=image_path('favicons/icon.ico')
  link rel="icon" href=image_path('favicons/icon57.png') type="image/png"
  / non-retina iPhone pre iOS 7 -->
  link rel="apple-touch-icon" href=image_path('favicons/icon57.png') sizes="57x57"
  / non-retina iPad pre iOS 7 -->
  link rel="apple-touch-icon" href=image_path("favicons/icon72.png") sizes="72x72"
  / non-retina iPad iOS 7 -->
  link rel="apple-touch-icon" href=image_path("favicons/icon76.png") sizes="76x76"
  / retina iPhone pre iOS 7 -->
  link rel="apple-touch-icon" href=image_path("favicons/icon114.png") sizes="114x114"
  / retina iPhone iOS 7 -->
  link rel="apple-touch-icon" href=image_path("favicons/icon120.png") sizes="120x120"
  / retina iPad pre iOS 7 -->
  link rel="apple-touch-icon" href=image_path("favicons/icon144.png") sizes="144x144"
  / retina iPad iOS 7 -->
  link rel="apple-touch-icon" href=image_path("favicons/icon152.png") sizes="152x152"
  / Win8 tile -->
  meta name="msapplication-TileImage" content=(image_path( "favicons/favicon-144.png" ))
  / Your brand color
  meta name="msapplication-TileColor" content="#a2c309"
  meta name="Your Website name" content="name"

  / IE11 tiles -->
  meta name="msapplication-square70x70logo" content=image_path("favicons/icon70.png")
  meta name="msapplication-square150x150logo" content=image_path("favicons/icon150.png")
  meta name="msapplication-wide310x150logo" content=image_path("favicons/tile-wide.png")
  meta name="msapplication-square310x310logo" content=image_path("favicons/icon310.png")

source.sh

#!/bin/bash

arr=(57 72 76 114 120 144 152 70 150 310)
cur=$PWD
for i in "${arr[@]}"
do
  filename="icon${i}.png"
  command="convert favicon_logo_big.png -resize ${i}x${i}> -size ${i}x${i} xc:none +swap -gravity center -composite $filename"
  echo $command
  `${command}`
  pngquant -f $filename --output $filename
done

convert favicon_logo_big.png -resize "32x32>" -size 32x32 xc:none +swap -gravity center -composite icon.ico