Рубрики

Урок 50 Как сделать иконку (фавикон, favicon) для блога

Петр Александров
Автор статьи Пётр Александров
114
Время прочтения: 6 мин.

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

Наверняка, многие еще не знают о том, про какое “чудо” я говорю. Проще говоря, Favicon (фавикон) это картинка (иконка), которая стоит в браузере перед адресом сайта. Наглядно покажу Favicon моего блога:

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

План урока:

  1. Создание Favicon с нуля.
  2. Создание фавиконки из готового изображения.
  3. Сервисы с готовыми иконками для сайта.
  4. Прикрепление полученной иконки к сайту.

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

Есть один очень удобный сервис. Он имеет адрес favicon.cc. Этот сервис по построению фавиконок выглядит так:

Чтобы нарисовать favicon достаточно выбрать цвет и просто рисовать. Если Вы нарисовали что-то, где-то не так, для удаления фрагмента рисунка выберите инструмент transparent (поставьте галочку) и “тыкайте” на пикселы (“квадратики”), которые нужно убрать:

Я нарисовал следующий фавиконку:

Больше всего в favicon.cc мне понравилось то, что можно мгновенно видеть результат своего труда в оригинальном размере. Для этого нужно немного спуститься вниз в раздел Previw:

Или же можно прямо в браузере (Opera, Firefox, Internet Explorer и т.п.) посмотреть итог работы:

Теперь нам нужно просто сохранить иконку сайта на свой компьютер. Для этого нужно нажать на кнопку “Download Favicon”:

Создание favicon (фавикон) из готового изображения

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

Сервис на русском языке, поэтому у Вас не должно возникнуть проблем. Просто указываете картинку, которую Вы хотите видеть в роли иконки Вашего сайта (кнопка “Обзор”), потом нажимаете “Создать favicon.ico”, а дальше уже “Скачать favicon.ico”.

Список сервисов с готовыми favicon (фавикон)

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

  1. iconj – Огромная база фавиконок;
  2. favicon.cc – Да, в этом сервисе тоже есть уже готовые фавиконки.
  3. Favicon.co.uk – Можете глянуть и сюда, вдруг найдете что-то подходящее.
  4. audit4web – Большое количество иконок для сайта.

Как сделать Favicon (фавикон) для сайта

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

  1. Полученный favicon.ico скопировать в корень блога (т.е. в папку, где находятся папки wp-content, wp-admin и т.п.). В моем случае эта папка называется public_html:
  2. Далее открываете файл header.php (напомню, он находится в папке темы Вашего блога). И прописываете в этом файле следующий код (главное условие: код должен быть после тега <head> и до </head>):
     	<link rel="shortcut icon" href="http://адрес_сайта/favicon.ico" ;="" type="image/x-icon">
     	<link rel="icon" href="http://адрес_сайта/favicon.ico" ;="" type="image/x-icon">

    Естественно в 2 местах слова адрес_сайта меняете на адрес СВОЕГО блога.

  3. У меня получилось следующее:
  4. Теперь сохраняете файл header.php, обновляете на сервере и наблюдаете за результатом:

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

P.s. Постоянные читатели, наверное, заметили, что я уроки WordPress стал давать немного реже. Возникла небольшая проблема со временем. До какого периода это продлиться? Честно, не знаю. Но минимум раз в неделю буду стараться писать уроки (по возможности – чаще). Поэтому лучше Вам, уважаемый читатель, для удобства подписаться на RSS блога Новичка.

P.s.s. Открыл новый раздел Ученики. Новички, которые создают блог с нуля, это отличная возможность “засветиться”!

_____________________________________________

Следующий урок: Урок 51 Регистрация в поисковиках.

114 комментариев на «Урок 50 Как сделать иконку (фавикон, favicon) для блога»
  1. Лариса Клепачева
    http://blog.t-stile.info

    Все получилось, спасибо.

  2. Demetr
    https://joomdesign.ru

    В header можно прописать хоть анимированный gif, и в большинстве браузеров он будет работать, а favicon.ico будет в результатах поиска Яндекса отображаться.

    • Алексей
      http://dengi-iz-ineta.ru

      У меня в браузераз фавикон отображается а в Яндексе хоть убей-нет его.Не знаю в чём причина…Может автор блога подскажет?

      • Михаил

        Ваш сайт яндекс не проиндексировал еще)) просто ждите.

  3. Fred

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

  4. Петр Александров Автор статьи

    1) Насчет «Контакты»: спасибо, исправил. После восстановления БД не успел восстановить.
    2) По поводу попадания в «Ученики». К сожалению, я должен Вам отказать, потому что Ваш блог даже «старее» моего. А я собираю в разделе блоги, которые делали блоги с нуля.
    3) По поводу иконок. Все-таки лучше прописать адрес до иконки в файле header.php

    • Юрий

      мистика какая-то…
      изначально я тоже поместил фавикон в корень и в опере он прекрасно отображается… а в мозиле нет…
      вставил код по Вашему уроку и… все тоже самое в опере нормально в мозиле нет

      • Алексей Туманов

        Кэш в браузере почистить и всё будет. Проверенно))

        • com

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

    • com

      Огромное спасибо за такую полезную вещь. Я даже не знал, что такое возможно.

  5. Natalie

    Что-то при открытии страницы «Контакты» я никаких способов связи не нахожу. Хотела попросить добавить мой блог в список учеников: вордпресс я осваивала по вашим урокам.
    И по поводу иконки хотела спросить. Когда я делала статический сайт, то достаточно было просто положить иконку в корневой каталог, она отображалась для любой страницы. А почему с вордпрессом так не получается сделать?

Добавить комментарий
Ваш адрес email не будет опубликован. Обязательные поля помечены
Нажав на кнопку «Отправить комментарий» вы принимаете соглашение на обработку персональных данных.
Подпишитесь на бесплатные уроки по e‑mail и получите книгу в подарок
Нажав на кнопку «Подписаться» вы принимаете соглашение на обработку персональных данных.
Книга по SEO