//

Фавикон: как установить на сайт и для чего он нужен

Фавикон: как установить на сайт и для чего он нужен

обновлено: 04.12.2019
Александр Коваленко, CEO/founder агентства Advermedia.ua, опыт в SEO более 10 лет. Телеграм: @profseoua
12 м
1
29.11.2019

Вступление:

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

Содержание статьи:

  1. Что такое favicon
  2. Зачем сайту favicon?
  3. Как сделать иконку для сайта? 
    Сделать фавикон самому
    Заказать фавикон
  4. Где найти готовый ico
  5. Как добавить favicon на сайт
    Загрузка в корневую папку сайта
    Добавить код ico в шапку сайта
    Добавить фавикон на WordPress
  6. Добавление favicon на устройствах Android и iOS
  7. Подборка редакторов для создания фавикона
    Заключение

Вы однозначно неоднократно видите фавиконы сайтов, просто, возможно, не знали, что это фавиконы:

image5 - Фавикон: как установить на сайт и для чего он нужен

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

1. Что такое favicon? 

Мы уверены, что каждый из вас хотя бы раз обращал внимание на значки для сайта, которые располагаются во вкладках браузеров перед названием Интернет-ресурса. Это и есть фавикон. Любимые иконки ico и легли в название этих изображений, образовав слово favicon – favourite + icon

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

2. Зачем сайту favicon? 

В древние века, когда люди использовали Internet Explorer, зародился фавикон (В марте 1999 года Microsoft выпустила браузер Internet Explorer 5, который первым стал поддерживать значки для сайта). Многофункциональность браузера и возможность открывать сразу несколько вкладок позволили людям работать в режиме мультизадач. 

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

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

Итак, три основных причины сделать иконку для сайта уже сейчас: 

  • Быстрая запоминаемость;
  • Брендирование;
  • Удобная навигация в браузере.

Уже готовы сделать фавикон для сайта, но не знаете как вставить иконку на сайт? Давайте разбираться вместе. 

3. Как сделать иконку для сайта?

3.1 Сделать фавикон самому:

Естественно, для этого понадобятся навыки работы с графическими программами. 

Самый простой способ сделать favicon – использовать графический редактор. Создайте простые изображения и сохраните получившиеся картинки в формате ico. Для этого вам подойдёт любой из популярных редакторов: 

image1 300x103 - Фавикон: как установить на сайт и для чего он нужен

image2 300x102 - Фавикон: как установить на сайт и для чего он нужен

image7 300x95 - Фавикон: как установить на сайт и для чего он нужен

  • Или более простое решение MS Paint. 

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

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

Что ж, с инструментами разобрались, теперь перейдём к творческому процессу. Как сделать фавикон для сайта и какие идеи лучше всего использовать? 

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

Второй способ – это создание картинки “с нуля”, Здесь главное простота и уникальность. Сделайте максимально простое изображение, используя цвет вашего сайта. Это может быть геометрическая фигура, или заглавная буква названия ресурса. Такой фавикон сайта быстро становится узнаваемым в отличие от сложных графических элементов. 

3.2 Заказать фавикон

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

4. Где найти готовый .ico ?  

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

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

5. Как добавить favicon на сайт?

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

5.1 Загрузка в корневую папку сайта

Для отображения фавикона, поисковой робот Яндекса ищет необходимую картинку в корневой папке сайта. Поэтому чтобы добавить иконку на сайт, подключитесь по FTP к вашему сайту и загрузите файл с расширением .ico в корневую папку (public_html или htdocs). Предварительно назовите файл favicon.ico. Желательно, чтобы все буквы были в нижнем регистре. После этого браузер должен начать показывать выбранное вами изображение возле названия сайта. 

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

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

Как узнать путь до Favicon.ico на вашем сайте?

В коде страницы отыщите следующую строку, часть которой будет указывать путь к файлу. 

<lіnk rel="shortcut іcon" type="image/іco" hrеf="httр:путь_до_вашей_иконки/favicon.ico" />

Возможен и другой вариант написания ссылки: 

<lіnk rel="іcon" hrеf="http:путь_до_вашей_иконки/favicon.ico" tуpe="imagе/x-icon">

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

5.2 Добавить код ico в шапку сайта

Для того, чтобы красивые иконки для сайта отображались максимально качественно, они должны быть квадратной формы, а формат картинки должен быть с расширением jpg, bmp, gif или png. 

Сначала выбранное изображение нужно загрузить в каталог сайта с помощью файлового менеджера или FTP клиента. Если ваш хостинг расположен на базе Linux, используйте каталог public_html. Однако, каталог может отличаться в зависимости от хостинга или настроек сайта. 

Загрузите изображение в каталог вашего сайта. Для загрузки вы можете использовать Файловый менеджер или FTP-клиент. В хостингах на базе Linux, это обычно каталог public_html. Однако он может отличаться у различных хостингов или в связи с вашими собственными настройками. 

Для отображения фавикона в шапке сайта, пропишите следующую строку между тегами <head> и </head> в коде сайта:

<lіnk rеl="shortсut іcon" type="іmage/png" hrеf="/favicon.png"/>

При этом обязательно проверьте правильность написания формата, а также имени изображения. В результате у вас получится HTML код следующего вида:
image6 - Фавикон: как установить на сайт и для чего он нужен

5.3 Как разместить фавикон на WordPress?

Метод 1. Воспользоваться панелью управления WordPress

С версией WordPress 4.3 и выше, используйте панель управления администратора для добавления фавикона. Зайдя в панель управления, откройте пункт меню “Внешний вид” и затем выберите раздел “Настроить”. В появившемся окне выберите “Свойства сайта”, “Выбрать изображение” и загрузите файл с иконкой, которая и станет новым фавиконом.

После этого сохраните изменения и откройте сайт для проверки отображения фавикона.

Метод 2. С помощью плагина All In One Favicon

Для установки плагина откройте раздел меню “Плагины”, выберите функцию “Добавить новый” и установите All In One Favicon. 

Как только установите плагин, откройте Настройки и выберите плагин All in one Favicon. В строках ICO Frontend и ICO Backend загрузите картинку будущего фавикона и сохраните изменения. Готово. Фавикон установлен. 

6. Как добавить фавикон на устройствах Android и iOS? 

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

Поэтому, чтобы сделать идеальный фавикон для разных форматов, используйте специализированные сервисы, например: https://realfavicongenerator.net/.

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

Android

На выбор иконки для устройства на ОС Android влияет показатель плотности пикселей на дюйм, он же PPI (pixels per inch). Ниже мы приводим полную таблицу размеров фавикона и его соответствие плотности пикселей на дисплее устройств.

image4 - Фавикон: как установить на сайт и для чего он нужен

Обратите внимание, что изображение должно быть сохранено в формате png.

iOS

В случае с iOS устройствами на размер фавикона влияет наличие Retina-дисплея и версии операционной системы. 

image3 - Фавикон: как установить на сайт и для чего он нужен

Бонус! ТОП-8 сервисов для генерации фавиконов и готовых изображений в формате .ico

Попробуйте один из нижеперечисленных сервисов и выберите лучший вариант для вашего фавикона.

FaviconGenerator — если у вас уже есть готовое изображение, но его нужно преобразовать в формат иконки, воспользуйтесь данным сервисом. FaviconGenerator работает с такими форматами как .png, .jpeg, .jpg, .gif. 

AntiFaviconсоздать фавикон онлайн с текстом за считанные секунды с помощью AntiFavicon – не проблема.  

FavIcon from Pics — открываем сервис, указываем путь к папке с картинкой и ждём, пока программа преобразует изображение в готовую иконку в формате .ico или .gif.  

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

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

Generator — генератор иконок, аналогичный по функционалу с DeGraeve. Попробуйте оба и найдите лучшее решение для вашего сайта.

Online Favicon — создать или отредактировать мини-логотип для своего сайта теперь не проблема! 

Free Favicon Generator — простой генератор иконок, который поможет быстро создать для вас фавикон в нужном формате. 

Заключение

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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...
CEO/founder агентства Advermedia.ua, опыт в SEO более 10 лет. Телеграм: @profseoua