Ukázkový banner
Nějaký hloupý text, který lze k banneru napsat
Slušně zbouraný auto
Slušně zbouraný auto
Test blockquote
aaa
How to Create Favicons for Your Website
Once upon a time, creating a favicon only required making a single 16×16 pixel icon, and placing it in the root directory of a website. This still works today, albeit with some caveats.
With modern devices, displays tend to feature high density (retina) displays. These devices and displays feature more pixels per square inch. The end result is much sharper text and images. Generally, graphics need to be optimized for high-resolution displays. The classic 16 x 16 pixel favicon appears pixelated on these devices and displays; thus, additional steps are needed. To make matters more confusing, many newer devices, for example, iOS and Android, have their preferred favicon replacements.
This is a how-to guide for creating favicons for (almost) every conceivable browser.
The goal is to provide the best results (non-pixelated) with the least amount of work, and most importantly, maintaining one’s sanity while doing so.
Image: NPR.org does not have a retina display favicon thus it appears pixelated
Specific interests? Here’s what we cover in this article:
- A brief history of the favicon.ico
- A (mostly) complete list of all the known Favorite Icon Sizes
- Why not SVGs?
- Sanity Check: Photoshop / Automator utilities
- What these utilities will not do
- Downloading the Photoshop / macOS Automator / Sketch Template
- How To Install Favicon Photoshop Action
- Using the Photoshop Action
- Using the automator Action
- Using the Sketch Template
- Optimization
- Supporting IE6 – IE10 (and the Safari problem)
- Using IconSlate to Create a Retina Favicon
- Online HTML + XML generator
A brief history of the Favicon.ico
The Favicon was originally introduced in March 1999 by Microsoft alongside Internet Explorer 5’s new “Favorites” tab. Microsoft’s nomenclature dubbed bookmarks in Internet Explorer as “Favorites”. Bookmarks in the favorites tab had the option of including a favorite icon next to each URL. If a website had a favicon.ico file placed in the root directory of its domain, the favorite bookmark entry would include the custom icon. Shortly after, in 2000, the World Wide Web Consortium (W3C) adopted the favicon for the HTML 4.0 (with intentionally vague specifications).
As early as 2001, web browsers began to adopt the favicon next to the URL and soon became ubiquitous across the web, migrating to the now-familiar browser tabs. Later, both Firefox and Safari added PNG support for Favicons, marking the first major change to the Favicon format. In 2008, after the launch of the initial iPhone, the favicon took one more major turn after Apple introduced the “apple-touch-icon.png”, a higher resolution version of the favicon used for pinning to iOS’s dock. This created the precedent for multiple favicon sizes and helped cement PNG as the preferred format over Microsoft Windows’ ICO file format.
The W3C, Recognizing the necessity for versatility, in HTML5 included a standard for multiple sizes for the favicon, which proliferated due to high-density displays, new operating system user interfaces, browser changes, and mobile devices. Today we have custom favicons for everything from Google TVs to Microsoft Windows Metro tiles.
A (mostly) complete list of all the known Favorite Icon Sizes
Below is a compiled list of the current known favorite icon sizes, this list is based on the Favorite Icon Cheat Sheet. The greyed out are once legacy favicons, that can still be used but are no longer supported. Due to age, these have been eliminated from the favicons project.
| Size | Name | Purpose |
| 32×32 | favicon-32.png | Standard for most desktop browsers |
| 128×128 | favicon-128.png | Chrome Web Store icon & Small Windows 8 Star Screen Icon* |
| 152×152 | favicon-152.png | iPad touch icon (Change for iOS 7: up from 144×144) |
| 167×167 | favicon-167.png | iPad Retina touch icon (change for iOS 10: up from 152×152, not in action. iOS 10 will use 152×152) |
| 180×180 | favicon-180.png | iPhone Retina |
| 192×192 | favicon-192.png | Google Developer Web App Manifest Recommendation |
| 196×196 | favicon-196.png | Chrome for Android home screen icon |
Depreciated Favicons
| Size | Name | Purpose |
| 57×57 | favicon-57.png | Standard iOS home screen (iPod Touch, iPhone first generation to 3G) |
| 76×76 | favicon-76.png | iPad home screen icon |
| 96×96 | favicon-96.png | GoogleTV icon * |
| 120×120 | favicon-120.png | iPhone retina touch icon (Change for iOS 7: up from 114×114) |
| 144×144 | favicon-144.png | IE10 Metro tile for pinned site* |
| 195×195 | favicon-195.png | Opera Speed Dial icon (Not working in Opera 15 and later) |
| 228×228 | favicon-228.png | Opera Coast icon |
- 7 favicons
- Links in your website’s <head> tag for each size
- A special XML file for Windows’ (8.1 and above) start menu tiles ( IE11+ and Windows 10 requires a browserconfig.xml.)
Why Not SVGs?
Some readers looking at this list may be wondering about Scalable Vector Graphics (SVG) as a smarter solution instead of generating icons at every conceivable resolution, as icons are one of the best use cases for vector imagery. As of writing this only Firefox and Safari support SVG favicons (with some caveats) See CanIuse.com for more details.
(Author’s note: while writing this, after checking about 50 major websites, Instagram was the only site that had an SVG favicon option on its website)
Sanity Check: Photoshop / Automator Actions / Sketch Template
I’ve created three separate ways to generate 14 favicon sizes. The three options are as follows:
- Photoshop Action – If you have Adobe Photoshop, this will allow you to use a Photoshop action to generate 14 icons from a source file quickly. Photoshop Actions allow Photoshop to perform automated tasks like resizing and exporting files.
- Automator – macOS/OS X provides an OS-level scripting utility that allows one to automate tasks such as moving/renaming files or tapping into various application functions like Preview. I’ve created an automator script that will perform the same functionality as the Photoshop action. The advantage is this does not require Photoshop but does require a Mac.
- Sketch Template – This is the least automated function. It is a blank template with all the exports set up with the 14 separate sizes. Simply paste the icon within the guides and hit export, and it will export all 14 favicon sizes as PNGs.
What you need absolutely need:
- A square PNG image, 228 x 228 or greater.
- Photoshop (Win/Mac) or macOS/OS X or Sketch
Nice to have:
- An Image with an Alpha layer (transparent background)
Supported Browsers:
Downloading the Photoshop / macOS Automator / Sketch Template
You can either go to the github project found here or click the direct download link.
How To Install Favicon Photoshop Action
- Download the Photoshop Action and double click to decompress
- In Photoshop in the actions menu, click the hamburger menu and select load actions
- Locate the Favicon Creator
Using the Photoshop Action
The default image must be a square and above 228 x 228 pixels (I recommend using a higher resolution source image). Open the image you’d like to use for your favicon. Click play, and the action will create 14 icon sizes in the PNG format.