Как сделать favicon и установить его на сайт?

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


Новость 1. На блоге Николая Вилкова с 21-22 сентября стартует марафон кроссвордов, подробности здесь.

Новость 2.  В моей ванной твориться нечто, а все дело в том что я затеял там небольшой ремонт. Сначала удалял краску с помощь одной классной штуки, чуть стенку на кусочки не разнес, потом смывал побелку. А теперь осталось положить плитку. Решил класть плитку сам. Что из этого у меня выйдет, скоро расскажу и покажу. Подписывайтесь на обновления.

Новость 3. Скоро вы узнаете, какими онлайн-сервисами я пользуюсь, чтобы проверить скорость загрузки сайта. Не пропустите.

Новости рассказал, а теперь к делу. В сегодняшнем уроке речь пойдет про очень-очень маленький логотип сайта, который отображается в результатах поиска напротив вашего сайта  (актуально для Яндекс), Вот он…

Это так называемый favinon (фавикон) — небольшая картинка (16×16 пикселей), которая является так называемым значком веб-страницы или сайта.

По мимо основной своей функции значка, фавикон, как я уже сказал (при правильной установки на сайт) всегда отображаться в результатах поиска рядом с вашим сайтом

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

Как же сделать favicon?

Существует огромное количество онлайн-сервисов, с помощью которых вы можете нарисовать фавикон для сайта за пару минут. Примеры таких сервисов можно посмотреть здесь или здесь. Но я же предлагаю Вам научиться создавать (рисовать) фавикон с помощью бесплатного графического редактора GIMP. Вот как раз об этом и пойдет речь в моем новом видео-уроке. Приятного всем просмотра.

 

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

Здесь не чего сложного нет, достаточно скопировать созданный файл значка ico в корневую папку (раздел) вашего сайта (это где находятся папки wp-admin, wp-content, wp-includes). Затем нужно открыть файл header.php вашей установленной темы и перед закрывающим тегом </head> вставить следующий код.

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

Сделать это вы можете через админку блога в пункте «Внешний вид — Редактор». В правой области найдите файл header.php и откройте его для редактирования.

После это вставьте выше представленный код перед тегом </head> и сохраните изменения.

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

На этом у меня все. Всем спасибо за внимание!

А у вашего сайта есть favicon? Как вы его придумали?

 

С уважением, Антон Лапшин
автор блога http://AzbukaBloga.ru

Приз за первый комментарий
 

Комментарии: 8

  1. 2013-09-22 в 09:00

    Привет, Антон!
    А я просто заливал в папку public рисунок маленького разрешения favicon.ico и все отображается корректно, для чего код, что он дает? Вот если бы ты рассказал какого разрешения нужно заливать картинку для фавикона и какие сервисы помогают сделать фавикон из обычного рисунка или сделать самому, нарисовав пикселами разноцветными….
    Кстати, кроссворд у меня вышел, приглашаю.

  2. 2013-09-23 в 11:55

    Привет Николай!

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

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

  3. Кстати, у меня тоже бывало так,что простым копированием иконки favicon.ico на хостинг ничего не отображалось. Тогда приходилось вставлять код.

  4. 2013-09-28 в 10:21

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

  5. 2013-10-31 в 03:31

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

    • Антон Лапшин :
      2013-11-05 в 22:42

      Не знай Антон. Обычно строчка кода в файле header.php достаточно

  6. 2013-10-31 в 03:31

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

  7. 2013-11-19 в 23:48

    Наконец то я зашел на фавикон.ру и сам себе картинку нарисовал, получилось прикольно, мне кажется. Зато точно знаю. что такой не у кого нет -100%

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

На вверх