Favicon

👋Become a member and get access to resources

^$19

Favicon

This is a favicon template that automates the process of rendering all favicon sizes for iOS, Android, Chrome & Microsoft browsers and devices.

Highlights

Render all favicon sizes from a two icon styles

Smart preview favicons in iOS, Android and browser contexts

One click export actions

Includes browserconfig.xml, head.html and site.webmanifest files for easy implementation

Compatibility

CC15+

Latest Version

How do I use this?

Photoshop Instructions

In the artboard named ‘Created Your Icons’ there are two Smart Objects. One for the favicon variants that need a transparent background and one for the favicon variants that work best with a solid background. Smart Object 1: Transparent Background Icon Smart Object 2: Solid Fill Icon You need to edit each of these two Smart Objects in order to create a complete set of favicons that work across all browsers and mobile device. To edit a Smart Object, right-click the layer of the Smart Object in the layers panel and click ‘Edit Contents’. This opens the a Smart Object. Create your favicon in the canvas and save. After saving this Smart Object, the multiple sizes in the main PSD file will automatically be rendered.