New
Favicon
Favicon
Icon Template
Current version 1.0
Current version 1.0
Quickly render all favicon sizes for iOS, Android, Chrome & Microsoft from a single size. One click export actions, exports every single size you need.
Quickly render all favicon sizes for iOS, Android, Chrome & Microsoft from a single size. One click export actions, exports every single size you need.
Download for Photoshop Download for Sketch
Highlights
Render all favicon sizes from a single size
Preview favicon across multiple platforms
One click export actions
Highlights
Render all favicon sizes from a single size
Preview favicon across multiple platforms
One click export
Compatibility
CC 15+
Compatibility
Sketch 3.0+
What's inside?
This is a Photoshop document that, through Smart Objects, automates the process of rendering the various sizes needed for favicons, used across browsers. The idea is to edit the largest size and have the smaller sizes automatically rendered, enabling a much quicker workflow when designing icons. Bundled with the template you’ll also find easy export actions that spit out the exact files you need to upload to your site.
How do I use it?
You’ll need Photoshop CC. Open the PSD file in Photoshop. Find and right click the layer called ‘Edit me & save’ and hit ’Edit Contents’. This opens the favicon.psb file - create your artwork in this canvas. After saving the favicon.psb, the multiple sizes in the Main PSD file should be automatically rendered. Use the Photoshop Actions bundled with the resource to export your icon files in all of the required sizes.
Why does it cost money?
To ensure an up-to-date and growing collection of carefully crafted designer tools, access to this resource is reserved for subscribing members. It only takes a minute to sign up and membership is a low fee that can be cancelled any time. Your support makes this resource and several other resources sustainable. Learn more about membership by going to the sign up page.
What's inside?
This is a sketch document that, through symbols, automates the process of rendering the various sizes that needed to display a favicon on your website across multiple platforms and in multiple textures. The idea is to edit the largest size and have the smaller sizes automatically rendered, enabling a much quicker workflow when designing favicons. Hit export and it spits out every single size you need, correctly named. Use the included configuration files to easily configure your favicon.
How do I use it?
Open the Sketch file and double click the favicon. This takes you to the symbols page where you can edit the master symbols. All changes here are propagated through the many sizes. Once you're done go to file -> Export.
Why does it cost money?
To ensure an up-to-date and growing collection of carefully crafted designer tools, access to this resource is reserved for subscribing members. It only takes a minute to sign up and membership is a low fee that can be cancelled any time. Your support makes this resource and several other resources sustainable. Learn more about membership by going to the sign up page.
Join the
Newsletter
Monthly emails with new resources
First name
Email
 
No spam. Ever. Unsubscribe with a single click.