Как создать favicon (фавикон) для сайта: файл favicon.iсo

Привет всем, уважаемые посетители моего блога! Хочу предложить вам небольшой пост о том, как создать favicon (фавикон) для сайта. Эта статья даст необходимые инструкции по созданию файла favicon.iсo (фавикона), а также расскажет о том, какой сервис для этого использовать, как сделать, чтобы фавикон сайта появился в поисковой выдаче Яндекс рядом со ссылкой на ваш проект.

Прежде всего объясню, что это такое. Слово favicon получилось от слияния двух английских слов: favorite (любимый, избранный), icon (иконка, иллюстрация, символ). Вы, наверное, не раз замечали, что в строке различных браузеров появляется небольшой значок, который является по сути логотипом данного проекта. Благодаря ему сайт или блог wordpress становится узнаваемым, а значит, приобретает дополнительные преимущества при продвижении, улучшая поведенческие факторы ранжирования ресурса. Кстати, можете проверить наличие фавикона при осуществлении seo анализа конкурентов сайта (в том числе их показателей тИЦ и ПР).

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

Как создать favicon (фавикон) для сайта в онлайн генераторе favicon.cc

Для начала скажу, что иконка для фавикона должна представлять из себя графический файл размером16×16 пикселей и сохраняться в формате iсo. Можно сделать favicon, используя фотошоп, но не все с ним на дружественной ноге, в придачу он не может сохранять файлы формата iso. Поэтому проще и быстрее сделать это, используя онлайн сервисы (их еще называют on-line генераторы).

Я исследовал несколько сервисов по созданию фавиконов, но лучше, чем favicon.cc, пожалуй, не нашел (это, конечно, мой субъективный взгляд, который не претендует на исключительность, поэтому в конце поста дам альтернативные источники). Он имеет кучу преимуществ перед подобными сервисами. Здесь можно создать favicon с нуля, загрузить понравившуюся вам картинку, впоследствии отредактировав ее; кроме того, есть возможность выбрать уже готовое изображение. Итак, переходим по данной выше ссылке:

Сначала попробуем сделать фавикон сами. В центральной части расположена область, разделенная по пикселам (квадратикам). Здесь мы будем создавать изображение. В правой части под надписью «Color Picker» даны инструменты для генерации картинки. Передвигая  ползунок внутри квадрата палитры, нажав на левую кнопку мыши, корректируем необходимый оттенок цвета, который можно получить, если перемещать вертикальный ползунок вниз-вверх:

Если передвинуть горизонтальный ползунок «Transparency» вправо-влево, добьемся изменения прозрачности цвета. Показатель 0% означает полностью непрозрачный фон, 100% - наоборот, полностью прозрачный. В процессе «рисования» favicon поставьте «галочку» напротив инструмента «transparent», если желаете полностью удалить не понравившийся цвет с какого-либо пиксела.

Если не хотите «водить» ползунок по палитре, отметьте «галочкой» «pick existing color», кликните левой кнопкой мыши последовательно по палитре, затем по пикселу, цвет которого хотите изменить. Инструмент «move» позволяет передвигать изображение в желаемом направлении, зажав его левой клавишей мышки.

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

Обратите внимание, чем еще мне нравится этот сервис, что в браузере, а также предосмотре «Preview», расположенном ниже, одновременно с манипуляциями на «холсте» появляется изображение будущего фавикона, которое меняется в такт всем действиям:

Теперь, переставив ползунок «Transparency» на значение 50%, меняю прозрачность некоторых пикселов:

Далее использую «move» для перемещения изображения:

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

Использование готового изображения для создания фавикона в онлайн генераторе favicon.cc

Как я уже отмечал, здесь можно не только создать фавикон с нуля, но также использовать уже готовое изображение. Для этого нажимаете «Import Image» на главной странице favicon.cc:

Затем выбираете файл с компьютера. Следующим шагом отмечаете «Keep dimensions», если хотите сохранить пропорции; «Shrink to square icon» - картинка будет квадратной. Нажимаете «Upload», изображение загружено:

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

Согласитесь, белый квадратик все портит. Для того,чтобы убрать его, необходимо использовать для коррекции инструмент «Transparency». Передвинув ползунок вправо до значения 100%, делаем белые пикселы вокруг рисунка «прозрачными»:

Теперь фавикон в браузере стал симпатичнее:

После того, как изображение будет готово, необходимо скачать его на компьютер. Для этого кликаете кнопку «Download Favicon», картинка сразу сохраняется в формате iсo.

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

  • Favicon.ru  -  простой русскоязычный генератор, думаю, там все просто
  • Favicongeneranor - on-line генератор, аналогичный предыдущему, только англоязычный
  • DeGraeve - очень функциональный сайт по созданию фавиконов, подобно favicon.cc, здесь можно создать иконку для своего ресурса с нуля, загрузить готовое изображение с целью редактирования и последующего его сохранения в нужном формате

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

Как загрузить файл фавикона favicon.ico на сайт

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

1. Файл favicon.iсo загрузить в корневую папку блога (вашего хостинга), у меня, например, он находится в папке public_html:

Теперь для проверки откройте ваш ресурс в браузере, например, я работаю с сайтом в Гугл Хром (здесь читайте подробнее). Иконка должна быть на месте. Советую проверить отображение favicon в других браузерах: Opera (тут о том, как скачать бесплатно новейшую версию, установить и настроить Оперу), IE (а здесь - об Интернет Эксплорере), Mozilla Firefox (тут мануал об этом браузере). Если ее нет, попробуйте перезагрузить страницу. В случае отрицательного результата необходимо почистить кэш (тут - что такое кеш браузера и как очистить cache). Но, в общем, все должно получиться.

2. Далее открываем файл header.php (можно в админ-панели wordpress) и прописываем 2 следующие строки между тегами <head> и </head>:

&lt;link rel=&quot;shortcut icon&quot; href=&quot;http://url вашего сайта/favicon.ico&quot; type=&quot;image/x-icon&quot; /&gt;
&lt;link rel=&quot;icon&quot; href=&quot;http://url вашего сайта/favicon.ico&quot; type=&quot;image/x-icon&quot; /&gt;

Прописываете адрес вашего ресурса, отредактированный файл favicon.ico будет выглядеть следующим образом:

Чтобы поверить корректность изменений файла header.php, нажмите комбинацию клавиш ctrl+u, после этого должна открыться вкладка, где будут видны  проставленные вами строчки:

На самом деле второй шаг предназначен для того, чтобы Яндекс 'узнал' favicon.ico вашего сайта. Но не ждите, что сразу же favicon для сайта окажется в поисковой выдаче Yandex рядом с вашей страницей, должно пройти некоторое время. У меня это случилось через 2-3 выдачи, после этого где-то через неделю я увидел следующее:

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

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

Еще статьи по данной теме:
Самые интересные публикации из рубрики: SEO и SEM продвижение сайта

15 отзывов

  1. Таисия

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

  2. Oleg

    Здравствуйте, м.б. вы мне подскажите. Установил Favikon, создал его, загрузил через FileZilla в папку public_html, он тут же появился напротив адресной строки. Беда в том, что я загрузил не ту картинку, по сути черновик. выглядит ужасно. Тут же удалил его и поставил новый. Но ничего не изменилось, напротив адресной строки остался прежний. Подскажите пожалуйста, как его можно убрать?

    1. Игорь

      Олег, сначала попробуйте перезагрузить страницу. Если не поможет, удалите куки из браузера. У Вас работает кэширование? Если установлен, например, плагин кэширования Hyper Cache, возможно, дело в этом. Просто зайдите в настройки плагина и очистите кэш.

  3. Юрий

    Не появляется новый. Почистил кэш сайта, кэш и куки браузера, а появляется прежний. Хотя как? Он работал при подключенном плагине Favicons, сейчас я его деактивировал. Что это значит? Подскажите пожалуйста. Или назад все возвращать?

    1. Игорь

      Юрий, немного не понял. Вы пишите так, как будто мы уже общались на эту тему, на деле же это ваш первый комментарий. Если я правильно понял, ранее у Вас стоял плагин, который генерировал фавикон, теперь Вы решили избавиться от плагина и одновременно поменять иконку фавикона, но в браузере отображается прежняя картинка? В браузере или в выдаче? Просто если только в выдаче, то следует немного подождать, Яндекс не сразу идентифицирует иконку. Если же она у Вас и в браузере не появляется, то надо просто проверить путь до фавикона, возможно, Вы указали URL до старой картинки. Проверьте, где расположен новый фавикон.

      1. Юрий

        Игорь, сделал выводы и написал на основании Вашей статьи и комментариев. Все ясно и понятно, что за чем делать. Так и сделал, но новый фавикон не появляется. В комментариях выше, вы уточнили, что необходимо сделать:"сначала попробуйте перезагрузить страницу. Если не поможет, удалите куки из браузера." И еще:"Просто зайдите в настройки плагина и очистите кэш." Я все это сделал-не помогло. Прежний (который и сейчас стоит и в браузере и в поиске) фавикон показывался из настроек плагина, в корневой папке его не было. Все сделал точно так, как Вы и рекомендовали. Новый фавикон расположен в папке public_html.Подскажите, что не так?
        P.S. В момент написания комментария еще почистил кэш браузера. Все заработало! Спасибо!

        1. Игорь

          Юрий, значит, все в порядке?

          1. Юрий

            Да с фавиконом разобрался. Спасибо!

  4. pikasso

    где то видел скрипт где можно менять каждый час иконки фавиконов...вы такой не встречали?

    1. Игорь

      Нет, такого не встречал. А скажите на милость, зачем это нужно?

  5. Urmat

    Отлично, сделал буквально за 10 минут все необходимые процедуры.
    Все стало как надо, надеюсь. В принципе, в будущем надо хорошо подработать иконку, а так норм. Спс

  6. артем

    спасибо большое! ваш код прописал и сразу фавиконка появилась. до этого пытался использовать коды на других блогах - ничего не получалось!

  7. Сергей Фатеевич

    Хоть у меня и есть favicon на сайте, но все равно статья интересная была, кое-что нового узнал для себя. Спасибо Игорь.

    1. Игорь Горнов

      Пожалуйста, Сергей Фатеевич.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Чтобы ввести любой код, вставьте его между [php] и [/php]. Ссылка (URL), помещенная в текст комментария, не будет активной. C целью ее выделения и более удобного копирования можно заключить ее между тегами <pre> и </pre>.