Favicon — что это такое, зачем нужен и как установить favicon на сайт? Обзор онлайн инструмента + сборник значков

Говорят, что удобство складывается из мелочей. Это справедливо и в отношении сайтов в интернете. Тщательно продуманный проект в интернете создает впечатление того, что действительно представляет ценность для посетителя. Поэтому при отрисовке дизайн нужно учесть массу элементов: от крупных блоков до маленьких значков. И сегодня мы поговорим об одной, казалось бы мелочи в оформлении сайта. Речь пойдет об favicon.

  • Что такое favicon и зачем он нужен?
  • Как сделать favicon привлекательней: основные принципы
  • Как самостоятельно нарисовать фавикон для сайта и установить на сайт?

Что такое favicon и зачем он нужен?

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

Обычно формата ICO, но бывает и PNG, JPG. Я советую делать именно по ICO, так как он будет точно отображаться во всех браузерах. Распространенные в пикселях: 128 х 128, 64 х 64, либо 32 х 32.

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

что-такое-фавикон-и-зачем-он-нужен

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

Как сделать favicon привлекательней: основные принципы

  1. Один стиль и оформление с сайтом. Цвет, стилистика, должны совпадать. Часто использование элементов логотипа оказывается очень кстати.
  2. Простота. Лучше 1 ясный элемент дизайна, чем 2-3, но мелких и непонятных.
  3.  Ассоциации с тематикой. Значок должен наталкивать на тему сайта. Ведь в этом и цель — помочь посетителю различать разные открытые у себя сайты.

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

Рассмотрим несколько способов:

Способ 1. Найти подходящий готовый значок в интернете, скопировать его, и поставить себе на сайт.

Я подготовил небольшой архив со значками из интернета: Скачать сборник значков favicon

Хотя данный метод и имеет право на существование, но имеет ряд недостатков: во-первых, значки маленького разрешения, да ещё и плохого качества. И во-вторых — не всегда подходящие по тематике и цвету.

Способ 2. Нарисовать самостоятельно через онлайн генератор Favicon.  

Пример такого генератора: http://www.favicon.by не уверен, что у многих получится красиво сделать это вручную, он очень напоминает Paint :), очевидно что уровень значка тоже будет соответствующий, но поэкспериментировать можно.

Способ 3. Нарисовать в программе фотошоп, и через онлайн сервис переформатировать в ICO.

Данный способ опробован мной не раз и показал себя с очень хорошей стороны. Значки получаются нужного разрешения и качества. Поэтому мы разберем третий способ подробнее:

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

Шаг первый: нарисовать иконку в фотошопе. Здесь у вас полная воля для творчества. если основные принципы соблюдены, ваш нарисованный фавикон будет выглядеть супер!  

как-нарисовать-фавикон

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

Шаг второй: Используя онлайн сервис переформатировать PNG в формат ICO. Переходим на сайт онлайн инструмента ConvertICO и следуем дальнейшим инструкциям.

Перейти на сайт ConvertICO

как-нарисовать-значок-для-сайта-сервис

Использование данного сервиса очень просто. Кликаем в область «Drop your .png or .ico files here, or click to select them manually!«, выбираем нашу картинку PNG и справа сразу появится переформатированная иконка в нужном формате. Сохраняем её и пользуемся.

Шаг третий. Установка на сайт. Для того, чтобы ваш фавикон успешно отобразился во вкладке браузера, нужно загрузить его в корень сайта, в самую начальную папку на хостинге. называться значок должен «favicon.ico» После этого в коде сайта, между тегами <head> вставляем следующее:

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

 

Автор / редактор:
Фрилансер, веб-дизайнер
50+

выполненных
проектов “под ключ”

4+

года опыта
работы

100+

довольных
клиентов

Ваш комментарий