Как установить иконку в поиске. HTML: Создание и добавление фавикона

Инструкция

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

Сохраните подготовленное изображение в формате ico. Современные браузеры смогут понять favicon в файлах с расширением gif, png, bmp и т.д., но для охвата максимального количества модификаций браузеров лучше использовать родной формат иконок этого типа. Если ваш графический редактор не поддерживает формат ico, то можно сохранить его, например, в формате gif, а затем конвертировать в ico при помощи какого-либо из -сервисов. В сети можно найти и сервисы, которые предложат вам полный цикл создания иконки в режиме онлайн непосредственно в .

Загрузите иконку на сервер вашего сайта и сохраните в файл с именем favicon.ico - это имя все модификации браузеров понимают одинаково, хотя некоторым из них название не важно. Если в коде страницы нет указания адреса этого файла, то браузеры и поисковые роботы по умолчанию ищут ее в корневой папке сайта, поэтому лучше всего поместить файл именно туда.

Вставьте в исходный код страниц HTML-теги с указанием на загруженный файл. Для Internet Explorer этот тег должен выглядеть так:

Для остальных браузеров его следует иначе:

Добавьте обе строки, чтобы обеспечить кроссбраузерность. Если файл был помещен не в корневую папку, то в атрибуте href укажите полный путь к месту его размещения. Вставить эти строки следует в заголовочную часть веб-документа, то есть между тегами и .

Иконка сайта, или favicon, - важная деталь, которая способна выделить ваш сайт в результатах выдачи поисковиков, да и просто придать сайту индивидуальность. Браузер отображает favicon в адресной строке непосредственно перед адресом страницы.

Инструкция

Выберите картинку для будущей пиктограммы. В идеале она должна быть максимально схематичной, с минимумом деталей (не забудьте о крошечном размере иконки). В любом графическом редакторе обрежьте и уменьшите файл с картинкой до размеров 16 на 16 или 32 на 32 пикселя.

Откройте один из онлайн-генераторов favicon – например, favicon.ru или favicon.cc. Загрузите в него свою картинку и скачайте готовую иконку. Можно также скачать на свой компьютер программу-генератор – например, Icon Magic, Icon Craft, «Студия иконок» и тому подобные приложения. Обратите внимание, что вновь созданный файл должен называться именно favicon.ico – без каких-либо дополнений, цифр и так далее.

Зайдите в панель управления своего сайта. Перейдите в корневой каталог сайта. На сайтах ucoz путь будет выглядеть так: вкладка Общее/Главная страница/Файловый менеджер. На сайтах «Вордпресс» нужная папка называется public_html. Для "Joomla!" CMS-каталог по умолчанию – папка images. На какой бы платформе ни располагался ваш сайт, корневым каталогом для него является тот, в котором хранятся файлы favicon.ico и robots.txt.

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

Что такое favicon? Где стоит и как установить фавикон? Как установить favicon на сайт без выхода по FTP?

Как только не называют эту «малышку-картинку», одни favicon, другие фавайкон, третьи пиктограмма, четвертые иконка. Я бы назвал ее «маяком», который в бушующем океане информации помогает «кораблям -пользователям» находить свой «причал». Поговорим об этом подробнее.

Открываем поисковик Yandex (Яндекс) и водим запрос в строку поиска. Думаю, Вы уже обратили внимание, что при выдаче результатов, слева от адреса многих сайтов, есть маленькая картинка. Вот она нам и нужна - favicon.ico (или в формате.png), рис. 1

Та же самая фавиконка красуется в адресной строке браузера, рис.2

Если Вы еще не поставили фавиконку на свой сайт или блог, разницы тут нет, то самое время ей обзавестись. Многие пользователи, и я в том числе, находя нужную информацию в поисковике, не столько запомнят ваш ресурс по названию статьи, сколько по favicon. Она привлекает внимание пользователей, по ней легче и быстрее вспомнить какой ресурс вы посетили и какую информацию там прочли. Так что выбор за вами.

Где взять фавиконку? Есть множество бесплатных ресурсов на которых собраны коллекции этих, так и хочется сказать, «букашек». Размер у них и вправду всего 16х16 рх(пикселей). Один из таких сервисов http://www.iconj.com/gallery.php . Фавикон бывают как в формате ico, так и анимированные gif. Есть так же множество генераторов, позволяющих создать иконку.

Если на вашем сайте (блоге) есть индивидуальный логотип, то лучше сделать favicon из логотипа, так обычно и поступают те, кто заказывает индивидуальный дизайн и логотип для сайта.

1. Вставить favicon можно выйдя на FTP и закачав ее в папку, где лежат все картинки вашей темы, чаще всего это папки images или img.

2. Затем заходим в административную панель сайта и слева находим Внешний вид/Редактор , рис. 3

3. В редакторе открываем файл header.php и между тегами вставляем строку кода

/images/favicon.ico”type=“image/x-icon” />

Если у вас фавиконка в формате favicon.gif , то соответственно получится строка кода

/images/favicon.gif » type=»image/x-icon» />

Favicon может появиться не сразу, спустя какое-то время.

Установка favicon без использования FTP

Можно установить favicon без выхода на FTP. Итак, у нас на компьютере в одной из папок должна лежать иконка.

1. Заходите в административную панель своего сайта (блога).

2. Открываете «Записи». Берете какую-нибудь запись и нажимаете «Редактировать» . Затем на странице записи жмем на значок загрузки изображения , рис. 1

3. Загружаете с компьютера вашу фавиконку. В окне загрузки нас будет интересовать только URL ссылки favicon.ico. Копируете адрес (URL ссылки) вашей иконки (у вас будет свой URL адрес ), рис. 2 .

Не нажимая кнопок «Вставить в запись» и «Сохранить все изменения» закрываете окно добавления картинки .

4. В левой колонке переходите «Дизайн/Редактор». В редакторе открываете файл header.php и между тегами вставляем строку кода

В строке кода красным цветом выделен адрес иконки (у вас будет свой URL адрес) , который я скопировал с рис. 2 .

Favicon, как и говорил выше, может появиться не сразу, спустя какое-то время.

Как видите, ничего сложного, теперь Вы знаете как установить «маяк» для вашего сайта. Пишите как все прошло.

Иконка, отображаемая на вкладке браузера, перед названием страницы называется favicon (от англ. FAVorite ICON - «значок для избранного»). Эти иконки используются в списках избранного в браузере, вы можете увидите их в результатах поиска Яндекс и многих других местах.

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

Как отредактировать файлы шаблона в сайте на wordpress, в том числе header.php, содержащий секцию head (изложено на примере футера), .

Почему название файла иконки — favicon.ico?

При подключении, указанным выше способом, вы вообще-то можете задать произвольное название файла, например, my-icon.ico . А название favicon связано с историей появления иконки.

В 1999 году компания Microsoft выпустила свой браузер Internet Explorer 5. Он впервые стал поддерживать значки для сайта. Таким значком выбирался файл с именем favicon.ico, который должен был быть помещён в корневой каталог сайта. Т.е. изначально не требовалось даже описывать в HTML документе его наличие. Иконка должна была использоваться при добавлении файла в «избранное».

Современные браузеры, при отсутствии описания в HTML, попробуют проверить наличие файла favicon.ico в корне сайта.

Надо заметить, что файлы ICO морально устарели — их максимальное разрешение 32×32 точки. Но если вы хотите «угодить» любому, даже самому дряхлому браузеру, то для создания иконки в формате ICO вам поможет сайт favicon.cc . Там вы можете преобразовать произвольную картинку в файл.ico и/или нарисовать и отредактировать иконку в пиксельном редакторе.

Другие форматы иконки для сайта

Все современные браузеры могут использовать в качестве иконки jpeg, png или gif изображение. Некоторые из них (firefox и opera) работают в том числе и с анимированными иконками.

Как подключить иконку в другом формате. Для этого в секцию head нужно добавить вот такой HTML код (покажу сразу несколько примеров):

Фавикон (favicon - это сокращение от Favorite icon, в переводе с анг. означает любимый значок) - иконка, также известная как ярлык, значок веб-сайта или значок закладки. Фавикон является обычным графическим изображением (картинкой), связанным с конкретной веб-страницей или веб-сайтом. Браузеры, которые поддерживают добавление фавикона, обычно отображают его в адресной строке и во вкладках рядом с названием страницы, некоторые браузеры используют его как значок для ярлыка, сохраненного на рабочем столе. Поисковая система Яндекс, придала фавикону большое значение и отображает его вместе с результатами поиска.

Создание

Для создания фавикона можно использовать практически любой графический редактор, однако формат изображения, которое вы выбрали должен быть 16x16, 32x32 или 64x64 пикселя, с использованием 8-битного или 24-битного цвета. Изображение должно иметь расширение PNG (стандарт W3C), GIF или ICO.

При создании изображения следует обращать внимание на следующие нюансы:

• Фавикон должен быть выполнен в том же стиле, что и сайт, так как он является своего рода визитной карточкой вашего проекта.
• Изображение, которое вы хотите использовать в качестве фавикона, должно быть предельно простым для понимания, лучше используйте всего несколько элементов.
• Следите за тем, что бы фавикон, максимально передавал суть вашего сайта, бизнеса, проекта.
• Создавать картинку лучше так, что бы она вызывала у посетителей вашего сайта ассоциации. Например, иконка телефона, для салона мобильных телефонов.

В качестве примера программы, позволяющей создавать иконки, можно привести Favicon Create (скачать) – это самая простая программка. Чтобы сделать иконку понадобится всего лишь обычная картинка в формате *.jpg, или *.bmp, которую можно сделать в любом графическом редакторе, даже в том же пейнте. Загружаем картинку в программу, затем выбираем размер, глубину цвета и нажимаем кнопку старт. Все готово.

Добавление фавикона

Для добавления фавикона на веб-страницу в начало HTML-документа потребуется вписать всего одну строку с тегом , в котором нужно указать атрибут rel, указывающий браузеру что мы добавляем иконку, атрибут href, содержащий адрес нашего изображения, и атрибут type, показывающий какой формат изображения мы используем:

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

В таблице показаны различные варианты добавления фавикона и приведена поддержка браузеров:

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

И где можно скачать готовые иконки для сайта ico. Надеюсь, вы уже подобрали себе подходящую картинку? Если нет, то в следующей статье я расскажу, с помощью онлайн генераторов. Не пропустите. Сегодня же поговорим о том, как установить favicon на сайт или заменить его, если он вам не нравится. Эта процедура одинакова для любых веб-ресурсов, но я покажу весь процесс установки на примере CMS WordPress.

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

Как установить favicon на WordPress

При установке иконок для сайта возможны три варианта развития событий:

1. из админки блога Вордпресс, используя настройки шаблона;
2. обычная установка без плагина;
3. с помощью плагина.

Вставляем фавикон на блог из админки

Это самый простой способ. Во многих премиум-шаблонах WordPress есть возможность устанавливать логотипы и иконки. Для этого идем в настройки темы, выбираем нужный файл на компьютере и жмем “Загрузить “. Сохраняем изменения и любуемся результатом. В моей теме можно загружать картинки в формате png или gif размером 16х16.

Установка favicon на сайт без плагина

Допустим, что у нас уже есть готовый фавикон. Это может быть картинка с любым названием в форматах GIF, JPEG, PNG или BMP. Однако напомню, что лучше всего, если это будет файл изображения в формате.ICO с размером 16×16 пикселей favicon.ico . Переименуйте, если у вас не так.

Добавить Favicon на сайт очень легко. Надо просто скопировать его в корневую директорию сайта по FTP. На Вордпресс это папка public_html (там, куда устанавливали robots.txt). Как заливать файлы на хостинг с помощью FTP-клиента FileZilla, читаем .

В принципе, можно больше ничего не делать. Современные браузеры сами найдут пиктограмму, если она расположена в корневой папке блога. Но мы ведь хотим, чтобы наша иконка отображалась и в поисковой выдаче. Поэтому, будет лучше, если указать специальному роботу Яндекса путь к файлу favicon.ico. Для этого в html-коде страниц блога между тегами надо прописать такой код:

В данном примере файл находится в корне сайта, а его адрес прописан в виде относительной ссылки. Если вы загрузили картинку в другую папку, то укажите полный путь к ней в атрибуте href . Если картинка не в формате.ico, то укажите это в атрибуте type , заменив x-icon на нужный формат.

Многие советуют вставлять обе строки, но я считаю это лишним и советую прописывать только верхнюю строчку. Поясню, для Internet Explorer пишем значение “shortcut icon “, остальные браузеры понимают “icon “, которое уже входит в это значение.

Как прописать код favicon для WordPress :

• Идем в админку “Внешний вид ” – “Редактор “.
• Открываем файл header.php.
• Вставляем код до закрывающего тега .
• Жмем “Обновить файл “.

Как поменять иконку сайта

Если на сайте уже установлен favicon, но вы хотите заменить его другим, то просто открываем по FTP корневую папку блога и меняем существующий файл на новый с таким же названием и форматом.

Если картинка расположена в другом месте, то делаем следующее:

• Открываем в браузере код страницы сайта (Ctrl+U).
• Ищем строку, где прописан адрес фавикона.
• Заменяем файл по указанному адресу.

Почему не отображается favicon

Если favicon не отображается в браузере после установки или замены, надо:

• перезапустить браузер;
• обновить кеш;
• проверить правильность пути к пиктограмме сайта.

В поисковой выдаче Яндекса favicon появится только после того, как сайт посетит специальный робот. После этого фавиконка преобразуется в формат PNG и добавляется на сервер Яндекса по адресу http://favicon.yandex.. Чтобы увидеть иконку своего сайта, замените имя моего домена своим. Бывает, что Яндекс долго не отображает пиктограмму в выдаче. Надо подождать и, если через месяц иконка не появится, можно задать вопрос в тех.поддержку.

Easy Favicons – Wordpress плагин для установки фавикона

Считаю, что использовать плагин для установки favicon на WordPress, это лишнее. Тем не менее, такая возможность для особо ленивых есть. Существует много подобных плагинов, но я покажу один, которым сам когда-то пользовался. Он называется Easy Favicons . Скачать его можно по .

Устанавливаем и активируем плагин (). Открываем в админке страницу с настройками.

Как видно выше, есть возможность установить фавикон тремя способами:

1. использовать свой Gravatar;
2. указать путь к картинке;
3. выбрать иконку для сайта из установленного набора.

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

Ну вот, хотел покороче, получилось, как всегда. А как вы установили favicon на свой сайт?