SwissChecklist

Checklist: (del) Create Apple Web App (Touch) Icons and other Icons for different devices

Hi-res Favicon // Apple Touch Icons // Android Add-to-Homescreen Icon // Windows 8 Tile-Icon
  • PM: select required icons

    Show Details Show Substeps Show Substeps Show Substeps
  • hi-res Favicon

    Show Details Show Substeps Show Substeps Show Substeps
    For all Windows7 and Windows8-Desktop folder views
  • Windows 8 Tile Icon

    Show Details Show Substeps Show Substeps Show Substeps
    For the Metro-View in Windows 8
  • Apple Touch Icons

    Show Details Show Substeps Show Substeps Show Substeps
    For all Apple devices (Mac, iPhones, iPads, retina, non-retina)
  • Android Add-to-Homescreen Icon

    Show Details Show Substeps Show Substeps Show Substeps
    For all Android devices
  • send job to designer

    Show Details Show Substeps Show Substeps Show Substeps
  • Designer: create required icons in PS

    Show Details Show Substeps Show Substeps Show Substeps
    • Here is a detailed Factsheet:
    • Save the PNG-files to following folder: [Project Folder]/Design/Icons/
    • pay attention to the naming
  • hi-res Favicon

    Show Details Show Substeps Show Substeps Show Substeps
    Format: .png

    Resolutions:
    • 16x16
    • 32x32
    • 64x64
    • 256x256

    Special: Alpha channel is supported

    Naming: favicon-16.png, favicon-32.png, ...
  • Windows 8 Tile Icon

    Show Details Show Substeps Show Substeps Show Substeps
    Format: .png
    Resolutions: 144x144
    Special: Alpha channel is supported
    Naming: metrotile-144.png
  • Windows 8 Tile background color

    Show Details Show Substeps Show Substeps Show Substeps
    define a matching background color for this icon. It will be the Tile-color in Windows 8.
  • Apple Touch Icons

    Show Details Show Substeps Show Substeps Show Substeps
    Format: .png

    Resolutions:
    • 76x76
    • 120x120
    • 152x152
    • 180x180

    Special:
    • Alpha channel is NOT supported (becomes black)
    • Corners are rounded automatically by the iOS system (don't make corners)
    • In iOS lower than 7, a glass-overlay shall add automatically by the iOS system (don't make glass optics)

    Naming: apple-76.png, apple-120.png, ...
  • Android Add-to-Homescreen Icon

    Show Details Show Substeps Show Substeps Show Substeps
    Format: .png
    Resolutions: 192x192
    Special: Alpha channel is supported
    Naming: android-192.png
  • send job to webdesigner

    Show Details Show Substeps Show Substeps Show Substeps
  • Webdesigner: integrate required icons in the DNN skin

    Show Details Show Substeps Show Substeps Show Substeps
  • create and upload hi-res Favicon

    Show Details Show Substeps Show Substeps Show Substeps
    • open Greenfish Icon Editor Pro
    • add all hi-res Favicons: Icon -> import pages... (The files are located in: [Project Folder]/Design/Icons/)
    • generate one favicon.ico with all resolutions: File -> Save as... -> Save as type: Icon files
    • integrate it as usual in DNN 2sic:BUWeb - Create & integrate Favicon properly
  • for the other icons: copy files to server

    Show Details Show Substeps Show Substeps Show Substeps
    The files are located in: [Project Folder]/Design/Icons/
    Copy files to server: [SkinPath]/images/icons/
  • Windows 8 Tile Icon

    Show Details Show Substeps Show Substeps Show Substeps
    Add this code to Skin in the OnLoad function:
    AttachCustomHeader("<meta name='msapplication-TileImage' content='" + SkinPath + "images/icons/metrotile-144.png'/>");

    Add this code to Skin in the OnLoad function with the color from the designer:
    AttachCustomHeader("<meta name='msapplication-TileColor' content='#COLOR'/>");
  • Apple Touch Icons

    Show Details Show Substeps Show Substeps Show Substeps
    Add this code to Skin in the OnLoad function:
    AttachCustomHeader("<link rel='apple-touch-icon' sizes='76x76' href='" + SkinPath + "images/icons/apple-76.png' />");
    AttachCustomHeader("<link rel='apple-touch-icon' sizes='120x120' href='" + SkinPath + "images/icons/apple-120.png' />");
    AttachCustomHeader("<link rel='apple-touch-icon' sizes='152x152' href='" + SkinPath + "images/icons/apple-152.png' />");
    AttachCustomHeader("<link rel='apple-touch-icon' sizes='180x180' href='" + SkinPath + "images/icons/apple-180.png' />");
  • Android Add-to-Homescreen Icon

    Show Details Show Substeps Show Substeps Show Substeps
    Add this code to Skin in the OnLoad function:
    AttachCustomHeader("<link rel='icon' sizes='192x192' href='" + SkinPath + "images/icons/android-192.png' />");
  • Testing

    Show Details Show Substeps Show Substeps Show Substeps
  • Test the integrated icons

    Show Details Show Substeps Show Substeps Show Substeps
  • New Step

    Show Details Show Substeps Show Substeps Show Substeps
Use this Checklist

Preview/Print

Use

Change

Sort