Найти в Дзене
Блог Web-Dev

Что такое favicon? Как сделать favicon для сайта?

В этой статье я поведую вам об одной фишке, с её помощью ваш интернет-проект может стать более заметным среди конкурентов. Сегодня мы будем разбираться в том, что такое favicon и как сделать favicon для сайта. Как должен выглядеть фавикон, зачем нужен и как установить его на сайт. Прежде, кто еще не знает, я поведую о том, что такое фавикон и какая от него польза в продвижении веб-ресурса. Что такое favicon? Favicon— это миниатюрное изображение, которая показывается в поисковой выдаче рядом с нашим сайтом. Сейчас фактически любой даже новоиспеченный веб-ресурс имеет в наличии свой фавикон. Миниатюрные картинки также можно лицезреть на вкладках браузера: Для чего нужен favicon Есть несколько причин и они очень важные. Первое, в поисковой выдачи подчеркнет индивидуальность вашего сайта среди всех остальных. При маленьком размере этой картинки оно более красочным и красивым конечно не будет, но чтобы быть непохожим на другие ресурсы этого вполне хватит. Второе, увеличение количества посет
Оглавление

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

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

Что такое favicon?

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

-2

Для чего нужен favicon

Есть несколько причин и они очень важные.

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

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

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

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

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

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

Как favicon должен выглядеть

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

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

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

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

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

Как сделать favicon для сайта

Тут всё элементарно:

  1. Найдите или сделайте подходящее изображение, которую хотите видеть фавиконом на своем сайте и сохраните изображение на компьютере.
  2. Зайдите на сервис image.online-convert.com. Данный сайт, переключите его на русскую версию, конвертирует различные файлы.
-3
  1. Войдите в "Конвертер изображений" и выберете подходящий формат (лучше выбрать ico). Далее жмете кнопку "Выберете файлы" и появится окно для выбора файла на вашем компе. Загрузив файл не забудьте указать размеры конвертирования файла, лучше установить размеры 32 на 32, т.к. 16 на 16 будет плохого качества. И нажмите "Начать конвертирование". После быстрого конвертирования вам будет предложено скачать полученный файл на ваш компьютер.
  2. Получив favicon.ico его необходимо будет загрузить с помощью менеджера файлов на хостинге или воспользовавшись FTP клиентом "Filezilla" на ваш сайт в корневую директорию.

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

Есть два способа прописать мини-картинку на сайте.

Код в head

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

Прежде чем через код прописать фавикон, нужно сперва закачать мини-изображение (32 на 32) к себе на сайт. Лучше использовать формат favicon.ico – роботы ищут данный файл даже без ссылок в корне веб-сайта.

Вслед за этим в шапке сайта в head установите вот этот код:

<link rel="icon" href="https://mysite.ru/favicon.ico" type="image/x-icon">

Либо пропишите этот код:

<link rel="shortcut icon" href="https://mysite.ru/favicon.ico" type="image/x-icon">

Не забудьте в урл-адресе "https://mysite.ru/favicon.ico" вместо моего домена mysite.ru написать свой и правильно укажите адрес и расширение картинки. Иначе у вас ничего не будет отображаться.

Плагин RealFaviconGenerator

Этот плагин предназначен для WordPress. Находите и ставите его на свой веб-сайт и активируете. В админ панели в настройках в строке "Внешний вид" появится строка "Favicon".

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

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

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