Favicon (иконка сайта)

Иконка сайта во вкладках браузера

Все современные интернет-обозреватели отображают иконку сайта во вкладках:

Обратите внимание на вкладки вашего браузера, в котором открыта данная страница: если их много, то на мгновение представьте их без favicon. Согласитесь, без них пользоваться вкладками стало бы явно неудобно: при большом количестве вкладок в окне браузера ориентироваться в них позволяют только иконки Favicon.

Иконка сайта в закладках браузера

Кроме отображения во вкладках, иконка сайта отображается в закладках браузеров (в ссылках на «избранные» страницы), а также в панелях со ссылками:

Если интернет-пользователь активно пользуется браузерными закладками, фавиконки позволяют ускорить данный процесс.

Иконка сайта перед адресной строкой браузера

Некоторые браузеры отображают пиктограмму сайта перед адресной строкой, а также в выпадающем списке URL-адресов выпадающей строки:

Возможности сервиса

Favicon.cc позволяет:

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

К условным недостаткам генератора можно отнести:

• отсутствие русской версии,
• экспорт файлов только в формате ICO.

Создание новой фавиконки онлайн

Чтобы сделать пиктограмму сайта в режиме онлайн, перейдите в сервис favicon.cc и следуйте инструкциям:

1. кликните Create New Favicon,
2. в области «Color Picker» в правой части окна размещены инструменты для рисования:
   • палитра цветов — для определения цвета карандаша,
   • Transparency — ползунок определения степени прозрачности,
   • Last Used Colors — панель быстрого выбора из последних применяемых цветов,
   • transparent — устанавливает прозрачный цвет («стирка»),
   • move — позволяет переместить все пиксели в редакторе.
3. разобравшись с инструментами, приступайте к рисованию иконки для сайта в редакторе,
4. все изменения будут сразу отображаться в натуральную величину (16×16 px) в области «Preview»,
5. скачать готовую фавиконку можно по клику на Download Favicon.

Создание анимированной фавиконки

Генератор favicon.cc позволяет легко сделать анимированную иконку favicon.ico для сайта в режиме онлайн:

1. кликните Use Animation под окном редактора,
2. раскроются дополнительные инструменты для работы с кадрами:
   • номер кадра указан прямо под редактором Favicon,
   • в выпадающем списке напротив номера можно выбрать частоту смены кадра,
   • Clear Frame — очистка окна редактора (текущего кадра),
   • Append New Frame — добавление нового чистого кадра (откроется в редакторе),
   • Copy Previous Frame — позволяет скопировать пиксели предыдущего кадра в текущий,
   • Delete Frame — удаление текущего кадра,
   • animate preview — активация демонстрации анимации в области «Preview»,
   • в выпадающем списке напротив чекбокса можно выбрать количество циклов анимации.

Онлайн-конвертер Favicon

Функционал favicon.cc позволяет конвертировать изображения из форматов JPG, JPEG, GIF, PNG, BMP, ICO, CUR в формат ICO с преобразованием их размера:

1. кликните Import Image,
2. выберите файл для преобразования размером не более 5 Мб,
3. определите способ преобразования размера изображения до квадратных пропорций:
   • Keep Dimensions — с сохранением пропорций исходного изображения,
   • Shrink to square icon — сжимая или растягивая изображение.
4. кликните Upload для конвертации.

Готовые бесплатные фавиконки

Сервис favicon.cc позволяет бесплатно просматривать, редактировать и скачивать созданные с помощью данного генератора фавиконки:

1. чтобы перейти к списку готовых фавиконок кликните:
   • Latest Favicons — последние созданные иконки,
   • Top Rated Favicons — самые популярные иконки,
2. кликните по названию понравившейся фавиконки,
3. кликните:
   • Download Favicon чтобы скачать копию фавиконки,
   • Edit Copy of Icon чтобы приступить к редактированию копии фавиконки.

Особенности программы

Графический редактор Adobe Photoshop не нуждается в представлении. Но как сделать иконку для сайта в «фотошопе»? Достаточно просто, если вы уже знакомы с интерфейсом программы, и достаточно сложно, если вы не имеете практики работы в Photoshop.

Не будем перечислять возможности фотошопа при работе с изображениями (это другая тематика и слишком большой объём информации), но разберём условные недостатки программы, с которыми можно столкнуться при создании Favicon:

• Сложный многофункциональный интерфейс
  

  Программа Photoshop предназначена для качественной обработки изображений (в частности фотографий). Для быстрого освоения подойдут другие узконаправленные программы по созданию фавиконок.

• Нет возможности сохранять файлы в формате ICO
  

  Но можно сохранять иконку в формате BMP и заменять расширение на ICO.

• Нет возможности создавать анимационные Favicon в формате ICO
  

  Но можно создавать анимационные фавиконки в формате GIF.

Рисование Favicon

Нарисуем иконку для сайта в программе Adobe Photoshop CC:

1. открываем программу,
2. кликаем Файл → Создать,
3. в появившемся окне устанавливаем высоту и ширину 16 px и жмем ОК,
4. для удобства рисования:
   • масштабируем изображение (клавиши CTRL + + и CTRL + -),
   • включаем сетку: (клавиши CTRL + '),
   • настраиваем сетку: (Редактирование → Настройки → Направляющие, сетка и фрагменты...),
   • используем инструменты для рисования в зависимости от необходимости (карандаш, кисть и др.).

Сохранение фавиконки

Стандартный функционал Photoshop не позволяет сохранять файлы в формате ICO. Для этого можно воспользоваться простым трюком смены формата BMP на ICO:

1. кликаем Файл → Сохранить как,
2. в окне сохранения в соответствующем текстовом поле указываем имя файла favicon, а в поле «Тип файла» из выпадающего списка выбираем BMP и сохраняем,
3. открываем Total Commander и меняем расширение файла на ICO.

Создание Favicon из изображения

Если у вас есть готовое изображение (например, полноразмерный логотип), вы можете сделать из него фавиконку с помощью Photoshop:

1. откройте исходное изображение в Photoshop,
2. измените пропорции изображения в соотношении 1×1 (форма квадрата) с помощью:
   • кадрирования (клавиша C),
   • изменения размера изображения (клавиши ALT + CTRL + I),
   • изменения размера холста (клавиши ALT + CTRL + C),
3. перейдите в режим изменения размера изображения (клавиши ALT + CTRL + I):
   • уменьшите изображение до 16×16 px,
   • в выпадающем списке «Ресамплинг» для оптимальной четкости выберите «Бикубическая (с уменьшением)»,
   • вы можете поэкспериментировать с другими вариантами ресамплинга, оценивая результат в том же окне,
4. сохраните файл как указано выше (клавиши ALT + S), или в другом веб-формате (клавиши ALT + CTRL + SHIFT + S).

Создание анимированной Favicon

Для создания анимированной пиктограммы сайта в формате GIF:

1. открываем статичную фавиконку в программе,
2. кликаем Окно → Шкала времени,
3. кликаем Создать анимацию кадра,
4. выбираем кадры и:
   • дублируем слои для новых кадров,
   • редактируем слои для новых кадров,
   • настраиваем отображение слоёв в кадрах,
   • устанавливаем частоту смены кадров.
5. переходим в «Сохранить для Web» (клавиши ALT + CTRL + SHIFT + S):
   • выбираем тип файла GIF,
   • в разеле «Анимация» выбираем число повторов «Постоянно»,
   • сохраняем картинку.

HTML-тег для favicon.ico

Если иконка не подключена в HTML-коде, браузеры пытаются обнаружить её по следующему правилу:

<!-- равносильный HTML-код тега link для favicon.ico, размещенного в корне сайта: -->
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="http://site.net/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="http://site.net/favicon.ico">
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="http://site.net/favicon.ico">
<link rel="icon" type="image/x-icon" href="http://site.net/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- данным указаниям браузеры следуют по умолчанию даже при их отсутствии в HTML-коде -->

В остальных случаях необходимо включать тег link для Favicon c соответствующими значениями атрибутов.

HTML-тег для Favicon других форматов

Для подключения фавиконки в формате, отличном от ICO, указывайте соответствующий MIME-тип фавиконки в атрибуте type. Например:

<!-- HTML-код для иконки в PNG-формате: -->
<link rel="shortcut icon" type="image/png" href="http://site.net/favicon.png">

По возможности применяйте иконки в формате ICO, чтобы избежать возможных проблем с их отображением.

HTML-тег для Favicon вне корневого каталога

Для подключения фавиконки, размещенной не в корневом каталоге сайта, правильно указывайте путь к файлу в атрибуте href. Например:

<!-- HTML-код для фавиконки, расположенной не в корневой папке: -->
<link rel="shortcut icon" type="image/png" href="http://site.net/template/favicon.png">

Такой код HTML-тега link целесообразно применять на отдельных страницах сайта со своими уникальными (отличными от главной иконки сайта) фавиконками.

HTML-тег для фавиконок с нестандартным названием

Для подключения иконки сайта, имеющей название, отличное от favicon, не забудьте указать это в атрибуте href. Например:

<!-- HTML-код для иконки с нестандартным названием файла: -->
<link rel="shortcut icon" type="image/x-icon" href="http://site.net/ikonka.ico">

Во избежание возможных проблем с отображением используйте фавиконки с именем favicon.

HTML-тег для фавиконок в base64

Чтобы не подключать файл фавиконки к веб-странице, можно вставить в атрибут href тега link код Base64:

<!-- HTML-код для иконки в base64 -->
<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAI1nsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREQAAABERERERAAAAEREREBEAAAARARAAEQAAABEBEAARAAAAEQEQABEAAAARARAAEQAAABEBERERAAAAEQEREREAAAARAREQAAAAABEBERAAAAAAEQEREAAAAAARAREQAAAAABEBERARAAAAEQEREREAAAAREREREQAAABEREEIAAABCAAACTkAADk5AAA5OQAAOTkAADk5AAABCQAAAQkAAA85AAAPOQAADzkAAA85AAAJOQAAAQgAAAEIAAA">

Такой способ HTML-подключения Favicon работает во всех браузерах, кроме Internet Explorer. Чтобы получить код изображения, воспользуйтесь любым декодером Base64.