5 инструментов создания favicon

Содержание

10 лучших веб-сайтов для генерации иконок

Современные UI-разработчики уделяют больше всего времени и внимания зрительному дизайну. Безусловно, контент и содержимое сайта играет главную роль на любой веб-странице, но то, что притягивает внимание пользователя к контенту – это, конечно же, визуальные моменты.

Визуальный дизайн или дизайн пользовательского интерфейса – все это является главными аспектами тенденций в веб-дизайне. Вот почему особенности Google Material Design оказываются более эффективными при разработке пользовательского интерфейса для осуществления зрительной коммуникации с посетителем.

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

Иконки в веб-дизайне считаются очень важной частью. Они не только символизируют функции или смысл, но и делают общий пользовательский интерфейс более интерактивным. Вы можете создавать иконки в различных вариациях и применяя разные эффекты. Главное, чтобы люди могли легко связать с иконками то, как они случайно встречаются в их повседневной жизни. Например, дорожные знаки, иконки погоды или смайлики.

Существует множество сайтов, где вы можете легко приобрести наборы иконок или даже получить некоторые из них абсолютно бесплатно. Но иногда, дизайнеры чувствуют необходимость создать что-то новое и свежее, как часть потребностей проекта. Тем не мене, радость от создания иконок для веб известна лишь некоторым дизайнерам, которые действительно любят веб-дизайн.

Иконки широко используются в социальных сетях, на сайтах электронной коммерции, игровых ресурсах и многих других. Мы знаем такие популярные иконки как «Like» на Фейсбуке или «Shopping Cart» на сайте E-commerce. Но на самом деле существуют тысячи иконок, попадающие под различные категории. В веб-разработке значки часто используются для перечисления чего-либо на странице, кнопок социальных сетей, таких важных разделов, как «Связаться с нами» и других.

Вы так же можете создавать новые и оригинальные иконки для своих сайтов или мобильных приложений. Представляем вам 10 сайтов, которые предлагают полную свободу для создания уникальных иконок.

Этот онлайн инструмент позволяет вам создавать красивые иконки для e-mail прямо с вашей электронной почты. Инструмент генерирует иконки для различных поставщиков услуг электронной почты, таких как Gmail, Yahoo!, MSN, Hotmail и многих других.

MakeAppicon является надежным онлайн-инструмент генерации иконок для приложений iOS и Android. Инструмент позволяет изменять размер и оптимизировать ваши иконки под различные форматы и размеры, необходимые для iOS и Android.

Инструмент позволяет не только создавать свои собственные иконки, но и стилизовать уже существующие в нужном вам направлении. Вы можете выбрать шрифты для символа на Font Awesome, Linecons или любого другого онлайн-источника. После загрузки вашего изображения в формате png, bmp, jpeg или ico, вы можете изменять изображение с помощью функций редактирования.

Если вы поклонник персональных иконок, то IconizeMe станет для вас отличным инструментом, который раскачает ваш онлайн-мир. Персональные иконки выглядят очень уникальными в профилях социальных сетей или личных блогах.

FavIcon Generator является идеальным онлайн-инструментом для генерации иконок из изображения для вашего сайта. Инструмент позволяет загружать файл изображения, после чего выбрать выходной формат из различных вариантов, таких как gif, jpg, png и bmp. Сайт широко используется для брэндирования логотипа компании для посетителей онлайн.

Этот инструмент позволяет загружать изображения в форматах GIF, JPEG или PNG, а затем преобразовать их в Windows favicon с расширением ICO. Помимо этого вы можете использовать инструмент с целью создания иконок для веб-сайтов, а также для приложений iOS, Microsoft и Android.

Этот онлайн инструмент от Android Asset Studio предназначен для генерации веб-иконок для приложений Android. Вы можете создавать иконки из изображений, клипартов или текста. Кроме того, инструмент предлагает много возможностей выбрать цвета, формы, фоны и эффекты.

Pic2Icon — это бесплатный генератор иконок, предлагающий массу возможностей применения различных эффектов к вашей иконке. Кроме того, он предлагает инструменты для преобразования формата иконок, а также генерацию иконок для Windows 7, Windows XP, iPhone и iPad.

Онлайн-инструмент, позволяющий создавать иконки из различных графических форматов. Редактор так же позволяет создавать иконки из 3D моделей и рисовать иконки со слоями.

Онлайн-место для создания 3D-иконок и логотипов. Инструмент позволит разработчикам веб и мобильных приложений создавать социальные иконки 3D и логотипы для популярных сайтов, брендов, продуктов программного обеспечения. Некоторые из них — Facebook, LinkedIn, Instagram, YouTube, GitHub, Google.

Заключение

Генераторы иконок являются важной категорией инструментов веб-дизайна. Используя эти инструменты, вы можете создавать иконки для различных категорий, таких как рестораны, транспорт, погода, социальные сети, игры, искусство и многое другое. Вы также можете создавать свои собственные 3D наборы иконок, которые можно использовать в различных контекстах.

Как сделать и установить фавикон на сайт

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

Но перед этим мы поговорим о том, как этот самый favicon можно нарисовать. Далее разберемся в том, какой размер должен быть у логотипа, в конце расскажу, как вставить созданную иконку на сайт.

Что такое фавикон и почему он важен для СЕО

Фавикон (favicon) – значок веб-сайта размером 16 x 16 (или 32 x 32, но не более). Он отображается во вкладке браузера. Выглядит это так:

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

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

Подведем небольшие итоги:

  • Favicon влияет на поведенческие факторы и кликабельность в выдаче.
  • Поисковые роботы также могут учитывать наличие или отсутствие фавикона.
  • Такой технический недочет может привести к падению трафика.

Иными словами, если у вас вообще возникает вопрос: добавить favicon или же нет, то ответ очевиден – обязательно добавлять.

Теперь давайте разберемся в том, как можно эту самую иконку нарисовать. Сделать это можно при помощи различных онлайн-сервисов, редакторов.

Где скачать готовый вариант

Далеко не лучший выбор, но кто-то им пользуется. Вы можете скачать готовый фавикон из интернета и особо не заморачиваться над самостоятельным созданием своего. Все они представлены в удобных форматах и нужных размерах.

Просто вводим в поисковик нужный запрос, что-то типа “Скачать готовый favicon”, после этого вам будет представлено огромное количество самых разных вариаций.

Скачиваем картинку себе на ПК, а после устанавливаем на сайт. Все просто. Они доступны абсолютно бесплатно, никто вас ругать не будет. Хотя если речь идет о компании, пусть даже мелкой, то при обнаружении чужого логотипа могут возникнуть неприятные казусы.

Готовые варианты можно поискать и на различных сайтах. Как правило, там представлены целые подборки всевозможных тематических логотипов, которые могут прийтись по вкусу некоторым вебмастерам.

Но я еще раз повторюсь, что лучше будет создать фавикон самостоятельно.

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

Онлайн-сервисы

Нарисовать фавикон можно в онлайн-сервисах. Достаточно просто ввести в поисковик соответствующий запрос, после чего вашему вниманию будет представлен целый перечень сайтов, которые могут помочь вам реализовать задуманное.

Например, Favicon.by. Он позволяет вам нарисовать логотип при помощи простых инструментов. Сервис создает иконку в формате ICO.

Как видите, здесь все интуитивно понятно. Выбираем карандаш, настраиваем цвет и рисуем. Если вашему логотипу нужна какая-то основа, то вы можете воспользоваться “Импортом из файла” и “Импортом с сайта”.

Как только мы закончим наши художества, прокручиваем страницу вниз и скачиваем нашу картинку.

Обратите внимание на левую часть окна “Ваш результат”. Там вы посмотрите, как будет выглядеть ваша иконка во вкладке браузера.

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

Adobe Photoshop

Если у вас есть данный графический редактор, то создание логотипа можно вывести на более качественный уровень. В основном, конечно, все и делают иконки через фотошоп или аналогичные редакторы. Предыдущими вариантами пользуются новички. Крупные порталы и сайты больших компаний вряд ли будут использовать картинку, нарисованную в онлайн-генераторе.

Итак, у нас есть два варианта:

  1. Сделать фавикон из картинки (логотипа компании или других).
  2. Просто выбрать шрифт и сделать его в виде буквы.

Второй вариант используется наиболее часто. Наверное, больше половины сайтов просто создают квадрат размером 16 на 16 или 32 на 32, выбирают шрифт (как правило, Roboto или Open Sans), цвет, соответствующий гамме проекта. И все – favicon готов.

Открываем Фотошоп, после чего сразу идем в “Меню” – “Создать”.

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

Размер должен быть 16 x 16 или 32 x 32 (в пикселях). Все остальное – по вашему усмотрению, но я бы советовал выставить так, как показано на скриншоте.

Нажимаем кнопку “Создать”, после чего у нас перед глазами появляется область с заданным размером. Сейчас мы будем творить.

Разберу самый популярный вариант. Как я уже и говорил, это фавикон в виде буквы. Обычно первой из названия проекта. Кликаем на “Т” в панели инструментов, после чего в любой участок внутри квадрата.

Фон как на скриншоте показывает, что я выбрал вариант “прозрачный” на первом этапе создания картинки.

Теперь вводим любую букву с клавиатуры. Мы можем уменьшить или увеличить ее, поменять цвет, добавить тени или расположить в любой части созданного нами квадрата. Давайте сделаем лого в виде буквы “А”.

Цвет я регулировал при помощи специального инструмента в правом верхнем углу. Здесь вы можете выбрать абсолютно любой вариант при помощи мыши. В верхней панели также есть инструменты для выбора шрифта и размера. На картинке 32 x 32 оптимальным размером буквы будет 8 – 10 Пт.

Если зажать левую кнопку мыши на букве, то можно передвигать букву относительно границ квадрата. Когда вы разместите ее в центре, программа покажет вам соответствующее уведомление в виду перекрестия внутри квадрата. Как только вы отпустите кнопку, оно пропадет.

Если вы хотите добавить в свой фавикон что-то особенное, то можно воспользоваться инструментом “Стили”. Для этого перейдите в соответствующий раздел, как это показано на скриншоте.

Тут можно придать своей букве интересный вид. Например, настроить тени, сделать обводку или же градиентный цвет.

Кстати говоря, не пугайтесь, если при приближении ваша буква будет выглядеть как квадратное нечто. Если вы уменьшите масштаб до 100 % она примет свой естественный, четкий вид. Во вкладке картинка тоже будет выглядеть хорошо.

Далее нам нужно сохранить наше творение. Идем в “Файл” – “Сохранить как”. Выбираем нужный формат (PNG, GIF или JPEG) и название – favicon, нажимаем “Сохранить”.

При установке через плагины или тему можно использовать любое название и формат. Однако в случае с корневым каталогом файл должен иметь название favicon и формат – ICO.

Установка на сайт

Теперь, когда мы создали фавикон одним из способов выше, мы должны установить его на наш сайт. Это можно сделать несколькими способами.

Самый простой и доступный – через корневой каталог. Его мы рассмотрим в первую очередь.

С помощью корневого каталога

Для начала нам нужно конвертировать файл в ICO. Это можно сделать при помощи любого онлайн-сервиса, достаточно ввести в поисковую строку: “Конвертация в ICO” или “PNG в ICO”. Загружаем туда фотографию, получаем favicon.ico.

Важно: размер должен быть 16 x 16 или 32 x 32. Название favicon, а расширение *.ico.

Теперь мы должны загрузить этот файлик в корень нашего сайта. Можно сделать это при помощи FTP-клиента или файлового менеджера.

Корень сайта, как правило – public_html. Независимо от платформы. Но в некоторых темах могут наблюдаться проблемы с отображением фавиконки. Чтобы пофиксить их, мы должны вручную добавить в header.php следующий код:

Для этого идем во “Внешний вид” – “Редактор”, находим в боковой панели нужный файл и кликаем для редактирования. Код мы должны вставить внутри тега .

Цукерберг рекомендует:  GeekUniversity работа мечты — done

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

Также вы можете проверить наличие иконки в выдаче Яндекса, но там она появится не сразу, а только после того, как проиндексируется.

Через тему WordPress

Заходим в настройки темы, используя верхнюю панель на сайте (“Внешний вид” – “Темы”). Далее идем в “Свойства сайта”.

Вот тут-то мы и настраиваем фавиконку. Просто нажимаем на “Выбрать/изменить изображение”, далее откроется менеджер, через который мы и загружаем нашу картинку.

Плагины

Также есть возможность сделать это с помощью плагинов, но это не рекомендуется из-за нагрузки на CMS.

Идем в “Плагины”, выбираем “Добавить новый”. Откроется страница каталога, где в окно поиска мы должны ввести ключевое слово – Favicon. Нашему взору будет представлено большое количество всевозможных плагинов. Все они работают примерно одинаково, но я все же позволю себе объяснить, как все это делается, на примере одного из самых популярных – All in One Favicon.

Нажимаем на кнопку “Установить”, а после активируем нужное расширение.

После того как плагин будет установлен и активирован, мы должны перейти в настройки. Они представлены в таком виде.

Для каждого формата здесь есть соответствующая вкладка. Допустим, вы создали иконку в формате GIF и хотите, чтобы именно она отображалась во вкладке. Соответственно идем во вторую по счету строку, нажимаем “Загрузить” и в файловом менеджере выбираем наш файл. То же касается и других форматов.

Отдельного внимания заслуживает вкладка “Apple Touch Icon Frontend”. В ней вы сможете задать иконку для устройств от Apple. В отличие от обычного фавикона, логотип для Айфонов или Макбуков имеет большее разрешение и качество. То есть вам, чтобы загрузить картинку, придется создать еще один вариант. Уже в разрешении 512 x 512 или 1 024 x 1 024. Однако для мелких сайтов, в принципе, нет нужды проделывать подобное.

Заключение

Теперь вы знаете, зачем нужен фавикон и что это такое вообще. Надеюсь, что данная статья окажется полезной для вас и при помощи описанных инструментов вы сможете установить логотип на свой сайт. По сути, это дело нескольких десятков минут. Однако значение такой технической особенности очень велико для поисковой оптимизации и поведенческих факторов.

Многие вебмастеры, к сожалению, упускают этот момент. Вместе с ним из вида выпадают и другие, не менее важные нюансы. Если вы новичок и готовы учиться создавать крутые сайты и зарабатывать на них, то я приглашаю вас на курс Василия Блинова “Как создать блог”.

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

Сделать фавикон (favicon.ico) для сайта

Favicon — (от англ. FAVorites ICON в переводе «значок для избранного») — значок веб-сайта размером 16x16px или 32x32px, который отображается браузером в адресной строке или рядом с сохраненной закладкой. Традиционно название и расширение иконки используется favicon.ico.

Наш сервис способен конвертировать выбранное Вами изображение (размером до 175 Кб) в иконку значка сайта (размерами 16x16px или 32x32px). После генерации необходимо лишь загрузить favicon.ico в нужный каталог хостинга сайта.

Отсутствие иконки является ошибкой технической оптимизации ресурса, это снижает узнаваемость бренда, снижает CTR поисковых сниппетов, ухудшает поиск веб-ресурса по закладкам браузера и др.

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

Куда загрузить фавикон чтобы он был онлайн?

Для отображения созданного Вами favicon.ico в виде значка сайта необходимо загрузить его в корневой каталог сайта (либо в любой каталог) и указать в коде шаблона сайта абсолютный или относительный путь к нему (подробнее на Wikipedia), пример кода:

Зачем указывать путь к Фавикону?

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

Be1.ru рекомендует выбирать для иконки сайта простые изображения, главное, чтобы они ассоциировались с сайтом и хорошо запоминались, к примеру: пальма, воздушный шарик или логотип организации.

Как создать фавикон для всех браузеров и устройств

Иконка сайта (фавикон) — очень важный элемент дизайна сайта. Она делает ваш ресурс заметней в выдаче, повышает его узнаваемость. Часто разработчики оставляют создание фавикона на последний момент, и вовсе о нем забывают. В лучшем случае, вставят одну строчку link тега только с одним вариантом favicon.

Отображение фавкиона в поисковой системе Яндекс

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

Внимание мелочам!

Сам фавикон не так прост, как нам хотелось бы думать. Да, для десктопа всё просто и тривиально. А что делать со смартфонами, для которых иконка должна быть представлена в разных размерах. А с ГуглТВ что делать?

Давайте разберемся, как всё же правильно генерировать фавикон, чтобы он корректно показывался на всех устройствах. Время пришло!

Десктопный фавикон

Это всем нам привычная иконка (см. картинку выше). Все версии браузеров отображают иконки следующих размеров:

А поддерживаемый формат — как .png, так и .ico (.ico только для старых версий Internet Explorer).

Фавикон для Андроида

Тут уже мы должны учитывать разрешение экрана мобильного устройства. Именно от него и зависит итоговый размер фавикона. Разрешение смартфона — это плотность пикселей на дюйм (PPI). Именно из-за разных разрешений устройств необходимо делать иконки в разных физических размерах:

  • 36×36 — PPI = 0.75
  • 48×48 — PPI = 1
  • 72×72 — PPI = 1.5
  • 96×96 — PPI = 2
  • 144×144 — PPI = 3
  • 192×192 — PPI = 4

Android отлично понимает .png иконки, а также использует файл manifest.json, в котором можно прописать дополнительные параметры вывода. А если вы забыли сделать фавикон под андроид, то система будет использовать apple-touch-icon.

Favicon для Apple устройств

«Яблочные» устройства также имеют разный PPI в зависимости от модели и года выпуска, также в них используются Retina-экраны. Поэтому мы вынуждены также делать разные иконки для них:

  • 57×57 — для iPhone с не ретина дисплеем и iOS версии 6.0 и ниже
  • 60×60 — для iPhone с не ретина дисплеем и iOS версии 7.0
  • 72×72 — для iPad с не ретина дисплеем и iOS версии 6.0 и ниже
  • 76×76 — для iPad с не ретина дисплеем и iOS версии 7.0
  • 114×144 — для iPhone с ретина дисплеем и iOS версии 6.0 и ниже
  • 120×120 — для iPhone с ретина дисплеем и iOS версии 7.0
  • 144×144 — для iPad с ретина дисплеем и iOS версии 6.0 и ниже
  • 152×152 — для iPad с ретина дисплеем и iOS версии 7.0
  • 180×180 — для iPhone 6 Plus c iOS версии 8.0

Другие фавиконки

Есть ещё некоторые нестандартные параметры иконок, к примеру:

  • Для IE10 под Windows 8 обязательно требуется указать цвет фона
  • Браузер IE11 под Windows 8 и 10 понимает несколько видов иконок, опирается на XML файл параметров browserconfig.xml
  • Safari под Mac OS X El Capitan обязательно требует наличие SVG иконки для закрепленных табов
  • 96×96 — используется в Google TV
  • 228×228 — используется в Opera Coast

Теперь вы понимаете, что на вопрос «какой размер фавикона использовать» ответом будет — ВСЕ размеры для ВСЕХ устройств!

А как всё это будем подключать?

Вручную всё это делать — убить очень много времени. Поэтому будем генерировать фавиконки онлайн с помощью сервиса.

Генератор фавикон для разных устройств: RealFaviconGenerator.net

Онлайн генератор фавикона

Данный онлайн генератор фавикона из одной вашей иконки (идеально, если размер будет 260х260 пикс.) создает все необходимые размеры под все устройства буквально в один клик!

После загрузки иконки мы сразу видим результат обработки. Можем задать сразу цвет фона, который нужен для определенных устройств (см. выше)

Процесс генерации favicon для iOs онлайн сервисом

Подробнее работу с данным сервисом смотрите в видеоролике, который я специально подготовил

Встраиваем фавикон в страницу

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

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

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

Всё, у нас сгенерирован и встроен отличный фавикон!

Photoshop поможет создать качественную favicon

На сегодняшний день в интернете существует большое количество сайтов с помощью которых можно создавать favicon. Интернет-сервисы предоставляют возможность создавать иконки двумя способами:

через встроенный онлайн графический редактор и с помощью генерации готовой картинки в формат favicon. Единственным недостатком получения файла через такие сайты является низкое качество изображения. Для того что бы favicon выглядел качественно нужно сделать его достаточно четким и понятным для восприятия. В данной статье будет рассказано о том, как создать качественную favicon для сайта в Photoshop и в результате получить качественную и уникальную персонализацию сайта в поисковой выдаче Яндекса.

Инструкция по созданию favicon для сайта в Photoshop

Для того, чтобы получить возможность в Photoshop сохранять изображение в формате ico, Вам потребуется установить дополнение к программе — плагин ICO Plugin.

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

Cкачанный архив плагина нужно разархивировать в папку с установленным Photoshop

для версии CS5 в папку C:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats

для версии CS6 в папку C:\Program Files\Adobe\Photoshop CS\Plug-Ins

и перезагрузить программу.

Далее, перейдите по контекстному меню « Файл » –> « Создать » . Откроется окно, в котором нужно указать ширину и высоту будущей favicon. Выставляем 16 на 16 пикселей. В разделе «Содержимое фона» нужно выбрать «П розрачный фон » , а в разделе «Разрешение» выставить 96 пикс/дюйм. «Цветовой режим» должен быть выбран RGB и 8 бит.

Потребность создавать favicon в ручную, обуславливается тем, что при уменьшении готового изображения до размера 16 на 16 пикселей получается непонятная и размытая картинка. Именно для того, чтобы картинка была четкой и качественной ее необходимо нарисовать с нуля.

После того, как картинка нарисована ее нужно сохранить в формате ico. Для этого в контекстом меню переходим в раздел « Файл » –> « Сохранить » или используем комбинацию клавиш ctrl+shift+s. В открывшемся окне выбираем тип файла – ICO (Windows Icon) и сохраняем под именем «favicon.ico».

Для справки. Файл favicon.ico должен быть размещен в корне сайта там, где располагается страница index.html. Для того, что бы проверить качество и правильность созданной иконки, зайдите на любую страничку Вашего сайта и посмотрите на адресную строку браузера. Если в адресной строке слева от URL сайта или во вкладке браузера отображается Ваша картинка, то все сделано верно.

В течении времени, от 7 дней до нескольких месяцев, favicon проиндексируется и будет отображаться в поисковой выдаче Яндекс.

Favicon сегодня: форматы, поддержка, автоматизация

На сегодняшний день favicon — это не просто значок 16×16 во вкладке браузера. Он является важной составляющей интерфейса, а также играет немаловажную роль в прогрессивных веб-приложениях. Существует немало способов подключения и использования favicon, о которых я расскажу в данной статье.

В каком формате должен быть фавикон?

Раньше основным форматом фавикона был формат ICO. Его главная особенность заключалась в том, что файл такого формата мог хранить в себе несколько вариантов размеров иконки. Сейчас формат ICO считается устаревшим, на смену ему пришёл формат PNG с новыми возможностями по взаимодействию с иконкой.

Помимо PNG, поддерживается формат SVG. Но у него, к сожалению, невысокая поддержка на данный момент. Однако этот формат идеально подходит для фавиконов, его использование намного бы упростило нам жизнь. Будем надеяться, что ситуация скоро изменится.

Фавикон может быть создан ещё в нескольких форматах, например, в формате GIF или JPEG, но проблемы с поддержкой делают их использование нецелесообразным.

HTML5 и атрибут sizes

Атрибут sizes пришел в нашу жизнь с HTML5. Благодаря ему браузер или устройство может выбрать необходимый размер фавикона. Атрибут sizes указывается в формате [ширина х высота] без указания единиц. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться до любого размера, например, если она хранится в векторном формате SVG.

Пора ли отправлять ICO на свалку?

Как я уже сказала, формат ICO сегодня уже можно считать устаревшим, но значит ли это, что от него нужно срочно избавиться? Ответ, как всегда, неоднозначный. Есть случаи, когда формат ICO ещё может сослужить вам хорошую службу. Приведу несколько примеров оправданного использования фавикона в формате ICO в разных операционных системах и поговорим об альтернативах.

Windows

Начнём, пожалуй, с Windows.

До 11 версии формат PNG в IE не поддерживался, поэтому для IE10 и более младших версий по-прежнему необходимо использовать формат ICO. А вот с IE11 смело можно переходить на PNG. Для устаревших браузеров Microsoft рекомендует размеры 16х16, 32х32 и 48х48 для фавиконов формата ICO.

Начиная с IE9, сайты получили возможность быть закрепленными в меню и панели задач, а с приходом IE11 и Windows 8.1 появилась возможность создавать закрепленные сайты в виде живых плиток. По умолчанию изображением на плитке будет фавикон, но только не для больших и широких плиток, для которых нужно задавать изображение специального размера. Сделать это можно следующими способами: добавив теги метаданных в разметку веб-страницы или файл конфигурации браузера.

Цукерберг рекомендует:  C# - Подборщик на c#

Сначала давайте рассмотрим первый способ.

Определение фавикона в устройствах Windows с помощью метаданных в :

Если мы хотим указать иконки для больших плиток, это можно сделать с помощью следующих метаданных:

Можно указать цвет фона плитки:

Можно указать имя закрепленного сайта:

Если нет этих метаданных, то в качестве имени используется значение в :

square70x70logo, square150x150logo, wide310x150logo, square310x310logo — элементы, внутри которых объявляются изображения для различных размеров плитки.

Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей. Желательно, чтобы размер исходного изображения примерно в 1.8 раза превышал размер целевой плитки, чтобы его можно было увеличивать и уменьшать. Например, для 70х70 рекомендуемый размер 128х128, а для широкой плитки 310×150 исходное изображение имеет размер 558×270.

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

, содержащих в атрибуте src пути к соответствующим xml-файлам уведомлений. Также внутри этого тега содержится элемент , значение которого указывает в минутах интервал между обращениями к сайту за обновлением уведомлений, то есть живая плитка будет обновляться каждые, например, 30 минут. Да, значение не произвольное, а только 30, 60, 360, 720 или 1440.

Наконец, есть внутри тега еще элемент , отвечающий за способ повторения уведомлений (может принимать значения от 0 до 7). Шаблоны доступны только для средних, широких и больших плиток.

Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.

С помощью платформы уведомлений Windows сайт может за один раз показывать на плитке до пяти текстовых сообщений или сообщений с изображениями, которые циклически сменяют друг друга. Не будем подробно останавливаться на этих xml-файлах уведомлений. Существует множество шаблонов живых плиток, вот один из них:

То, что написано в кавычках в атрибуте template — название шаблона. Этот шаблон содержит изображение и небольшой текст. Используется для больших изображений и средних названий. На самом деле, подобных шаблонов очень много: и просто c текстом, и просто с изображением, и с несколькими изображениями, и с несколькими строками текста, и так далее. Большинство шаблонов изображения или текста размещают текст на той же плитке, что и изображение. Но шаблоны с Peek в названии выполняют переключение между изображением и текстом на плитке.

Подробнее о шаблонах можно узнать на официальном сайте.

Mac OS

В Mac OS особо не разгуляешься, к сожалению. Если сохранить сайт на рабочий стол в Mac OS, то значок будет отображаться как скриншот страницы с html кодом. Просто так сайт приложением в Mac OS не сделать, но и не будем.

Safari — вот где нам пригодится формат SVG. Чтобы использовать SVG, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.

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

Вспомнила еще один случай, где нам еще может пригодиться формат ICO. Поисковик Яндекс вставляет фавикон в поисковой выдаче рядом с заголовком сайта. Что, безусловно, увеличит привлекательность сниппета и, как следствие, кликабельность.Яндекс рекомендует использовать для этих целей формат ICO.

Safari в iOS вообще не отображает favicon во вкладках, но использует их для закладок, так же как и в Mac OS. В iOS пользователи могут добавить сайт на рабочий стол, и оно будет выглядеть как нативное приложение. Эти ссылки отображаются в виде значков и называются Web Clips.

Для этого нужно добавить rel=«apple-touch-icon» и указать размер с помощью атрибута sizes. Каждое устройство нуждается в своем размере иконки. Так как iOS устройств довольно много, и каждое устройство имеет свое разрешение экрана, спецификация, разработанная Apple, поддерживает возможность указать несколько тегов с иконками разных размеров.

Если значок не соответствует рекомендуемому размеру устройства, используется самая близкая по размеру иконка большего размера, нежели рекомендуемый. Когда пользователь заходит на ваш сайт с iOS устройства, запрашиваются файл apple-touch-icon-precomposed.png, который должен быть оформлен в стиле iOS: закругленные углы, блики, и тень. Если файла с таким названием в корне проекта или rel=«apple-touch-icon-precomposed» нет, будет запрошен apple-touch-icon.png, которому разрешено быть таким, какой он есть, а все эффекты будут наложены самим iOS. Соответственно, нужна иконка под каждый размер. А вот если нет и этих файлов, то на рабочем столе iPhone или iPad будет отображаться не красивая иконка, а миниатюра страницы — ее скриншот.

Ходят слухи что Blackberry будет тоже использовать rel=«apple-touch-icon-precomposed», но возможности проверить, к сожалению, не было.

Подробнее прочитать про актуальные размеры для устройств iOS можно на официальном сайте.

Некоторые могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch Icon должна быть 180х180. Остальные устройства могут уменьшить изображение. Но некоторые другие платформы тоже используют Apple Touch Icon, поэтому лучше их объявить.

Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch Icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну из этих иконок.

В iOS можно указать заголовок веб-приложения. По умолчанию используется значение тега . Чтобы задать другой заголовок, добавьте метатег на веб-страницу:

Кстати, можно даже установить стиль строки состояния для веб-приложения:

Можно поменять её цвет, можно сделать полупрозрачной. Это тоже повлияет на вид нашего сайта.

Android

Устройства на Android отлично понимают формат PNG, а ещё поддерживают манифест веб-приложения manifest.json, в котором можно прописать все параметры того, как будет вести себя сайт, если его установить на домашний экран. Этот манифест пока, к сожалению, не читают устройства под IOS. А если Android не найдет этот файл, то он будет использовать apple-icon-touch.

Файл манифеста может содержать в себе ряд космических параметров, но тут находятся лишь те, которые нам необходимы для отображения сайта на домашнем экране:

Ключ name определяет подпись в приложению на домашнем столе. Если этот параметр не указан, подпись будет взята из в ;

Ключ short_name определяет укороченную подпись для приложения, если не хватает места для полного имени;

Ключ icons — определяет массив объектов иконок, может принимать три значения: sizes, src, type;

Ключ theme_color определяет цвет строки состояния. Начиная с 39 версии хрома для Android Lollipop появилась возможность менять цвет интерфейса браузера и цвет вкладки браузера.

Задать цвет можно и через , добавив следующий мета-тег:

Ключ background_color определяет цвет фона для веб-приложения на домашнем столе. Этот же параметр отвечает за то, какой цвет будет иметь фон приложения, когда он открывается, т.е. манифест загрузился, но ещё не загрузились стили;

Ключ display определяет режим отображения веб-приложения. Например, значение standalone, которое мы указали, позволило открывать нам сайт как приложение.

В манифесте есть ещё много других потрясающих параметров, которые сделают из веб-сайта настоящее приложение, но они уже не относятся к нашей теме.

Автоматизация

В заключение нужно сказать, что все, что мы рассмотрели в рамках данной статьи, не обязательно писать руками, не забывайте про автоматизацию. Существуют сайты, на которых можно быстро сгенерировать все необходимые нам размеры и форматы favicon: realfavicongenerator.net, а при необходимости можно заодно сгенерировать код.

Есть пакеты для сборки и для Gulp, и для Grunt.

Главное помнить, что сегодня favicon — это больше, чем иконка в адресной строке и закладке браузера.

Как создать фавикон для сайта: пошаговая инструкция от А до Я

Что такое фавикон?

Для тех, кто не знает, что такое фавикон, дадим небольшую справку, которая позволит войти в курс дела. Фавикон – это небольшая иконка размером 16х16 или 32х32 пикселей, содержащая, как правило, логотип, первую букву бренда или характерное изображение, отражающее тип бизнеса или тематику сайта.

Почему фавикон важен?

Фавикон выполняет следующие функции:

— Идентификация сайта пользователем (удобство использования).

— Придает сайту профессиональный вид.

Остановимся более детально на основных преимуществах использования фавикон.

Узнаваемость бренда

Фавикон – как маленькое удостоверение сайта. Как было сказано во вступительной части, фавикон помогает пользователю запомнить ваш сайт среди множества просмотренных сайтов. Будь то история просмотра, результаты поиска в Google или список закладок сайтов в вашем браузере, фавиконы помогут пользователю легко узнать ваш сайт и зайти на него.

Доверие

Пользователи, как правило, судят о продавцах товаров и услуг в Интернете на основании того, насколько профессионально сделан их сайт. Небрежность в виде отсутствия фавикона (поисковые системы отображают сайт без фавикона иконкой пустого документа) легко может привести к потере доверия, особенно, когда пользователи сравнивают вас с конкурентами.

Повторные посещения

Известно, что люди лучше реагируют на изображение, чем на текст. Теперь предположим, что посетитель вашего сайта торопился, когда впервые посетил его, и решил добавить его в закладки, чтобы вернуться позже. Допустим, этот человек впоследствии решает снова посетить ваш сайт, для чего обращается к своим закладкам. Вам повезло, если у вас есть узнаваемый фавикон, такой, как заметная и уникальная буква G у Google и пользователь найдёт вас. Если фавикона нет, вас могут даже удалить из списка закладок.

Экономит время пользователя

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

Преимущества для SEO

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

Как создать фавикон?

Есть много инструментов, позволяющих создать фавикон за считанные минуты. Если у вас нет навыков дизайна или вы не знаете, как это делается, то можете попытаться сгенерировать фавикон, используя Logaster.

Для этого следуйте пошаговой инструкции:

Шаг 1. Зайдите на Logaster и нажмите «Создать фавикон»

Шаг 2. Создайте логотип

Logaster – это онлайн-генератор логотипов, поэтому для создания фавикона вам нужно сначала создать логотип. На основании вашего логотипа, Logaster предложит именно те фавиконы, которые вам нужны. Но не беспокойтесь, это не займет много времени и сил.

Шаг 3. Введите название вашего сайта (или компании), выберите тип бизнеса

Шаг 4. Выберите понравившийся логотип

После предоставления всей необходимой информации, Logaster сгенерирует несколько десятков логотипов. Выберите один из предложенных.

Как выбрать правильный дизайн?

Прежде всего, вы должны понимать, что логотип, который послужит основой для вашего фавикона, может быть несовершенен. Наша цель — создать фавикон, а доработать логотип можно и позднее.

Обратите внимание на иконку, именно ее чаще всего используют в качестве фавикона. Если нужно выбрать другой цвет или шрифт, вы можете отредактировать эти элементы дизайна (шрифт, цвет, текст) на 3 шаге создания логотипа. Как редактировать логотип, вы можете узнать здесь.

Шаг 5. Создайте фавикон

Теперь, когда у вас есть логотип, нажмите «Создать фавикон с этим логотипом» на странице логотипа.

Шаг 6. Выберите необходимый дизайн фавикона

Как и в случае с логотипом, Logaster сгенерирует несколько десятков красивых и готовых к использованию фавиконов. Выберите понравившийся дизайн. Предварительный просмотр позволит увидеть, как ваш фавикон будет выглядеть на сайте.

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

Найти вдохновения для фавиконки можно на сайтах:

Шаг 7. Скачайте фавикон

Вы можете приобрести фавикон отдельно, по цене 9.99$ или купить Дизайн-пакет, который включает в себя не только фавикон, но и логотип, визитную карточку, конверт и фирменный бланк. Как купить Дизайн-пакет, вы можете узнать здесь.

После оплаты вы можете скачать фавикон в форматах ico и png.

Где я могу использовать фавикон?

Вы можете использовать фавикон:

— мобильных устройствах. Пользователь может добавить фавикон на домашний экран своего устройства (нечто вроде закладки) — Android, IOS, Windows Phone и т.п;

— программах и приложениях для РC/Mac.

Как установить фавикон на сайт?

После того, как вы получили фавикон, его установка на сервер займет не больше пары минут и выполняется в два этапа. Для этого вам потребуется доступ к корневому каталогу вашего сайта и текстовый редактор, чтобы изменить HTML-код сайта.

Шаг 1.Вам необходимо загрузить файл favicon.ico на сервер. Чтобы это сделать, вам нужно скачать и установить ftp клиент, например, FileZilla. Затем ввести логин и пароль и загрузить файл. Более подробную инструкцию как загрузить файл фавикона вы можете прочитать здесь.

Шаг 2.Теперь вам нужно отредактировать HTML-страницу вашего сайта, чтобы помочь браузерам находить изображение вашего фавикона. При открытом окне FTP, найдите и скачайте с сервера файл index.html или header.php.

Перед правками кода, рекомендуем сделать копию файлов, чтобы можно восстановить файлы если вы допустите ошибку.

Откройте файл index.html в текстовом редакторе — Блокнот, Notepad++, Sublime Text.

Если ваш сайт содержит чистый HTML, вставьте специальный код в область HEAD файла index.html.

Код можно скопировать на странице фавикона на сайте Logaster.

Если вы используете WordPress, вставьте приведенный ниже код в область HEAD файла header.php.

Сделав это, загрузите файл обратно туда, где вы его взяли. Готово! Перезагрузите страницу вашего сайта, чтобы увидеть фавикон.

Большинство современных браузеров достаточно умные и умеют находить файл фавикона даже без такого кода, но только если фавикона имеет изображение формата 16х16 пикселей, название favicon.ico и сохранен в корневом каталоге вашего сайта.

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

Цукерберг рекомендует:  SVG анимация

Photoshop поможет создать качественную favicon

На сегодняшний день в интернете существует большое количество сайтов с помощью которых можно создавать favicon. Интернет-сервисы предоставляют возможность создавать иконки двумя способами:

через встроенный онлайн графический редактор и с помощью генерации готовой картинки в формат favicon. Единственным недостатком получения файла через такие сайты является низкое качество изображения. Для того что бы favicon выглядел качественно нужно сделать его достаточно четким и понятным для восприятия. В данной статье будет рассказано о том, как создать качественную favicon для сайта в Photoshop и в результате получить качественную и уникальную персонализацию сайта в поисковой выдаче Яндекса.

Инструкция по созданию favicon для сайта в Photoshop

Для того, чтобы получить возможность в Photoshop сохранять изображение в формате ico, Вам потребуется установить дополнение к программе — плагин ICO Plugin.

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

Cкачанный архив плагина нужно разархивировать в папку с установленным Photoshop

для версии CS5 в папку C:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats

для версии CS6 в папку C:\Program Files\Adobe\Photoshop CS\Plug-Ins

и перезагрузить программу.

Далее, перейдите по контекстному меню « Файл » –> « Создать » . Откроется окно, в котором нужно указать ширину и высоту будущей favicon. Выставляем 16 на 16 пикселей. В разделе «Содержимое фона» нужно выбрать «П розрачный фон » , а в разделе «Разрешение» выставить 96 пикс/дюйм. «Цветовой режим» должен быть выбран RGB и 8 бит.

Потребность создавать favicon в ручную, обуславливается тем, что при уменьшении готового изображения до размера 16 на 16 пикселей получается непонятная и размытая картинка. Именно для того, чтобы картинка была четкой и качественной ее необходимо нарисовать с нуля.

После того, как картинка нарисована ее нужно сохранить в формате ico. Для этого в контекстом меню переходим в раздел « Файл » –> « Сохранить » или используем комбинацию клавиш ctrl+shift+s. В открывшемся окне выбираем тип файла – ICO (Windows Icon) и сохраняем под именем «favicon.ico».

Для справки. Файл favicon.ico должен быть размещен в корне сайта там, где располагается страница index.html. Для того, что бы проверить качество и правильность созданной иконки, зайдите на любую страничку Вашего сайта и посмотрите на адресную строку браузера. Если в адресной строке слева от URL сайта или во вкладке браузера отображается Ваша картинка, то все сделано верно.

В течении времени, от 7 дней до нескольких месяцев, favicon проиндексируется и будет отображаться в поисковой выдаче Яндекс.

Подборка лучших онлайн генераторов favicon

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

1. Logaster.com

Logaster предлагает очень быстрый и простой способ создания логотипов. Компания создала всего 5 000 000 различных логотипов.

Просто выберите «Создать логотип», напишите название своей компании и выберите нужный тип. Вам будет предложено множество готовых шаблонов для вашего логотипа, которые вы также можете настроить. После того, как все установлено и готово, вы можете создать значок на основе логотипа, который вы только что создали.

2. Favicon.cc

Favicon.cc — и создатель и генератор значков. Используйте его для создания своего значка с нуля или импорта изображения для создания своего значка из существующего логотипа. Этот инструмент даже позволяет создавать анимированные значки.

3. Genfavicon.com

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

Используйте инструмент для обрезки и изменения размера изображения, а затем сохраните его в формате .ico. На сайте есть предварительный просмотр вашего значка перед его загрузкой.

4. Favicon-Generator.org

Favicon-generator создан, чтобы помочь вам создавать значки для ваших сайтов, а также приложений Android, Microsoft и iOS. Выберите изображение с вашего компьютера в формате PNG, JPG или GIF, чтобы преобразовать его в файл .ico. Если у вас нет изображения, просмотрите библиотеку уже готовых ихображений. Отфильтровав по буквам, номеру или цвету. Затем загрузите выбранные или внесите изменения в них. По завершении загрузите файл и сохраните значок в корневой каталог вашего сайта.

5. RealFaviconGenerator.net

Real Favicon Generator — мощный инструмент, который позволяет создавать favicon для каждой платформы. К тому-же, у него есть дополнительное преимущество, позволяющее вам протестировать ваш текущий значок. Введите URL своего сайта и получите отзывы о своем текущем значке. Он позволяет вам посмотрреть, как ваш значок будет выглядеть в различных браузерах или операционных системах и сообщит вам, чего не хватает, чтобы вы могли легко исправить ошибку.

6. Favicongenerator.com

Этот генератор favicon — это все, что вам нужно для преобразования изображений PNG, JPG или GIF в формат .ico. Просто выберите изображение для загрузки, выберите размер значка, который вы хотите, а затем нажмите «Создать Favicon».

Загрузите новый файл и следуйте инструкциям на сайте, чтобы легко добавить значок на свой сайт.

7. Favicomatic.com

Favicomatic имеет два разных варианта генератора фавикон. Загрузите изображение, а затем преобразуйте его в файл .ico. В противном случае создайте значок для всех платформ, включая приложения для iOS и Android. Расширенные настройки позволяют вам выбирать размер вашего значка, цвет фона и т.д.

8. Xiconeditor.com

Xiconeditor — это фантастический инструмент, если вам нужен простой, бесплатный инструмент для разработки вашего значка с нуля. Инструмент типа кисти, карандаша, ластика и многое другое позволяют вам создавать уникальные favicon бесплатно. Если вы не хотите начинать с нуля, импортируйте значок и обрезайте его прямо на сайте. Вы сможете просмотреть свой проект перед экспортом, чтобы вы точно знали, как он будет виден вашим пользователям.

9. Favikon

Favikon — один из простых инструментов, когда речь идет о генераторах favicon. Просто загрузите свое изображение, обрезайте его и загрузите в файл .ico. Favikon также предлагает экспорт в формате .png. Параметры редактирования отсутствуют, но если все, что вам нужно сделать, — это преобразовать изображение в файл .ico, этот инструмент вам поможет.

10. Favicon.pro

Этот бесплатный генератор favicon принимает изображение PNG, GIF или JPG с вашего компьютера и преобразует его в файл .ico. Выберите размер изображения от 16x16px до 128x128px, перед конвертированием. Затем просто следуйте инструкциям на веб-сайте для загрузки в корневой каталог вашего сайта.

11. Favico.com

Еще один простой и бесплатный инструмент для создания значков можно найти на Favico.com. Этот генератор favicon принимает изображения PNG, JPG и GIF и преобразует их в предпочтительный формат .ico. Выберите изображение с вашего компьютера, выберите размер между 16x16px или 32x32px, а затем нажмите «Создать», чтобы создать значок. Следуйте инструкциям на сайте для установки файла на свой веб-сайт.

12. Faviconit.com

Faviconit может похвастаться возможностью создавать favicon и заголовки HTML для всех устройств и браузеров. Этот бесплатный инструмент позволяет загружать изображение и преобразовывать его по мере необходимости.

Как создать полный набор favicon вашего сайта для всех типов устройств

Иконка веб-сайта — важная деталь вашего сайта. Однако зачастую о пресловутой favicon мы задумываемся в самый последний момент и вставляем строчку link тега всего с одним вариантом иконки. Иногда считаем достаточным положить файл favicon в корень сайта, ведь современный браузер в силах самостоятельно найти и подключить вашу иконку. А иногда забываем о favicon вовсе.

В свою очередь favicon не так прост как кажется и имеет не один вариант подключения, отображения и параметров. И если с десктопными браузерами все просто, то для смартфонов иконка может содержать массу различных параметров и размеров. А ведь существуют и совсем экзотические варианты вроде Google TV и т.д. Давайте попробуем разобраться какие вообще бывают варианты favicon.

Favicon для десктопа

Начнем с привычных вещей. Практически все версии десктопных браузеров опираются на иконки формата 16×16, 32×32 и 48×48 в формате .png или .ico (для старых версий IE только .ico).

Favicon для Android

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

  • 36×36 – для экранов с коэффициентом плотности 0.75
  • 48×48 – для экранов с коэффициентом плотности 1
  • 72×72 – для экранов с коэффициентом плотности 1.5
  • 96×96 – для экранов с коэффициентом плотности 2
  • 144×144 – для экранов с коэффициентом плотности 3
  • 192×192 – для экранов с коэффициентом плотности 4

Андроид воспринимает иконки в формате .png, а так же опирается на файл manifest.json который может содержать в себе ряд различных косметических параметров. В случае отсутствия возможных вариантов иконки под андроид, система опирается на иконки apple-touch-icon.

Favicon для мобильных устройств Apple

Как и в андроид, устройства Apple имеют различный PPI для разных устройств, в том числе так называемые Retina-экраны. Для разных версий разрешений экрана и версий ОС так же существует ряд различных вариантов иконок:

  • 57×57 – для iPhone с не ретина дисплеем и iOS версии 6.0 и ниже
  • 60×60 – для iPhone с не ретина дисплеем и iOS версии 7.0
  • 72×72 – для iPad с не ретина дисплеем и iOS версии 6.0 и ниже
  • 76×76 – для iPad с не ретина дисплеем и iOS версии 7.0
  • 114×144 – для iPhone с ретина дисплеем и iOS версии 6.0 и ниже
  • 120×120 – для iPhone с ретина дисплеем и iOS версии 7.0
  • 144×144 – для iPad с ретина дисплеем и iOS версии 6.0 и ниже
  • 152×152 – для iPad с ретина дисплеем и iOS версии 7.0
  • 180×180 – для iPhone 6 Plus c iOS версии 8.0

Прочие favicon

Существуют также иные нестандартные объявления для иконок, например

  • IE10 под Windows 8 требует указания цвета фона
  • IE11 под Windows 8 и 10 принимает несколько различных вариантов иконок, а так же параметров настройки опираясь на XML файл browserconfig.xml
  • Safari под Mac OS X El Capitan требует SVG иконку для закрепленных табов
  • 96×96 – для Google TV
  • 228×228 – для Opera Coast

И как настроить и подключить все это многообразие?

Логично предположить, что для подключения всего этого многообразия favicon потребовалось бы немало усилий. На что возникает резонный вопрос: существует ли инструмент для автоматизации этого процесса? И конечно же он существует. Для тех, кто в своей front-end разработке использует таск-менеджеры такие как Grunt или Gulp, существуют специальные плагины (о них вкратце в конце статьи). Мы же воспользуемся онлайн решением, которое позволит удобно настроить все параметры и сразу увидеть результат.

RealFaviconGenerator.net

Онлайн-генератор позволяет на основе всего одной вашей картинки (желательный размер исходника не менее 260×260) создать иконку для вашего сайта для всех типов браузеров и устройств.

После загрузки иконки мы увидим страничку, где сможем очень подробно настроить нашу иконку под каждую платформу и сразу же увидеть результат.

На вкладке настройки под iOS мы можем указать цвет фона для иконки, а так же указать размер отступов внутри области иконки. Вкладка Dedicated picture позволяет загрузить другой вариант иконки для конкретного типа устройства (аналогично для Android, Windows и Mac OS)

Под андроид настройки немного поинтересней. Можно как и в версии iOS указать цвет фона и отступы, также есть вариант прозрачного фона с фирменной тенью всех стандартных иконок этой ОС. Есть возможность указать конкретное имя приложения. Во вкладке Options мы можем указать URL, на который будет вести наше приложение.

Для закрепленных вкладок в Safari 9 под Mac OS X El Capitan используется новый вариант с svg иконками.

С плиточной системой Windows все немного сложнее. Тут указание цвета фона строго обязательно, а цвет логотипа в большинстве случаев лучше выбрать белый.

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

Внедрение в шаблон

После подкручивания настроек под наши нужды, можно наконец-то сгенерировать иконки. В появившемся окне мы увидим несколько вариантов подключения иконок. Чтобы подключить иконки привычным способом в файл HTML, достаточно скачать предложенный архив и вставить специально сгенерированный код между тегами head вашего сайта.

После чего можно проверить работоспособность ваших favicon тут.

Код для таск-менеджеров Grunt и Gulp

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

В своих проектах мы используем Gulp

1. Установите плагин gulp-real-favicon

2. Вставьте код в свой gulpfile.json

3. Замените TODO: Path to your master picture на путь до вашего исходника из которой будут генерироваться иконки. Например, assets/images/master_picture.png

4. Замените TODO: Path to the directory where to store the icons на путь до директории где будут лежать ваши сгенерированые иконки. Например, dist/images/icons

5. Замените TODO: List of the HTML files where to inject favicon markups на путь до файлов в которые будет вставлен код внедрения favicon. Например, [‘dist/*.html’, ‘dist/misc/*.html’]

6. Замените TODO: Path to the directory where to store the HTML files на путь до директории, где хранятся ваши HTML файлы.

7. Сгенерируйте иконки командой

8. Интегрируйте иконки в ваш шаблон

Заключение

Такие, казалось бы обычные действия, позволят вашему сайту выглядеть на различных устройствах еще более адаптивно.

P.S. еще немного полезностей

Если вы хотите узнать как видят favicon вашего сайта поисковики Яндекс и Google, можно воспользоваться специальными сервисами:

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих