Уроки 1с-Битрикс: Как сделать FavIcon / Фавиконку на скорую руку

Приветствую, друзья. Сегодня мы поговорим о том, как сделать фав иконку на скорую руку. Фав иконка сайта – это такой маленький значочек, как правило он отображается в закладке окна браузера — вот здесь или вот допустим фав иконка Яндекса.

Так же фав иконка у нас отображается в поисковой выдаче поисковой системы, я сейчас вам покажу. Мы допустим пишем название моего домена и вот она фав иконка, вот это фав иконка Ютуба, фав иконка Яндекс карт и т.д.

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

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

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

И аккуратненько выбираем необходимую нам область, в данном случае вот так. Выделили, нажимаем на клавиатуре Ctrl+C. Потом нажимаем на клавиатуре Ctrl+N, это значит создать новый файл. Фотошоп автоматически нам предлагает те размеры того изображения, которые у нас скопированы в буфер, нажимаем окей. 

И далее нажимаем комбинацию клавиш Ctrl+V. вставили наш топорик. Далее нам нужно понять какого размера у нас картинка. Для этого мы с вами зажимаем опять же Ctrl+Alt и нажимаем кнопочку «i» на клавиатуре, там, где русская буква Ш. на экране у нас появляется такое окошечко «Image Size», так же это можно сделать через фильтр.

Третий слева пункт у нас, первый – файл, второй – редактирование, третий – Image, по-русски изображение. И здесь можно будет выбрать размер. У меня просто уже оно открыто. И так мы с вами смотрим параметры ширины и параметры высоты. Нас интересует вот этот параметр по высоте в данном случае. Он у нас 562 пикселя. Что мы делаем? Мы так же Ctrl+C копируем это, параметр 562 и создаем новый файл, также Ctrl+N нажимаем и делаем 562 на 562. Нам для фав иконки нужна квадратная картинка, одинакового размера.

Нажимаем окей. Теперь возвращаемся в окно с топориком, выделяем этот топорик, нажимаем Ctrl+А, там, где русская Ф – эта комбинация клавиш позволяет нам выделить всю область картинки, потом опять Ctrl+C, возвращаемся назад к нашей пустой области и нажимаем Ctrl+V. Вот мы сюда этот топорик поместили.

Для фав иконки такая картинка очень большая, стандарт для фав иконки это 16 на 16 пикселей. Для этого мы опять уменьшаем наше изображение, так же нажимаем Ctrl+Alt и i, там, где русская Ш. и указываем нужный нам размер 16, 16 пикселей, нажимаем окей.

Вот такой стал малюсенький топорик. Теперь нам эту картинку нужно сохранить. Для этого мы нажимаем Ctrl+Shift+Alt+S и сохраняем как «png 24». Вот прям на рабочий стол сохранить. Всё, картинка у нас готова.

Далее переименовываем картинку в нужное нам название, как правило это favicon и все что нам осталось сделать это закачать эту иконку на сайт.

В данном случае мы используем готовый сайт «аспро корпоративный сайт 3.0» и через панель настроек решения можно это сделать. В данном случае переходим здесь во вкладку «аспро», переходим в «настройки», «обязательные настройки для быстрого запуска» и вот здесь есть специальное поле favicon 16 на 16. Я уже сюда иконку добавил, но в целом делается это просто. Заменить файл, выбираем нашу иконку, нажимаем «применить». Проверяем. Вот он наш топорик здесь появился.

Если же у вас какое-то другое решение, не Аспро корпоративный 3.0, а какой-то другой шаблон для 1с-Битрикс, или вообще сайт кастомный, не на шаблоне. Тогда вы можете иконку просто закачать на сайт используя внутренний файловый менеджер в админке 1С-Битрикса.

Для этого мы с вами залогиниваемся, переходим во вкладку «контент». Далее «структура сайта», вот она идет здесь первая. Далее в «файлы и папки» переходим и вот здесь у нас открывается вот этот вот корневой каталог. И прям вот в этот корневой каталог мы с вами закачиваем иконку, в данном случае у меня уже иконка лежит favicon.png. можно нажать кнопочку «загрузить файл», выбрать файл и закачать иконку самостоятельно.

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

Как временное решение такую иконку сделать можно быстро и как вы видите просто. Немножечко я тут вас загрузил с нажатием комбинаций клавиш Ctrl+C, Ctrl+V и других, но на самом деле это все делается буквально за 2 минуты, это просто в видео и данной статье я растянул на 5-7 минут. А на самом деле это 1-2 минуты и иконка готова. В идеале конечно это заказать у дизайнера, который в специальной программе сделает иконку специально под вас. Вот так вот уже на постоянную основу. На этом у меня все, благодарю вас за внимание.