Рубрики

Урок 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

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

Подпишитесь на бесплатные уроки по e‑mail и получите книгу в подарок
Книга по SEO