Как создать фавикон для сайта!

На этом сайте вы узнаете что такое фавикон, ознакомитесь со способами создания фавикона, научитесь установливать его на свой сайт.
Что такое фавикон и для чего он нужен?
Фавикон (Favicon) - это небольшой значек (иконка) сайта, который отображается браузером во вкладке перед названием страницы, а в качестве картинки - в разделе "Закладки" . Также они отображаются рядом с названием сайта в списке выдачи некоторых поисковых систем (например, Yandex).

Название Фавикон (Favicon) происходит от сокр. англ. FAVorite ICON — «значок для избранного».

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

Впервые фавикон появился в 1999 году в браузере Internet Explorer 5, с тех пор изменилось немногое.


Вот так фавикон выглядит в закладках Google Chrome:
Также фавикон сайта вы можете увидеть в адресной строке браузера перед url или возле заголовка закладки, в истории браузера:
Преимущества использования фавикона
Запоминаемость
Фавиконы повышают запоминаемость вашего сайта, особенно, если постараться сделать его заметным и соответствующим тематике сайта.

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

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

Хорошо подобранный фавикон должен в маленьком изображении размером с горошину отражать суть вашего сайта.
Узнаваемость
Что бы не говорили, а непроизвольно люди замечают фавиконы. По фавикону им легче найти нужный сайт среди множества открытых в браузере страниц, поэтому, если вы задумываетесь об уникальности и оригинальности вашего сайта, вы обязательно должны уделить внимание и этому маленькому изображению.
Особенности отображения фавикона
В поисковых системах
Google
В поисковой системе Google фавиконы не отображаются. Это один из тех моментов, когда в сторону Google летят камни. Не понятно с чем связано отсутствие фавиконов в выдаче Google, но проводимые опросы среди пользователей говорят о том, что они этим категорически не довольны. Это мнение не веб-мастеров, а обычных пользователей, которые не имеют никакого отношения к оптимизационным процессам.

Подтверждением этого является то, что Google сам признал это косяком и, чтобы как-то решить ситуацию, выпустил плагин для Mozilla, который отображает фавиконы в Googlе.

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

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

Но кроме этого у Яндекса есть еще такое понятие как индексация фавиконов. То есть в поисковой системе Яндекс существует бот, который занимается именно индексацией фавиконов, а не контента. На индексацию нужно в среднем от 1 недели до 1 месяца.

Есть два основных способа проверить индексацию вашего фавикона:

- ввести адрес вашего сайта в поиске Яндекса и посмотреть будет ли у вашего сайта фавикон в выдаче;
- зайти на Яндекс Вебмастер и проверить есть ли favicon.ico.

К сожалению, в поисковой выдаче других поисковых систем, как Mail.ru, Rambler, Bing, Ask, Yahoo фавикон также не отображается.
В браузерах ПК и на смартфонах
Несмотря на то, что фавиконы отсутсвуют в выдачах некоторых поисковых систем, они отображаються в браузерах компьютеров и смартфонов.
А также возникает вопрос: "Какого размера должен быть фавикон?". Для того, чтобы фавикон отображался на всех устройтвах необходимо использовать несколько изображений разных форматов и размеров.

Рекомендуется использовать фавикон размером 16х16 пивкселей в .ICO формате. Стоит отметить, что файл формата ICO подразумевает вхождение нескольких картинок разных размеров и разного качества. Именно этот размер и формат изображения лучше всего использовать, чтобы картинка отображалась в большинстве браузеров таких, как IE, Safari, Chrome, Firefox и так далее.

Если разобраться, то Chrome, Firefox, Opera 7+, и Safari 4+, все они поддерживают также PNG формат фавикона, но Chrome и Safari выбирают ICO favicon, если в корневой папке сайта предствалены оба формата. С другой стороны, Браузер InternetExplorer не поддерживает PNG favicon и проигнорирует его, загрузив ICO версию, если она будет в наличии.

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

Для устроиств на Android подойдут фавиконки формата PNG, но поскольку устройства имеют разное разрешение, необходимо делать иконки разных размеров. Та же ситуация с IOS-устройствами.

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

Чтобы приступить к работе с этим генератором, вам необходимо иметь готовое изображение для будущего фавикона размеромм 260х260 пикселей.

Оценить правильно ли все установлено и будет ли фавикон корректно отображаться на разных платформах можно с помощью сервиса проверки фавиконов.
Как сделать фавикон?
Способ 1: воспользовавшись специальным сервисом Logaster.ru.

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


Способ 2: с помощью сервисов, в которые встроены инструменты рисования, а также возможность загружать со своего компьютера изображение, чтобы уменьшить его до нужных размеров.

Таких сервисов много, приведем некоторые примеры:

1. Favicon.ru

2. Xiconeditor.com

3. Favicon-generator.org

Способ 3: зайти на специальные базы иконок для сайта и скачать готовый фавикон:

Thefavicongallery
- содержит около 300 иконок, изображение можно сразу сохранить на свой компьютер;

Audit4web
- на сайте вы найдете галереи фавиконов разных тематик;
Iconj- здесь также довольно большое количество иконок, около 3 тыс. фавиконов, кроме изображений можно найти также анимированные иконки.
Способ 4: заказать у дизайнера. Вы можете заказать фавикон у местного дизайнера или найти дизайнера на специальных сервисах, например, Zilliondesigns.

Фавикон, созданный дизайнером будет уникальным и професиональным, но у вас не будет такого большого выбора иконок, займет не мало времени это будет дорого - от $ 200.
Способ 5: используя графические редакторы - Photoshop.
Не самый легкий способ, требует больших затрат времени, но с помощью Photoshop можно создать действительно что-то оригинальное и уникальное.

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

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

Однако, всё-таки рекомендуется прописать в коде вывод фавикона. Те, кто мало общего имеет с разного рода кодами, не пугайтесь. Всё довольно просто.

В этом случае, вам предстоит сделать два шага:

1. Добавьте файл под названием favicon.ico в корневой каталог вашего сайта (т.е. в папку, где находятся wp-content, wp-admin и т.п.).

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

2. Пропишите в заголовках HTML-страниц (как правило, между тегами <head> и </head>) следующий код:

<link href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">

<link rel="shortcut icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">

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

При возникновении такой проблемы, рекомендуем использовать временный HTML-код:

http://example.com/favicon.ico?v=2" />

Таким образом, браузер воспримет этот уникальный URL и будет запрашивать его повторно, таким образом возобновляя кэш. Значение v=2 здесь - параметр версии URL, каждый раз обновляя иконку повышайте этот параметр, чтобы браузер сохранил последнюю подходящую иконку. Когда вы посчитаете, что наконец-то подобрали подходящий фавикон, этот код можно удалить.
В заключение
Можно сделать вывод, что фавикон играет большую роль при идентифакации вашего ресурса: делает его запоминающимся и оригинальным. Также наличие фавикона стимулирует пользователя к посещению сайта.

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

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

Создание фавикона через онлайн сервис наиболее выгодный вариант с точки зрения качества, затрат времени и цены.
Made on
Tilda