├── Favicon Creator.atn
├── Favicon Sketch.sketch
├── Favicon Creator.workflow
    └── Contents
    │   ├── QuickLook
    │       └── Preview.png
    │   └── Info.plist
├── Favicon HTML-Browser XML Generator Bookmark.webloc
└── ReadMe.md


/Favicon Creator.atn:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuzzywalrus/Photoshop-FavIcon-Action/HEAD/Favicon Creator.atn


--------------------------------------------------------------------------------
/Favicon Sketch.sketch:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuzzywalrus/Photoshop-FavIcon-Action/HEAD/Favicon Sketch.sketch


--------------------------------------------------------------------------------
/Favicon Creator.workflow/Contents/QuickLook/Preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuzzywalrus/Photoshop-FavIcon-Action/HEAD/Favicon Creator.workflow/Contents/QuickLook/Preview.png


--------------------------------------------------------------------------------
/Favicon Creator.workflow/Contents/Info.plist:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
3 | <plist version="1.0">
4 | <dict>
5 | 	<key>CFBundleName</key>
6 | 	<string>Favicon Creator</string>
7 | </dict>
8 | </plist>
9 | 


--------------------------------------------------------------------------------
/Favicon HTML-Browser XML Generator Bookmark.webloc:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
3 | <plist version="1.0">
4 | <dict>
5 | 	<key>URL</key>
6 | 	<string>https://codepen.io/antonyoneill/pen/XeYzeo</string>
7 | </dict>
8 | </plist>
9 | 


--------------------------------------------------------------------------------
/ReadMe.md:
--------------------------------------------------------------------------------
  1 | # Favicon Creator Action for the Obsessive
  2 | 
  3 | FavIcons today are plentiful, ranging a variety of sizes, however wrangling them all in is a pain. This project includes a simple Photoshop action, sketch file with predefined exports, and macOS Automator script that creates 14 favicon sizes based on the current standards. 
  4 | 
  5 | I highly recommend (albeit dated) [favicon cheat sheet](https://github.com/audreyr/favicon-cheat-sheet) and [Apple's Configuring Web Applications](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html) and [The Web App Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/) for more information.
  6 | 
  7 | # Photoshop Favicon Creator for the Obsessive.
  8 | 
  9 | ## Installing the action
 10 | 
 11 | In Photoshop (under actions), click the menu and locate "Load Action," this will bring up the OS dialog box. Locate the Favicon Creator.
 12 | 
 13 | ## Using the action
 14 | 
 15 | The default image must be square and above 228 x 228 pixels (I recommend personally recommend using higher than this). Click play, and the action will create 13 icon sizes in PNG.
 16 | 
 17 | 
 18 | # Sketch Export for the Obsessive
 19 | 
 20 | Open the sketch, and replace the content with your content. 
 21 | 
 22 | ## Using the export
 23 |  The predefined exports will appear in the export panel.  
 24 | 
 25 | 
 26 | #### Optional but recommended: Optimization
 27 | 
 28 | Unoptimized PNGs from Photoshop tend to be quite large. I highly recommend for macOS users the free application [ImageOptim](https://imageoptim.com/mac) for lossless PNG compression. It's brainlessly easy. Drag and drop all the newly created PNGs to shave off valuable KBs off images without any quality hit.
 29 | 
 30 | For the more obsessive, macOS users, [ImageAlpha](https://pngmini.com/) (works in tandem with ImageOptim) allows users to use indexed color profiles even further to reduce file sizes. [PNGquant](https://pngquant.org/) works natively from Photoshop, and [TinyPNG](https://tinypng.com/) provides free service usable from your web browser. Lastly, [ImageSquash](https://www.realmacsoftware.com/squash/) by RealMac offers a commercial alternative. See [favicon cheat sheet](https://github.com/audreyr/favicon-cheat-sheet) for CLI utilities.
 31 | 
 32 | 
 33 | ## Required HTML
 34 | 
 35 | 
 36 | To use these icons, you will want to include in the `<head></head>` of your HTML file the appropriate linking.
 37 | 
 38 | 
 39 | ```html
 40 | <!-- generics -->
 41 | <link rel="icon" href="/path/to/favicon-32.png" sizes="32x32">
 42 | <link rel="icon" href="/path/to/favicon-128.png" sizes="128x128">
 43 | <link rel="icon" href="/path/to/favicon-192.png" sizes="192x192">
 44 | 
 45 | <!-- Android -->
 46 | <link rel="shortcut icon" href="/path/to/favicon-196.png" sizes="196x196">
 47 | 
 48 | <!-- iOS -->
 49 | <link rel="apple-touch-icon" href="/path/to/favicon-152.png" sizes="152x152">
 50 | <link rel="apple-touch-icon" href="/path/to/favicon-167.png" sizes="167x167">
 51 | <link rel="apple-touch-icon" href="/path/to/favicon-180.png" sizes="180x180">
 52 | ```
 53 | 
 54 | ## Included Icons
 55 | 
 56 | 
 57 | Size | Name | Purpose
 58 | ---- | ---- | -------
 59 | 32x32  | favicon-32.png | Certain old but not too old Chrome versions mishandle ico
 60 | 120x120 | favicon-120.png | iPhone retina touch icon (Change for iOS 7: up from 114x114) - depreciated
 61 | 128x128 | favicon-128.png | Chrome Web Store icon
 62 | 128x128 | smalltile.png  | Small Windows 8 Star Screen Icon
 63 | 152x152 | favicon-152.png | iPad touch icon (Change for iOS 7: up from 144x144)
 64 | 167x167 | favicon-167.png | iPad Retina touch icon (change for iOS 10: up from 152x152)**
 65 | 180x180 | favicon-180.png | iPhone 6 plus
 66 | 192x192 | favicon-192.png | Google Developer Web App Manifest Recommendation for Chrome
 67 | 196x196 | favicon-196.png | Chrome for Android home screen icon
 68 | 270x270 | mediumtile.png |  Medium Windows 8 Start Screen Icon *
 69 | 558x270 | widetile.png  |  Wide Windows 8 Start Screen Icon *
 70 | 558x558 | largetile.png  |  Large Windows 8 Start Screen Icon *
 71 | 
 72 | 
 73 | Depreciated 
 74 | 
 75 | Size | Name | Purpose
 76 | ---- | ---- | -------
 77 | 57x57  | favicon-57.png | Standard iOS home screen (iPod Touch, iPhone first generation to 3G) - depreciated *
 78 | 76x76  | favicon-76.png | iPad home screen icon - depreciated *
 79 | 96x96  | favicon-96.png | GoogleTV icon - depreciated *
 80 | 114x114 | favicon-114.png | iOS7 Retina - depreciated *
 81 | 144x144 | favicon-144.png | IE10 Metro tile for pinned sites - iPad pre-iOS 10 - depreciated *
 82 | 195x195 | favicon-195.png | Opera Speed Dial icon (Not working in Opera 15 and later) - depreciated *
 83 | 228x228 | favicon-228.png | Opera Coast icon - depreicated *
 84 | 
 85 | * *Denotes not included in this action
 86 | * **Denotes not included in this action but planned in the future. iOS will fallback to the 152x152
 87 | 
 88 | ## Further notes
 89 | 
 90 | For IE 10 and older browsers, you will still need to create a favicon.ico if you elect to include a favicon.ico, currently, Safari will default to the favicon.ico over the PNG. I highly recommend the following [How to Create Retina-Caliber Favicons](https://daringfireball.net/2013/01/retina_favicons) to preserve retina icons for Safari.
 91 | 
 92 | Google also has declarations in a manifest.json file, [Web App Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/).
 93 | 
 94 | ### Don't forget OpenGraph images & Twitter Card images
 95 | 
 96 | Favicons are only part of the preview game for your website, be sure to include Twitter Card and Facebook OpenGraph data for much more social media-friendly sharing of your website/web app. Apple's Messages, Slack, and other popular communication applications use these for Rich Media Previews. For both Twitter:card and OG tags to work, they both require more than just the images. Image requirements are linked below.
 97 | 
 98 | [Facebook Best Practices for Images practices](https://developers.facebook.com/docs/sharing/best-practices#images)
 99 | 
100 | [Twitter Summary Card with Large Image](https://dev.twitter.com/cards/types/summary-large-image)
101 | 
102 | [How to add iMessage Rich Video Previews to your website](https://www.emergeinteractive.com/insights/detail/rich-video-previews-in-ios-macos-messages)


--------------------------------------------------------------------------------