Кто-то делает дело, потому что это быстро и «нетрудно», кто-то делает это только потому, что это популярно и в последствии прибыльно, кто-то просто делает Своё Дело.

Представляю Вам один из лучших сервисов по созданию Favicon - FavIcon from Pics 2.0

Думаю, все Вы замечали одну из небольших, но очень забавных деталей, говорящих иногда очень много о сайте и ресурсе в целом. Тем, кто малознаком с сайтостроительством скорее всего ничего не скажет такое название как favicon.ico, но во всяком случае даже они в курсе, что при добавлении сайта в закладки браузера и просто при его просмотре в окне рядом с названием ресурса часто красуется личико сайта – этот самый favicon.ico.

Если сказать точнее: Favicon (FAVorites ICON — значок для избранного, произошло от названия папки с закладками в IExplorer), причем до 7й версии эксплорера, он отображался только в избранном и благодаря этому администраторы серверов могли узнать, сколько пользователей создало закладку на их сайт.

Сегодня вы узнаете:
1/ Как можно сделать отличный, качественный favicon.ico?

2/ Какой сервис создания иконок для сайтов справиться лучше всего с созданием личика сайта (именно с созданием favicon)?

3/ Как пользоваться этим сервисом и что он умеет ещё, кроме создания иконок favicon.ico?

4/ Как установить себе на сайт favicon.ico?

5/ Как сделать анимированный favicon.ico?

Это конечно далеко не все вопросы, которые касаются иконок сайтов, но думаю они самые основные).

Начну с того, как я наткнулся на этот онлайн сервис.

Задача передо мной стояла самая простая – сделать иконку для itpride.net, именно эта иконка сейчас установлена на этом сайте. Перепробовав несколько сайтов по созданию favicon.ico, я уже начал было подумывать скачать программу с софтпортала, что-то по типу any2icon, но подумав о том, что «качать mail-сервер для отправки одного письма» это слишком, полез дальше в дебри выдачи google и вот нашел отличный сервис, где можно легко создать качественный favicon.ico.

Называется он - FavIcon from Pics, его скрин Вы видели в начале этого рассказа. Для непосвященного в английский язык (а сервис именно английский) он возможно вызовет некоторые трудности, которые мы сейчас попробуем решить.

Интерфейс сначала довольно простой, мы видим две кнопки для создания иконок favicon.ico. В первом случае Мы можем загрузить исходное изображение с компьютера, во втором – при наличии аккаунта в Twitter просто вводим своё твитер-имя и сервис берёт изображение с Вашего аватара (безумно удобно иногда).

Я выбрал первый вариант и загрузил изображение нашей иконки в разрешении 1000х1000(как Вы могли догадаться сервис не устанавливает ограничений на разрешение) и ко всему прочему, сделать favicon он может из любого типа графики, кроме специфических (типа RAW и т.д).
После нажатия кнопки Generate Favicon.ico (1, кстати обратите внимание, что название изменилось на Add Another…, т.е. приглашение добавить ещё одно изображение) Мы уже можем забрать готовую работу по ссылке Download Favicon Package (2).

Кстати, сервис сразу создает анимированную версию favicon с повтором логотипа.

Вот этот скрин, но уже поближе. Обратим внимание на список того, что мы можем ещё сделать с помощью сервиса по созданию favicon. Перевод сверху вниз (8 пунктов):

1/ Изменение цвета, добавление текста, редактирование анимации, создание дополнительных иконок для iPod и другие полезности…
2/ Посмотреть состав архива (обычно 2 файла иконок и файл со сведиями о компании)
3/ Посмотреть на работу favicon в браузере(превью так сказать)
4/ Интересная фича (типа валидация иконки, может кто-то и захочет)
5/ Добавить свой favicon в галерею (Может Вы художник и тысячи пользователей будут использовать именно ваш favicon, кстати у них недурная галлерея)
6/ Написать отзыв о работе
7/ Загрузить только favicon.ico
8/ Загрузить только анимированную версию favicon

Итак, если Вам этого было мало, можете нажать ссылку EDIT под анимированной версией иконки для перехода к редактированию анимированной версии favicon. Тут нас ждет не менее широкий список фич, а именно 10 после слов customization…

Что ещё можно поделать тут с favicon:
1/ Добавление текста к анимации (прокрутка), а также управление добавленными картинками (чуть позже подробнее)
2/ Цвет текста в анимации (наверное потом добавят и шрифт)
3/ Удалить анимацию из архива
4/ Добавить в архив иконку для iPod
5/ Выбор цвета подложки (бэкграунд) favicon
6/ Добавить бордюр иконке, по простому рамка для favicon
7/ Сделать подложку прозрачной
8/ Конвертация в черно-белый вариант
9/ Добавить иконки других размеров(16х16 256 цветов, 16х16 64К цветов …)
10/ Удалить дополнительные иконки из архива

Остальные пункты смотрите выше, мы их уже описали.

Вот так, кстати, выглядит выбор цвета для анимированного текста favicon.

А теперь Вы видите, что в архив добавились favicon формата 32х32 (1), а также иконка для iPod(2), видно конечно слабо, но синий бордюр тоже был добавлен.

Я уже несколько раз упоминал ранее, что можно загрузить ещё одно изображение (Add another image). Вернее не одно, а сколько пожелаете картинок. Теперь Вы сможете:

А) сделать несколько различных favicons не запуская сервис снова
Б) Что самое примечальное можно использовать обе (2,3,5…) картинки для создания яркой анимационной favicon для себя.

Вот тут именно Вы видите настройки для анимации с двумя иконками, они называються как {PIC1} {PIC2} и что самое примечательное, их мало того, что можно поставить несколько (например, рисованные буквы), но и вставить между (за) ними текст. Тут только Ваша фантазия может остановить количество вариантов.

Да, вернёмся к началу нашего ликбеза по favicon.ico. На следующем изображении я делаю себе favicon из аватара твиттера

Можете нас добавить к себе в follow list – http://itpride.net/twitter

Результаты работы сервиса для favicon:

Я не буду говорить о том, что этот сайт дает иконки лучшего качества по сравнению с аналогами, и не стану говорить о том, что такую функциональность не всегда можно найти в программных продуктах, которые, между прочим, стоят не так уж и мало.

Лучше я скажу о минусе этого сервиса (ога есть и такой) – при загрузке третьей иконки автоматически открывается popup окно с рекламой от google, но думаю Вы не слишком против будете, ведь ребята постарались и заслужили как минимум «хлеб с маслом», им таки удалось сделать наверное один из лучших онлайн сервисов по созданию и редактированию иконок favicon .

Что нужно, чтобы установить иконки favicon для своего сайта?

Для установки на сайт иконок favicon.ico вставьте следующий код, между тегами в файле шапки Вашего сайта (для WP к примеру это в header.php) –

<lnk rel=“shortcut icon” href=“favicon.ico”> - для обычной иконки 

<lnk rel=“icon” type=“image/gif” href=“animated_favicon1.gif”>  и для анимированной

Ежели они у вас имеют другие имена, исправьте в поле href их имена и адрес и не забудьте скопировать иконки в директорию сайта на хостинге.

Повторяем, чтобы не терять

Ссылка на лучший сервис создания favicon (обычных и анимированных)

Favicon

ЗЫ Чуть не забыл:

Ещё одно, последнее и всё, я ушёл: если Вы знаете какой-то хороший или уникальный сервис или сайт или у Вас такой супер-сайт – присылайте его на наш email (admin(ET)itpride.net) и мы постараемся опубликовать о нем статью, или присылайте целую статью о своем сервисе. Лучшие – получат прямые ссылки на свои сайты.

Возможно Вы этого не знаете: