Иконка сайта или favicon - это лицо вашего сайта которое отображается в браузере перед названием вашего ресурса. Функциональной нагрузки фавикон не несет, но он повышает имидж и визуальную привязанность к вашему сайту. Сегодня мы попробуем разобраться, как установить favicon WordPress сайта, быстро и без всяких проблем.
Рассудите сами как бы происходил поиск нужной вкладки, если бы было открыто хотя бы 10 одновременно в браузере и все они выглядели идентично? Именно для такого зрительного различия и был придуман и внедрен favicon.
Обновление от 19.08.2015. В новой версии WordPress 4.3 существует способ добавления любой картинки и создание иконки сайт а .
Создание иконки для WordPress сайта
Урок из цикла посвященного базовым , поможет вам сделать все правильно и не переплачивать лишние деньги.
Фавикон - графическое изображения размером 16×16 или 32×32 пикселя, внедренное в ваш сайт в формате ico или png картинки возле названия вкладки.
Для того, что бы установить favicon WordPress сайта существует несколько способов:
- Нарисовать изображение в графическом редакторе самостоятельно.
- Найти подходящее изображение и изменить его размер до нужного.
- Создать favicon в онлайн режиме.
- Заказать у дизайнеров уникальную «этикетку».
- Плагин для иконки.
Давайте разберем все по порядку.
Способы создания favicon для WordPress сайта
Что бы нарисовать самостоятельно иконку не нужно быть великим художником, если вы знаток Photoshop тогда у вас не возникнет проблем, но даже если вы кроме стандартного Peint от Windows больше никакими знаниями рисования не владеете, то и это не беда. Попробовав один раз сделать иконку такого малого размера, вы убедитесь в том, что не все так плохо как казалось. Но опять же все зависит от вашей фантазии.
Я думаю что бы нарисовать что-нибудь подобное, вам не нужны навыки дизайнера, это изображение было создано в peint размером 400×400, теперь изменим до нужного нам размера 16×16 и сохраним в формате ico. Что же у нас получится в итоге? 
Как видим это не так и страшно выглядит, но потратив немного времени в более качественном графическом редакторе можно получить достаточно хороший уникальный favicon.
Если у вас есть на примете подходящее изображение для favicon тогда вам стоит только залить его в любой редактор и изменить его размер, сохранить в нужном формате, все ваши труды закончились, после того как мы пропишем путь к favicon на сайте WordPress она будет рабочей и доступной.
Одним из таких сайтов для создания иконки сайта является pr-cy.ru куда можно закачать вашу картинку и уже забрать в нужном размере и формате.
Создать favicon онлайн очень просто, для этого существует множество сервисов и приложений. Единственный недостаток это примитивизм данного способа, но если вы не преследуете цели высокого качества изображения тогда это лучший способ для вас.
Лучший сайт на котором можно создать иконку для сайта в онлайн режиме это favicon.cc. Это англоязычный бесплатный сервис, позволяющий рисовать в простейшем поле, с небольшим набором инструментов.
Но если захотеть и немного постараться, то можно получить достаточно хорошую работу в итоге.
Заказать иконку у дизайнеров будет стоить вам денег, перед тем как это делать подумайте трижды и попробуйте самому все сделать, лучше пустите эти деньги на продвижение сайта.
Плагин для установки favicon даже рассматривать не буду, зачем нам засорять и замедлять наш сайт если вся и так проще некуда для внедрения.
Что бы установить favicon в наш сайт на WordPress нужно скачать файл header.php с нашего сервера и прописать в него следующие строки между тегами
Файл с изображением должен быть в корневой папке сайта, если же его размещаем в другой каталог тогда нужно прописывать к нему путь.
Начиная с версии 4.3 можно устанавливать иконку сайта непосредственно с визуального редактора страниц. Так же благодаря данному обновлению размер и картинки больше не важно, программа сама отредактирует и сделает все как нужно.
Как установить Favicon WordPress можно посмотреть в следующем видео уроке:
Сделали? Все на этом данный урок закончен и цель достигнута, вы разобрались как устанавливать Favicon WordPress.
Вы можете продолжать изучать наши и стать специалистом в разработке сайтов на данной платформе.
Favicon.ico – это небольшая картинка (иконка) в специальном формате, которая отображается рядом с адресом вашего сайта в адресной строке браузера и рядом с названием вашего сайта в «Избранном» или в «Закладках» вместо стандартной, общей для всех иконки. Эта маленькая картинка привлекает к себе внимание и кратко отражает суть вашего сайта. Формат ICO подразумевает наличие в файле нескольких картинок разных размеров и разного качества. Основной формат картинки для favicon.ico – 16х16 пикселей, 256 цветов или TrueColor. Именно эта картинка будет показываться в адресной строке браузера, на таб-баре и в «Избранном» (Закладках).
Далее я приведу перевод с некоторой адаптацией небольшой инструкции из кодекса WordPress , которая пошагово разъясняет, как создать иконку, используя абсолютно любую картинку, и как модифицировать шаблон WordPress для ее дальнейшего использования.
Создаем иконку
1. Подберите изображение, которое должно представлять ваш сайт. Сейчас не важен размер и формат картинки (если конечно она не больше 2 Мб, в этом случае ее надо бы немного уменьшить).
2. Теперь можно воспользоваться генератором иконок, например, www.favicon.co.uk или http://favicon.ru/ 3. Загрузите изображение на сайт и выберите будущий размер иконки.
4. После того, как картинка сгенерирована, вы увидите пример того, как она будет выглядеть, а также ссылку на загрузку иконки. Сохраните файл на компьютер, и убедитесь, что он называется favicon.ico.
5. Теперь переходим к установке иконки на сайт.
Установка иконки в WordPress
1. Быть может в папке с вашим шаблоном уже есть старая иконка, ее необходимо удалить.
2. Загрузите новый файл favicon.ico в папку вашей темы.
3. Скопируйте favicon.ico также в корень сайта (например, http://example.com/favicon.ico). Это позволит отображать иконку в RSS.
4. Чтобы иконка отображалась в некоторых старых версиях браузеров, вам необходимо отредактировать файл шаблона header.php.
5. Откройте header.php и найдите код, который начинается с . Замените его кодом, приведенным ниже. Если вы не можете найти ничего похожего, просто вставьте следующий код где-то между тегами
/favicon.ico» />
6. Сохраните изменения.
7. Если вы используете кэш для WordPress, очистите его, затем очистите кэш вашего браузера. Теперь икока должна отображаться в адресной строке после загрузки вашего сайта. Примечание. Некоторые браузеры с трудом воспринимают новые иконки. Вы можете попробовать добавить страницу в избранное, и через ссылку с избранного открыть страницу снова, если и это не помогает, очистите кэш еще раз и перезагрузите компьютер.
Кстати, сервис www.favicon.co.uk довольно неплох, единственный его недостаток в том, что иконки генерируются только со второго раза (из личных наблюдений).
Можно также воспользоваться таким вариантом. Положите иконку в основную (корневую) - предпочтительнее - или в любую другую папку вашего сайта; добавьте следующие строки в каждую страницу вашего сайта внутрь секции
(не обязательно):
Что ж, думаю, инструкция очень детально и доступно все разъясняет, и будет полезна для новичков.
Оцени пост!
Иконка для сайта сама по себе с первого взгляда кажется незаметной мелочью, которую можно проигнорировать. Но это не так! Многие современные и очень успешные ресурсы узнаются людьми за счет картинки favicon, которая отображается в поисковой выдаче Яндекса.
Что же такое favicon?
Favicon – это картинка размером 16х16 пикселей, которая имеет расширения «.ico».
Именно этот небольшой графический элемент создает вам дополнительный пиар в интернете. Для того чтобы создать это изображения вам потребуется всего 10 – 15 минут, но эффект вы получите значительный.
Узнаваемость – это основной принцип действия иконки сайта.
Методы создания favicon для движка WordPress
Сейчас мы с вами рассмотрим основные сервисы, которые можно использовать для того чтобы сделать иконку для сайта. Во-первых, можно классифицировать их на две группы: онлайн сервисы и десктопные программы.
Онлайн сервисы
Существует огромное количество таких онлайн сервисов, но все они имеют разный функционал. Наиболее популярным сервисом в рунете является – favicon.ru.
Давайте рассмотрим, какой функционал он предоставляет. В первую очередь – это генерация иконки из готового изображения, например, из логотипа вашего сайта. При этом присутсвует функция корректировки готово файла, что не может не радовать.
Также, вы можете самостоятельно нарисовать favicon для своего сайта.
Как видно из картинки, вы можете выбрать цвет, делать заливку, стирать ненужные пиксели, двигать ваш рисунок и при этом всем, сразу же наблюдать ваш favicon в действии в поле «Предпросмотр».
Очень удобный сервис.
Еще можно вделить:
www.favicon.cc – этот сервис является копией предыдущего, или предыдущей этого, я уже не вникал в подробности. Они даже внешне похожи.
www.degraeve.com – вот вам еще один, довольно многофункциональный онлайн сервис для генерации иконок для сайтов, но только зарубежный. Разобраться в нем думаю, будет не сложно, там все понятно чисто на интуитивном уровне.
Десктопные сервисы
Из десктопных сервисов, которые перегоняют картинки в формат «.ico» и делают размер иконки 16х16 пикселей можно выделить: IcoFX, Photoshop.
Но, честно говоря, работать с онлайн сервисами намного проще.
Я не хочу заморачиватся с созданием favicon для своего блога на WordPress, что мне тогда делать?
Специально для вас, никто не отменял галереи favicon’ов. Вы запросто можете скачать картинки на любой вкус абсолютно бесплатно. Где же это можно сделать?
Favicon.cc - эта галерея насчитывает просто огромное количество фавиконов на любой вкус и разные тематики. В наличии имеются и анимированные иконки.
audit4web - галерея сбольшим количеством иконок для сайта, включает в себя более 15000 изображений.
С тем, где взять фавикон мы разобрались. Теперь давайте рассмотрим, как установить favicon на WordPress .
Для начала вам нужно заказать готовое изображение в папку вашего шаблона, он находится по адресу — /wp-content/themes/имя вашей темы .
После чего нужно вставить одну строчку кода между тегами
./favicon.ico"/>
Для этого переходим в раздел «Внешний вид» — «Редактор» , ищем, справа шаблон (header.php), у всех он может называться по-разному, и нажимаем на него.
Если вы все проделали правильно, то при обновлении вашего браузера вы будете наблюдать свой фавикон. Если он не появился, попробуйте почистить кеш браузера.
Встретимся в новых уроках.
Фавикон – это маленький элемент дизайна, который помогает отличать сайты друг от друга, и позволяет их легко запоминать, то есть это брендовость. В этой статье я вам покажу, как правильно установить фавикон в WordPress, а также покажу, где найти его и как сделать самому.
Фавикон – это маленькое изображение, которое появляется во вкладке браузера и в поисковой выдаче перед заголовком сайта.
То есть, это элемент вашего сайта, который играет в пользу его узнаваемости. Когда в браузере открыто множество вкладок, фавикон помогает отличить один сайт от другого. А когда ваш сайт видя в поисковой выдаче, его сразу узнают.
Как вставить фавикон в WordPress
Для того чтобы вставить фавикон в WordPress, найдите или сделайте его, и загрузите на свой сайт в корневую папку. После этого поместите в файл активированного шаблона после тега
один из следующих кодов:#для иконки в форме.ico: #для иконки в форме.png: #для иконки в форме.gif:
где httр://examnple.com/favicon.ico – это путь к файла иконки с расширением.
После этого можно проверить, как отображается это изображение.
Если иконки в WordPress не видно после установки кода, то очистите кеш вашего браузера и повторите попытку.
В некоторых темах WordPress уже прописан нужный код для фавикон. Поэтому, прежде чем ставить код, попробуйте загрузить файл с именем favicon.ico в корень сайта. Если иконка появится, считайте – дело сделано. А также, непосредственно в настройках многих тем можно установить иконку для сайта.
Требования для фавикон
Прежде, чем устанавливать фавикон в WordPress, вам следует узнать о том, какие требования к этой картинке предъявляются. Их соблюдение позволит корректно отображать иконку сайта во всех браузерах и на всех устройствах.
- Размер фавикон должен быть 16х16 или 32х32 пикселей. Делать больше не рекомендуется и смысла мало, в браузере картинка всё равно будет маленькой. Слишком большая картинка может отображаться не везде.
- Формат изображения должен быть.ico, .png или.gif. Рекомендуется.ico.
- Частенько можно видеть сайты с анимированными иконками. Выглядит красиво, но смысла мало. Тем более что сегодня такие иконки отображаются корректно только в FireFox.
- Не нужно делать какую-то сложную картинку в фавикон. Помните, что она будет очень мелкой. В таком размере хорошо будет смотреться какой-то логотип или буква.
Как сделать фавикон
Для того чтобы сделать фавикон в WordPress, можно воспользоваться тремя способами.
Favicon на вашем сайте, такая же неотъемлемая часть, как и всё оформление в целом. Но новички часто об этом забывают, а порой просто не знают, что это вообще такое. Так вот, favicon , а если быть точным, то favicon.ico — это маленькая квадратная картинка на вкладке в браузере. Вот она:
Так же картинка, будем называть её favicon
, отображается в поисковике при запросах, именно поэтому она должна быть яркой, оригинальной и запоминающейся
, ведь только взглянув на неё, посетитель должен сразу определить ваш сайт.
Возьмите на заметку: Стандартным размером favicon.ico является 16*16 пикселей.
Пожалуй начнём. Существует масса способов установки favicon на WordPress. Мы рассмотрим лишь один. По сути, он является самым лёгким в отношении нагрузки на сайт. Ведь мы не хотим забивать наш блог бесполезными плагинами. Этот способ состоит в том, чтобы закинуть готовую картинку в корень сайта и немного изменить код страницы.
Первым делом нам нужно создать файл.ico . Для этого существует специальный сервер favicon.cc . здесь можно вставить свою картинку любого формата и просто сделать из неё ico , либо нарисовать самому.
Попадая на сайт, мы видим графический редактор. Но я не буду рисовать, а загружу свою картинку. Вы можете выбрать, как вам угодно, суть не меняется.
Для загрузки нажимаем на import image .
Галочку ставим на второй выбор и загружаем картинку. Жмём upload
.
Картинка загружена, листаем вниз и скачиваем favicon
.
Скачанный файл любым удобным для вас способом закиньте в корень сайта. После этого переходите на ваш блог Консоль -> Внешний вид -> Редактор
.
Ищем Заголовок (header.php)
и после тега
вставляем этот код, заменяя на ваш сайт. Сохраняем.
Готово! Переходим на любую страницу и любуемся полученным результатом!
