Как установить фавикон на сайт: подробное руководство

Здравствуйте, дорогие друзья! Хотите научиться впечатлять ваших посетителей еще до того, как они посетят ваш сайт? Смелое заявление, не так ли? Только представьте, ваши потенциальные подписчики еще не зашли на ваш блог, никогда о нем не слышали, но они уже заинтересованы и стремятся как можно быстрее на него попасть!

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

Что такое фавикон

Разберемся для начала с терминологией.

Зайдите в вашу любимую поисковую систему и наберите любой поисковый запрос, ну, например, «кредит». А теперь внимательно посмотрите на результаты выдачи.

Видите эти небольшие квадратики, которые расположены слева перед названием? Вот это и есть фавиконы.

Большие компании пытаются запихнуть в них свои логотипы. Это очень хорошо получается у всех, как вы видите.

Нам, блоггерам и владельцам информационных сайтов, тоже глупо обходить стороной возможность таким чудесным способом привлечь внимание к своим онлайн-ресурсам!

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

Делаем фавикон

Чтобы что-то куда-то устанавливать, сначала надо его сделать. Существует два разных способа:

● Вручную — для этого подхода вам понадобится открыть Photoshop, Paint или другой графический редактор и создать изображение размером 16 на 16 пикселей. Да, это очень мало, поэтому придется работать в увеличенном режиме и наблюдать квадратики. Никаких особых навыков данная процедура не требует, ведь вы можете просто уменьшить имеющийся логотип, главное — чтобы он имел именно квадратную форму.

Если работаете с лого, то пытайтесь, чтобы оно занимало всю площадь, ведь если сделаете рамку, то она съест 64 пикселя из 256!

● С помощью онлайн-сервисов — это еще проще: загружаете имеющееся изображение, и оно превращается в фавикон. Честно говоря, я не являюсь сторонником такого подхода, так как мне и самому несложно сделать процедуру resize. Я предпочитаю самостоятельно контролировать этот процесс, потому как при автоматическом походе может упасть качество.

Следите за тем, чтобы изображение было в формате .PNG, оно занимает больше места чем .JPG, но позволяет сохранять качество. Второй вариант — сохранить изображение в формате .ICO, это — специальный формат для такого типа файлов

Единая инструкция для всех веб-сайтов

Вне зависимости от того, какой движок использует ваш веб-сайт, — Joomla это, Битрикс, Opencart или что-то самописное на html или php, вы все можете сделать самостоятельно и без каких-либо сторонних плагинов или скриптов.

Существуют две вариации. Они зависят от того, в каком формате вы сохранили изображение. Например, если это .ICO, методика следующая:

● Разместите фавикон в корень сайта. Корень — это то место, где содержатся все файлы. Например, для WordPress — это папка, в которой расположены папки wp-admin, wp-content, wp-themes и много файлов по типу wp.config.php. В данном случае веб-сайт поймет, что это favicon, и будет подсовывать его браузеру, чтобы тот использовал перед заголовками в результатах выдачи.

Если же вы сохранили изображение в формате .PNG, тогда схема чуть сложнее:

● Разместите фавикон в корень сайта.

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

В зависимости от движка, который вы используете, это может быть index.php, index.html, footer, php и другой. Между тегами head вам придется вставить следующую строку:

<link rel=»shortcut icon» href=»/favicon.png» type=»image/png»>

А если вы, например, сохранили этот файл не в корень сайта, а папку img, то адрес будет другим:

<link rel=»shortcut icon» href=»/img/favicon.png» type=»image/png»>

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

Favicon для сайтов на Ucoz

А что с Ucoz? Вот это правильный вопрос, ведь не все используют собственные веб-сайты на Вордпресс. Многим по душе, например, юкоз или wix.

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

● Зайдите в панель управления сайтом и выберите вкладку «Файловый менеджер».

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

Вот и все!

Favicon для Wix

Есть такая набирающая обороты система управления контентом как Wix. С ней не все так просто. По умолчанию доступа в корень сайта вам никто не дает. Есть два варианта.

● Купите premium плагин. Их есть несколько, называются по-разному.

● Подключите свой собственный домен к вашему веб-сайту.

Все это — услуги платные. А что же вы хотели? Wix — это удобно, понятно, но за это требуется платить, в противном случае на вашем сайте будут демонстрироваться рекламные блоки, а также не будет многих функций. Чтобы не попадать в подобные ситуации, я и использую блог на личном домене и моем личном веб-хостинг аккаунте. Могу любые файлы добавлять в любые папки абсолютно бесплатно. За хостинг, правда, все же плачу!

Автоматические решения

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

Из списка самых популярных могу выделить Favicon by RealFaviconGenerator, All In One Favicon и многие другие.

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

Бывают действительно полезные решения, такие как Yoast или All-In-One-Seo, а уж потратить одну минуту на то, чтобы внести такие несложные изменения, думаю, может любой человек вне зависимости от степени его квалификации.

Советы по внешнему виду фавикона

А теперь поделюсь с вами своим мнением по поводу того, как должен выглядеть favicon, и чего на нем быть не должно:

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

● Лучший цвет — это красный. Если он присутствует в вашей цветовой гамме — хорошо, если нет — думаю, специально добавлять не стоит. Хотя помню, когда-то читал, что один вебмастер значительно повысил кликабельность ссылок в результатах выдачи после того, как добавил очень простой фавикон — красный квадратик. Потом пошел дальше: сделал красную стрелочку, которая указывала на title.

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

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

Инструменты для создания фавикона

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

● Фотошоп — наверное, самый лучший инструмент. Его мощностей вполне хватит, есть лишь проблема: это — платное решение.

● Pixlr — это бесплатный online-аналог Фотошопа. Все то же самое, только ничего не надо покупать и устанавливать на свой компьютер. Правда, придется наблюдать в правой колонке рекламные баннеры. Но процесс создания действительно ничем не уступает Фотошопу.

● GIMP — бесплатное, свободно распространяемое программное обеспечение, альтернатива Фотошопу, которая, как говорят одни, во многом ему уступает, а как говорят другие, во многом его превосходит. Нам же важно то, что мы без проблем добьемся цели.

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

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

Вы готовы зарабатывать в Интернете серьезные деньги? Тогда обратите внимание на курс «Как создать свой сайт» от Василия Блинова. Василий — известный онлайн-предприниматель, рассказывает о том, как создать свой блог и зарабатывать на нем очень хорошие деньги.

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

Буду очень рад видеть вас в следующий раз. А на этом прощаюсь!

Пока!