В сегодняшнем уроке я буду Вам рассказывать об иконках Favicon (фавикон). Я Вам покажу как сделать favicon.ico для сайта (или для блога, тут без разницы) и покажу как можно вставить фавикон.
Наверняка, многие еще не знают о том, про какое “чудо” я говорю. Проще говоря, Favicon (фавикон) это картинка (иконка), которая стоит в браузере перед адресом сайта. Наглядно покажу Favicon моего блога:
Эта иконка является своеобразным логотипом Вашего блога. Поэтому к созданию фавикона нужно отнестись со всей ответственностью. Помните, он может выделить Ваш блог среди других.
План урока:
- Создание Favicon с нуля.
- Создание фавиконки из готового изображения.
- Сервисы с готовыми иконками для сайта.
- Прикрепление полученной иконки к сайту.
Как создать Favicon (фавикон) с нуля
Есть один очень удобный сервис. Он имеет адрес favicon.cc. Этот сервис по построению фавиконок выглядит так:
Чтобы нарисовать favicon достаточно выбрать цвет и просто рисовать. Если Вы нарисовали что-то, где-то не так, для удаления фрагмента рисунка выберите инструмент transparent (поставьте галочку) и “тыкайте” на пикселы (“квадратики”), которые нужно убрать:
Я нарисовал следующий фавиконку:
Больше всего в favicon.cc мне понравилось то, что можно мгновенно видеть результат своего труда в оригинальном размере. Для этого нужно немного спуститься вниз в раздел Previw:
Или же можно прямо в браузере (Opera, Firefox, Internet Explorer и т.п.) посмотреть итог работы:
Теперь нам нужно просто сохранить иконку сайта на свой компьютер. Для этого нужно нажать на кнопку “Download Favicon”:
Создание favicon (фавикон) из готового изображения
Допустим Вы не хотите создавать с нуля иконку для своего сайта, а хотите сделать ее из уже готового изображения. В этом случае для Вас будет удобен сервис для создания фавиконки favicon.ru.
Сервис на русском языке, поэтому у Вас не должно возникнуть проблем. Просто указываете картинку, которую Вы хотите видеть в роли иконки Вашего сайта (кнопка “Обзор”), потом нажимаете “Создать favicon.ico”, а дальше уже “Скачать favicon.ico”.
Список сервисов с готовыми favicon (фавикон)
Также можно просмотреть уже готовые иконки, попробовать найти что-то подходящее. Я предлагаю следующие сервисы:
- iconj – Огромная база фавиконок;
- favicon.cc – Да, в этом сервисе тоже есть уже готовые фавиконки.
- Favicon.co.uk – Можете глянуть и сюда, вдруг найдете что-то подходящее.
- audit4web – Большое количество иконок для сайта.
Как сделать Favicon (фавикон) для сайта
После того, как мы создали фавиконку, нужно ее “прикрепить” к сайту. Для этого нужно сделать следующее:
- Полученный favicon.ico скопировать в корень блога (т.е. в папку, где находятся папки wp-content, wp-admin и т.п.). В моем случае эта папка называется public_html:
- Далее открываете файл 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 местах слова адрес_сайта меняете на адрес СВОЕГО блога.
- У меня получилось следующее:
- Теперь сохраняете файл header.php, обновляете на сервере и наблюдаете за результатом:
Как видите, все “встало” правильно. Надеюсь у Вас тоже проблем не возникло. Будут вопросы, пожалуйста, задавайте их в комментариях. А то мне на почту ссыпатся письма с вопросами технического характера, я не могу успевать отвечать на все.
P.s. Постоянные читатели, наверное, заметили, что я уроки WordPress стал давать немного реже. Возникла небольшая проблема со временем. До какого периода это продлиться? Честно, не знаю. Но минимум раз в неделю буду стараться писать уроки (по возможности – чаще). Поэтому лучше Вам, уважаемый читатель, для удобства подписаться на RSS блога Новичка.
P.s.s. Открыл новый раздел Ученики. Новички, которые создают блог с нуля, это отличная возможность “засветиться”!
_____________________________________________
Следующий урок: Урок 51 Регистрация в поисковиках.
Все получилось, спасибо.
В header можно прописать хоть анимированный gif, и в большинстве браузеров он будет работать, а favicon.ico будет в результатах поиска Яндекса отображаться.
У меня в браузераз фавикон отображается а в Яндексе хоть убей-нет его.Не знаю в чём причина…Может автор блога подскажет?
Ваш сайт яндекс не проиндексировал еще)) просто ждите.
Ухты, очень классная чтатья. Помню в свое время я какраз искал подобную статью, что-бы можно было понять как это сделать даже человеку который ничего не понимает в этом. Но тогда я такой статтейки не нашел и долго парился с этим фавиконом.
1) Насчет «Контакты»: спасибо, исправил. После восстановления БД не успел восстановить.
2) По поводу попадания в «Ученики». К сожалению, я должен Вам отказать, потому что Ваш блог даже «старее» моего. А я собираю в разделе блоги, которые делали блоги с нуля.
3) По поводу иконок. Все-таки лучше прописать адрес до иконки в файле header.php
мистика какая-то…
изначально я тоже поместил фавикон в корень и в опере он прекрасно отображается… а в мозиле нет…
вставил код по Вашему уроку и… все тоже самое в опере нормально в мозиле нет
Кэш в браузере почистить и всё будет. Проверенно))
Однажды я тоже делал изменения на блоге и в коде изменил, а на блоге не вижу ничего. Только через определенное время почистив кеш все получилось.
Огромное спасибо за такую полезную вещь. Я даже не знал, что такое возможно.
Что-то при открытии страницы «Контакты» я никаких способов связи не нахожу. Хотела попросить добавить мой блог в список учеников: вордпресс я осваивала по вашим урокам.
И по поводу иконки хотела спросить. Когда я делала статический сайт, то достаточно было просто положить иконку в корневой каталог, она отображалась для любой страницы. А почему с вордпрессом так не получается сделать?