Как установить иконку в поиске. Easy Favicons – Wordpress плагин для установки фавикона. Фавиконы в браузерах ПК и на смартфонах

Основной формат для favicon — . Такой формат поймут все современные браузеры. Более новые и "продвинутые" воспринимают форматы (включая анимированные GIF), and .

Размеры и цвета favicon — 16x16 пикселей, 256 цветов или TrueColor. Эта картинка будет отображаться рядом с адресной строкой, в закладках, табах и результатах поиска. Допускается использование нескольких картинок для favicon разных размеров (32х32, 48х48) и форматов, для нормального отображения иконки и на рабочем столе.

Размещение favicon

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

Заметка

Использование резервирования расположения на веб сайтах протеворечит архитектуре WWW , сайт лишается гибкости.

Подключение favicon

Подключение производится в секции , посредством тега < >.

[…] […]

Результат . По рекомендациям тегу head добавляем атрибут profile, у которого есть ссылка на документ, поясняющий назначение атрибута rel. Документ http://www.w3.org/2005/10/profile вариант такого пояснения. Можно использовать его, а можно создать свой.

Заметки

• В 2003 году ICO формат был зарегистрирован в IANA как тип image/vnd.microsoft.icon . С тех пор тип image/x-icon является не корректным.
• отобразит значок в адресной строке только после добавления сайта в избранное.
• если зашли на сайт, где не было favicon, затем его подключили, чтобы увидеть иконку нужно обновить кеш (иногда требуется перезапустить браузер)

Примеры подключения favicon различных форматов

Заметка

В требуется указывать полный путь к файлу favicon, в можно использовать относительный.

Возможен еще следующий вариант подключения, предназначенный изначально для IE.

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

Что такое фавикон и для чего он нужен?

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

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

Как создать фавикон для сайта?

Теперь, когда мы разобрались и решил, что нам нужен фавикон, нам нужно его создать. Фавикон это картинка в формате ICO. Не буду вам расписывать, что это за формат. Фавикон так же допускается в формате GIF и PNG, но не все браузеры поддерживают фавикон в таких форматах, поэтому мы будем создавать картинку в понятном всем формате ICO.

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

Создаем новый файл размером 16х16 и вставляем туда картинку. Картинка должна быть простой и с четкими контурами, чтобы было понятно, что там изображено в маленьком виде. Сохраняем файл в формате PNG.

Теперь нам нужно конвертировать картинку в формат ICO. Делать мы это будем с помощью онлайн сервиса favicon.ru. Заходим на него и на главной странице нажимаем на кнопку «Выберите файл».

Выбираем на компьютере, созданную нами картинку, ждем пару секунд, нажимаем кнопку «далее» и смотрим, что у нас получилось. Здесь можно немного подправить, если что-то не нравиться, сделать какие-то участки прозрачными и если вас все устраивает, нажимаем на кнопку «скачать favicon» -«скачать».

Минус данного сервиса, что он прозрачный фон заливает черным цветом. На всякий случай вот вам еще один сервис http://tools.dynamicdrive.com/favicon/. Тут тоже все просто. Выбираете файл, нажимаете на кнопку «Create Icon» и через пару секунд нажимаете «Download FavIcon». Но тут редактировать нельзя, зато прозрачный фон остается прозрачным.

Фавикон можно самому и не создавать, а скачать готовые картинки. В интернете множество сайтов, где есть коллекции фавиконов нужно найти подходящий и просто скачать.

Как установить фавикон на сайт?

Теперь, когда у нас есть файл, его нужно закачать к нам на сайт. Проверяем, на всякий случай, чтобы имя файла было «favicon.ico». Заходим к себе на сервер и закачиваем файл в корень сайта. Закачивать необязательно в корень, но в коде мы будем указывать ссылку на корень сайта.

Теперь нужно вставить вот этот код.

Вставлять его нужно между тегами . Покажу вам на примере всеми излюбленного worpdress. В файле header.php ищем (ctrl+f) тег и сразу после него вставляем код, как показано на картинке ниже.

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

Доброго всем времени суток. Как я и обещал в уроке , сегодня я расскажу о том, что такое favicon и как установить его на сайт.

Давайте сначала определимся с тем, что же это такое – favicon? Favicon – это небольшая картинка, иконка, значок сайта или блога, или даже отдельной веб-страницы, которая отображается в адресной строке браузера:

в закладках, в журнале, во вкладках браузера:

вместо стандартной, общей для всех иконки.

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

Основной формат картинки для favicon.ico - 16х16 пикселей, именно эта картинка будет отображаться в адресной строке браузера и других вышеуказанных местах. Однако формат ICO разрешает наличие в файле нескольких картинок разных размеров и разного качества. Кроме стандартного размера 16х16, допускаются картинки 24х24, 32х32, 48х48 и 64х64 пикселей и все они включаются в один файл favicon.ico , а значит влияют на его размер и скорость загрузки сайта. Поэтому рекомендую вам не переусердствовать в этом вопросе.

Помимо того, что favicon - это логотип вашего сайта, ваш отличительный знак, по которому ваш сайт легко узнают пользователи, так он еще и привлекает дополнительное внимание к вашему сайту.

Так, например, иконки отображаются в выдаче поисковой системы Яндекс :

У Яндекса есть так же специальный робот, который ищет на сайтах иконки favicon. Вы можете посмотреть свой фавикон по адресу: , подставив, конечно, свой адрес.

Создать favicon можно как с помощью настольных программ, так и использовать онлайн сервисы.

Вот лишь два из них:

Favicon.ru

Сделать favicon.ico на этом сервисе можно указав путь к картинке на компьютере или в интернете, так же можно включить два дополнительных размера 32х32 и 48х48 пикселей, а так же обрезать картинку.

После загрузки картинки сервис покажет как будет выглядеть иконка

и предложит её скачать или отредактировать готовую иконку в имеющемся графическом редакторе.

Замечу лишь, что для редактирования, или тем более рисования, существуют специальные программы, в которых и нужно заниматься подобными вещами. Однако на вкус и цвет, как говорится…

Favicon.cc

В отличие от favicon.ru на favicon.cc вам сразу предложат воспользоваться графическим редактором. В центре расположен холст, состоящий из 16х16 квадратиков, символизирующих собой пиксели.

Справа палитра цветов и несколько инструментов. Внизу находится окно предпросмотра, в котором иконка отображается в реальном времени в процессе редактирования:

А слева от холста основное меню, в котором нас прежде всего интересует пункт “Import image” :

После указываем путь к изображению (нажатием кнопки “Обзор” ) и выбираем один из двух имеющихся вариантов обработки загружаемой картинки. Первый для картинки с пропорциональными размерами сторон, второй для картинки с разными размерами. При выборе второго варианта изображение будет деформировано. После загрузки картинки (кнопка “Upload” ) на холсте уже попиксельно красуется загруженная картинка. Если результат вас устраивает, можно скачивать иконку.

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

Итак, иконка favicon создана! Теперь самое время установить ее на ваш сайт.
Для этого загружаем иконку в корневой каталог сайта (именно там ищут ее поисковые роботы). То есть иконка должна находится по адресу http://сайт/favicon.ico . И вторым шагом прописываем специальные теги между тегами :

или

Чтобы favicon начал отображаться не забываем очистить кэш вашего браузера и обновить страницу. Ну вот вроде и все. Готово!

И напоследок еще один совет. Иконка показывается в браузере как изображение размером 16x16 пикселей. Ожидать, что при таком разрешении можно изобразить что-то сколько-нибудь сложное, увы, не приходится. Чтобы изобразить сколько-нибудь узнаваемое человеческое лицо, надо начинать с размера картинки размером хотя бы в 48x48 пикселей. Поэтому при создании иконки favicon для сайта, следует выбирать для него хорошо узнаваемый предмет, с четкими границами и контрастным фоном. Оптимальный выбор для иконки favicon - логотип компании или простое изображение.

Дата: 2011-06-22

Tweet

Нравится

Фавикон – английское слово favicon, переводится «значок для избранного» (сокращено от FAVorites ICON), логотип сайта и одна из главных частей веб-страницы, графическая картинка с форматами 16х16 или 32х32 пикселей (размер должен быть кратким восьми). Для фавикона используют формат 16х16, другие размеры не будут выдаваться браузерами. Отображается в верхней строчке браузера, вблизи с адресом сайта. Если иконку не установить или сделать его не правильно, то в окне браузера будет виден не логотип сайта, а иконка используемого браузера.

Зачем нужен favicon?

Этот рисунок нужен не для «украшения» браузера. Наличие или отсутствие faviconа на веб-странице, учитывается Яндрексом поведенческим фактором ранжирования. Все фавиконы показываются поисковыми системами, и сайт выглядит более привлекательно в посиковой выдаче.

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

Каким должен быть фавикон и где должен находиться?

Для хорошего сайта фавикон обязательно должен быть установлен в обязательном порядке. Он делается в формате ICO — это расширение поддерживается всеми браузерами. Картинку можете сделать самостоятельно, взяв за основу любую фотографию или изображение. Можно пользоваться графическим редактором, можно выбрать подходящий вариант на любом из множества онлайн-сервисов. А проще всего, выбрать уже готовый, набрав в поисковой строке «коллекция фавикон».

Обратите внимание: изображение должно быть названо favicon.ico. В коллекциях очень часто предлагают варианты с расширением gif, поэтому скачивайте картинку и обработайте ее в специальной программе Snagit – наведите курсор на изображение, нажмите правой кнопкой на мышь, откройте с помощью приложения Snagit и сохранить картинку как — выбирайте расширение ico.

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

Как добавить фавикон на сайт?

Добавить favicon на сайт можно 2-мя способами:
1. Сохраненную картинку с ico расширением и размером 16х16 пикселей, переназовите на favicon.ico.
2. Загрузите иконку в основную папку domains/ваш сайт/public_html/ или в панель управления хостингом.

На некоторых сайтах, для завершения установки фавикона, нужно вписать код html в файл заголовка (header.php), между тегамии.

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

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

Что такое 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, как и говорил выше, может появиться не сразу, спустя какое-то время.

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