Здравствуйте!

В этой статье расскажу о том, как создать современную иконку для сайта, она же favicon.

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

С чего начать создание

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

Далее, есть несколько путей — нарисовать, заказать или скачать(и немного изменить). Мы пойдем простым путём…

Поиск иконки в интернете

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

Я рекомендую использовать монохромные(одноцветные) иконки.

Несколько сайтов в помощь:

game-icons.net — В основном, иконки на игровую тематику, но можно что-то подобрать и для блога. Поиска по сайту нет, придется искать вручную. Ищите по ключевым словам. Сайт на английском языке.

iconsdb.com — На сайте почти 4000 одноцветных иконок. Есть поиск. На английском языке.

Выбирайте иконку размером не меньше 70 на 70 пикселей, а для лучшего результата, не менее 256 на 256.

Создание иконки (редактирование)

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

Пример:

Используем онлайн генератор favicon

После того как Вы сделали свою иконку, переходите на сайт http://realfavicongenerator.net/

Далее, нажимайте на кнопку «Select your Favicon picture» и выбирайте свою иконку.

После чего, перед вами появится следующее:

В первом блоке — настройки для устройств на iOS (для техники от Apple).

По-умолчанию, система iOS заливает прозрачный фон чёрным цветом. Можно изменить цвет заливки, переключившись на «Add a solid, …» и выбрать цвет.

Чуть ниже, можно подогнать размер самой иконки.

На вкладке «Dedicated picture» Вы можете заменить её на другую.

Во втором блоке — настройки для устройств на Android.

«No change, …» — оставить без изменений(оставить прозрачный фон).

«Add a solid, plain background…» — добавить фон. Ниже, так же, можно выбрать цвет и подогнать размер.

«Apply a slight drop shadow, …» — Применяются небольшие тени, похожие на те, которые есть у приложений Google.

«App name» — можете вписать адрес или название сайта.

«Theme color» — можно задать цвет панели задач в Андройде.

На вкладке «Options» можно настроить ярлык, который будет на рабочем столе (Android).

Browser (Браузер). Вэтом режиме, когда пользователь щелкает на ссылку, Андроид Хром ведет себя так, как если бы страница была открыта как и обычный сайт.

Standalone (Автономный). В этом режиме, Андроид Хром дает чуть больше родного стиля на открывшейся странице. В частности, позволяет применять стартовый URL-адрес и ориентации экрана. Также убирает панель навигации и делает для сайта собственную вкладку в меню переключения задач.

В поле Start URL можете ввести адрес своего сайта.

Not specified (Не указан). Андроид Хром будет вести себя так, как он обычно делает, когда пользователь поворачивает своё устройство.

Force screen orientation to Portrait. — Принудительно отображать как на вертикальном экране.

Force screen orientation to Landscape. — Принудительно отображать как на горизонтальном экране.

На вкладке «Dedicated picture» Вы можете заменить её на другую.

В третьем блоке — настройки для устройств на Mac OS и Windows 8, 10.

В Safari 9 для Mac OS X El Capitan реализованы закрепленные вкладки. Эта функция использует специальный значок. Этот значок должен быть монохромным, а Сафари сделает все остальное.

Use a silhouette of the original image. Works well with pictures with significant transparent regions. — Использовать силуэт исходного изображения. Хорошо работает с картинками с прозрачными областями.

Turn your picture into a monochrom icon. Play with the threshold to get the best result. — Превратите свою фотографию в монохромный значок. Для лучшего качества, переместите ползунок направо, до конца.

No icon. Safari uses the first letter of your domain name to create a default icon. — Без значка. Сафари использует первую букву имени вашего домена, чтобы создать значок по умолчанию.

Theme color— можно задать цвет темы.

На вкладке «Windows 8 and 10» настройки для Windows соответствующих версий.

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

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

Use the original favicon as is — Использовать оригинальную иконку.

Use a white silhouette version of the favicon. Works well with pictures with significant transparent regions. — Использовать белый силуэт. Хорошо работает с картинками с прозрачным фоном. Рекомендую использовать именно этот вариант.

В четвёртом блоке — настройки генератора

Первая вкладка — Path — Путь

I will place favicon files… — Размещение файлов в корне сайта.

Вторая опция — для размещения файлов в другом каталоге. В поле, можете указать полный путь до нужного каталога. Рекомендую использовать данную опцию и создать каталог, типа favicon, так как будет 30 файлов для фавиконки.

Вторая вкладка — Version/Refresh

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

Вкладка Compression

Тут можно выбрать метод сжатия вашей картинки.

Вкладка Scaling algorithm

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

Вкладка App name

Для iOS и Windows 8 можно задать специфическое название для сайта, выбрав вторую опцию и вписав название в поле.
Вот и все настройки. Остаётся нажать на кнопку Generate your Favicons and HTML code и следовать инструкции.

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

Всё достаточно просто!

Шаг 1. Скачивайте архив, нажав на кнопку Favicon package.

Шаг 2. Распаковать архив в корень сайта либо в тот каталог, который Вы указали в настройках(на вкладке Path).

Шаг 3. Скопировать и вставить указанный код между <head> и </head>.

Шаг 4. Необязательный. Можно проверить иконку, кликнув на ссылку check your favicon.

Если она не отображается, то удалите кэш сайта и браузера.

Вот и всё! Не очень сложно, но зато увлекательно.

.