Favicons се появяват за първи път в Internet Explorer 5, където поставянето на favicon.ico, предизвиква изображението да се появи до url в адрес бара, без да се изисква html. Докато много по-големи размери могат да бъдат използвани тези дни, 16 пиксел версия е от съществено значение и идеално място да започнете, ако сте начинаещ в създаването на икони.
Преди да започнем с проектирането на каквато и да е икона, трябва да знаем как и къде ще бъде използвана. Подразделите по-долу обхващат различни съображения:
- Какъв е контекстът?
- Какви размери са необходими?
- Кои формати са нужни?
Контекст
Favicon може да се появи върху различни среди, таке че трябва да използваме прозрачността. Не винаги адрес бара ще има бял фон, Firefox 4 добавя сив фон в адрес бара.
Размери
Ако се наложи да създадете favicon за всяка възможна употреба, ще ви трябват следните размери:
- 16 пиксела: Обща употреба във всички браузъри
- 24 пиксела: Toolbar в Internet Explorer 9
- 32 пиксела: Нов раздел в Internet Explorer, Pinned Site в Windows 7
- 57 пиксела: Стандартен ios начален екран (iPod Touch, IPhone)
- 72 пиксела: iPad иконата на началния екран
- 96 пиксела: Favicon, използва се от платформата Google TV
- 114 пиксела: iPhone 4 (два пъти по-голяма за ретина дисплея)
- 128 пиксела: Chrome Web Store
- 256x160 пиксела: Opera Speed Dial
Наистина ли са необходими всичките тези формати? Както винаги, това зависи от контекста. Софтуерна компания за Mac и iOS ще се възползват от различните iPad и iPhone икони, докато интранет сайт показван само през Internet Explorer, ще бъде по-добре използването на multi-resolution ico формат. Уеб приложение, предназначено за мобилна и десктоп среда може да се възползва от създаването на всички размери.
Най-малкото което може да се направи е да имате 16 пиксела favicon, която е от съществено значение, за да се избегне иконата на браузера по подразбиране. При липса на такава, се счита за пропусната възможност разширяване марката на сайта. Също така се създават проблеми при сайтове с висок трафик, тъй като сървърът ще генерира 404 грешка за всяка заявка. Firefox помни сайтове с липсващи favicons и не ги изисква отново, но за съжаление е единственият браузер.
Формати
В началото, когато Windows ico формата беше единственият поддържан файл, имаше трик при който записваме 16х16 gif и го преименуваме на .ico файлово разширение. Този хак работеше. Днес не трябва да използваме подобни методи при създаване на ico файл. Може да намерим достатъчно програми и онлайн приложения за това. Има два формата които се поддържат и заслужават да бъдат разгледани:
ICO формата е все още масово използван. За разлика от png може да съдържа множество резолюции, което е полезно под Windows. Internet Explorer използва различни размери favicons, като ico е единственият начин да се справим с това. Този формат може да бъде разпознат, без намесата на <link> елемента.
PNG е по-удобен, не изисква специални инструменти, поддържа алфа прозрачност и е възможно най-оптимизиран. Единственият недостатък е, че Internet Explorer, не го поддържа.
Обобщение
В абсолютният минимум, на лице трябва да е 16 пиксела favicon.ico файл, вместо браузера да използва собствена икона по подразбиране. Сайта ще изглежда по-добре а марката подсилена. При липса на favicon се увеличава броят на http заявки, проблем при сайтове с висок трафик. Може да не е необходимо наличието на всички засегнати размери, препоръчително е да има 16 и 128 пиксела favicon.