Создание и установка favicon. Фавикон во благо блогу!

Как вставить favicon? Фавикон WordPress – во благо блогу!Всем здравствуйте. Ранее мы уже научились менять фон сайта, а сегодня более тонко поработаем над дизайном и узнаем, что такое favicon (фавикон WordPress) и зачем он нужен. Также на практическом примере рассмотрим, как сделать и как вставить favicon на сайт.

Для чего нужен фавикон? Если простыми словами, то это иконка (изображение), которая размещается перед адресом сайта в адресной строке браузера и в закладках:Как вставить favicon? Фавикон WordPress

Ко всему прочему фавиконка отображается возле ссылки блога в поисковой выдаче Яндекса: Как вставить favicon? Фавикон WordPress

Эта иконка представляет собой логопит блога в миниатюре и ставить её следует в обязательном порядке. Создать фавикон WP можно быстро, и всё же стоит отнестись к этому делу ответственно, ведь основная задача значка – выгодно выделить свой блог среди других многочисленных площадок в интернете.

Само название favicon пошло от английских слов FAVorite ICON, что в переводе означает значок для избранного или любимая иконка. Такое название пошло из-за того, что первоначально значок отображался в браузере Internet Explorer рядом с закладками, которые именуют избранными.

Сервисы онлайн с готовыми favicon

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

  • iconj.com – одна из самых симпатичных бесплатных коллекций фавиконов.
  • findicons.com – лучший сервис для поиска значков и логотипов.
  • favicon.cc – отличное место для поиска, где можно бесплатно скачать favicon для сайта или блога, а после его поставить.
  • audit4web.ru –  хороший выбор иконок для сайта.

Как создать WordPress favicon (фавикон) с нуля?

  1. Переходим на сервис по созданию фавиконов онлайн favicon.ru.
  2. Откроется окно, где в палитре нужно выбрать цвет (1) и приступить к рисованию этим цветом своей картинки с помощью одного из представленных инструментов (2) в окне (3). Для применения свойств цвета нужно просто нажимать на клеточки. Для понятности смотрите подсказки на самом сервисе (4):
  3. Чуть ниже можете мгновенно посмотреть, как Ваша онлайн фавиконка выглядит в адресной строке браузера и если результат устраивает, тогда скачиваем изображение:Favikon скачать онлайн
Как сделать favicon из готового изображения?

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

  1. Снова переходим на сайт favicon.ru.
  2. Нажимаем на кнопку Выберите файл и указываем путь к готовому изображению. Как уже говорил выше, лучше взять свой логотип:Как сделать favicon
  3. В открывшемся окне редактируем область нашей картинки. Границы области можно изменять курсором мышки:Как вставить favicon
  4. Смотрим в предпросмотре, что у нас получается:Как вставить favicon
  5. Если картинка не устраивает, то изменяем её в окне выше, используя нужные инструменты. Здесь принцип такой же, как и при создании онлайн favikon:Как вставить favicon?
Как вставить фавикон на сайт WordPress?

После создания фавикона его следует установить на сайт. Для этого выполним следующие шаги:

  1. Для блогов на WordPress следует загрузить файл favicon.ico в папку с установленной у Вас темой, путь к которой выглядит так: wp-content/themes/ваша-тема/:Как вставить favicon
  2. Копируем такой код:
    <link rel=”shortcut icon” href=”http://url-сайта/wp-content/themes/название-папки-с-темой/favicon.ico” type=”image/x-icon” /><link rel=”icon” href=”http:// url-сайта/wp-content/themes/ название-папки-с-темой/favicon.ico” type=”image/x-icon” />

    Не забудьте заменить строки url-сайта  на ссылку Вашего блога, а также в название-папки-с-темой указать Вашу тему.

  3. В админке ВордПресс переходим через меню Дизайн (1), Редактор (2) в файл header.php (3) и между тегами <head> (4) и </head> следует вставить наш код (5):Как вставить favicon
  4. После обновления header.php зайдите на блог и посмотрите результат в браузере.
  5. У кого не получилось, есть второй вариант добавить favicon. Для этого также необходимо залить изображение в корневую папку с темой, после чего в самом низу файла function.php перед тегом ?> требуется вставить такой код:
    /** Добавление favicon */
    function sp_set_favicon() {
    echo ‘<link rel=”shortcut icon” type=”image/x-icon” href=”‘.get_bloginfo(‘template_url’).’/favicon.ico” />
    <link href=”‘.get_bloginfo(‘template_url’).’/favicon.ico” rel=”icon” type=”image/x-icon” />';
    }
    add_action( ‘admin_head’, ‘sp_set_favicon’ );
    add_action( ‘login_head’, ‘sp_set_favicon’ );
    add_action( ‘wp_head’, ‘sp_set_favicon’ );
  6. Должно получиться так:Второй вариант добавить favicon

На сегодня всё. Мы с Вами узнали, как сделать фавикон WordPress и как вставить favikon. Надеюсь, у Вас получиться его добавить быстро. Если возникнут вопросы, то пишите в комментариях.

Рекомендую прочитать Как установить красивую большую кнопку соцсетей на сайт.

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

На десерт говорящая микроволновка:

Всем пока!

С уважением, Дмитрий Байдук

Отзывов (3)

  1. Александр пишет:

    о, дмитирий, вы поитсене умнейший человек на этом свете.
    а я то думаю как это все берется….
    :evil:

  2. А я фотку свою поставил на favicon, вот с нового года планирую поменять, что-нибудь оригинальное придумать.

  3. Я уже и забыла, как это делается. Вот теперь память освежила.

Оставить комментарий

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