Что такое фавикон для сайта


Зачем нужен фавикон

Фавикон – на первый взгляд незначительный элемент сайта, но на самом деле помогающий решать важные задачи:

  • улучшать вид сайта в выдаче поисковых систем. Если нет иконки, сниппет менее заметен визуально, что может негативно сказаться на кликабельности. Чтобы выделить ресурс, используются разные визуальные приемы. Например, создаются значки в виде стрелочки, привлекающей взгляд к заголовку;

favicon1.png

  • способствовать узнаваемости сайта, бренда. Часто посещаемые ресурсы запоминаются в том числе по фавикону. Вполне возможна ситуация, что пользователь кликнет по ссылке, занимающей даже более низкую позицию, если увидит знакомый значок. Работает и обратное: так как фавикон часто перекликается с логотипом, то запоминается и стоящая за ресурсом компания;

favicon2.png

  • помогать пользователям ориентироваться в закладках и вкладках. Быстрее визуально найти нужный ресурс по значку, чем читать название или описание.

favicon3.png

Как сделать фавикон

Традиционно в качестве иконки сайта используется изображение формата ICO размером 16 × 16 пикселей, размещенное в корневом каталоге как файл favicon.ico. Сейчас фавикон может иметь формат PNG, GIF, JPEG, SVG. Но так как поддержка может отсутствовать в каком-либо конкретном браузере или его версии, как правило, используют ICO. Размер, кроме стандартного, может быть 32 × 32, (не везде 60 × 60), 120 × 120.

Подобранное изображение должно:

  • ассоциироваться с сайтом и/или тематикой. Часто фавиконку создают на основе логотипа, чтобы она работала на брендинг организации, или подбирают что-то, связанное с темой, чтобы подчеркнуть релевантность, визуализировать концепцию, вызвать эмоцию и т. д.;
  • быть простым и понятным. Значок имеет скромные размеры и воспринимается при быстром просмотре, поэтому стоит избегать сложных форм, слишком мелких деталей, неоднозначных смыслов и пр.;
  • по возможности быть оригинальным. В интернете можно найти базы готовых иконок, но если выбрать ту, которая используется многими, особенно конкурентами, можно потерять в узнаваемости.

Скачанное, сконвертированное или разработанное изображение размещается в корневой папке сайта. Затем в код head нужно добавить ссылку на фавикон вида <link rel=»icon» href=»http://путь до файла» type=» image/формат»>.

Если используется файл формата ICO, то в type указывается image/x-icon или image/vnd.microsoft.icon.

Для браузера Internet Explorer используется особая ссылка, где вначале будет link rel=»shortcut icon».

Для корректного отображения на мобильных устройствах также могут потребоваться отдельные записи, например rel=»apple-touch-icon».

Дополнительное использование файлов больших размеров, например 120 × 120, способствует тому, чтобы возможность отображения фавиконки в разных местах, устройствах, браузерах была максимальной. Например, в устройствах на iOS иконки большого формата могут использоваться как значки приложений.

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

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

wiki.rookee.ru

Что такое фавикон?


Фавикон (Favicon – сокращение от «favorite icon») — это изображение, которое отображается в адресной строке браузера перед адресом, во вкладке, соответствующей окну с открытой страницей сайта, а также при добавлении ресурса во вкладки с избранным. Эти изображения могут помочь пользователю лучше запомнить бренд или компанию, повысят узнаваемость сайта. Часто в качестве фавикона используют уменьшенное или немного переделанное в соответствии с форматом изображение логотипа компании или бренда.

Преимущества использования фавикона

Использование favicon приносит пользу со временем. Вот например зацените такие варианты:

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

Таким образом, фавикон – часть образа сайта, которая выполняет не только эстетическую функцию, но и делает более удобным для пользователя поиск портала в закладках, вкладках, выдаче.

Фавикон сайта

Особенности работы Яндекса с фавиконками

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

Чтобы проверить, отображает ли Яндекс favicon, можно найти свой портал в списке выдачи и посмотреть, видна ли иконка слева от него. Также можно вписать в адресную строку следующую конструкцию: для Яндекса — http://favicon.yandex.net/favicon/www.site.ru (где вместо www.site.ru нужно напечатать домен своего сайта). Правильно созданный Фавикон отобразится на черном фоне, и это значит, что Яндекс его видит.

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


  • Размер изображения не соответствует требуемому: 16х16 пикселей;
  • Формат изображения не тот – должен быть ico, jpeg или png (первый вариант – более предпочтительный для Яндекса);
  • Картинка размытая или не уникальная – иногда по этим причинам поисковик блокирует иконки;
  • У Яндекса происходит обновление системы – тогда спустя какое-то время все должно исправиться само;
  • Сайт находится далее сотой позиции в выдаче – в этом случае фавикон тоже может не отображаться.

Проверив картинку по этим критериям, нужно исправить недостатки. Если и после этого не отображается иконка, можно обратиться в поддержку Яндекса.

Чтобы фавикон отображался в Яндекс.Директе, он должен быть правильно оформлен и находиться в нужном месте на сайте. Тогда поисковой робот Яндекса проиндексирует его и начнет показывать в выдаче. Происходит это обычно через 2-4 недели после публикации сайта с изменениями. Уведомлять или просить Яндекс о публикации фавиконки не нужно, это произойдет автоматически по прошествии определенного времени после ее появления на портале.

Как создать фавикон

Если вы хотите создать из большого изображения в формате, например, png, ico-файл, то вам не помешало бы поставить Adobe Photoshop для начала. Затем устанавливается плагин ICO для Фотошопа (поищите в поисковике плагин для вашей версии ФШ). Когда он установлен, мы копируем нужный файл ICOFormat.8bi (для 32-бит) или ICOFormat64.8bi (для 64-бит) по одному из следующих путей:

C:Program FilesAdobeAdobe Photoshop CS6 (64 Bit)Plug-insFile Formats
C:Program Files (x86)AdobeAdobe Photoshop CS6Plug-insFile Formats


Если папки «Plug-ins» или «File Formats» нет, то ее необходимо создать. Теперь при диалоге сохранения можно выбрать ico формат. Размеры создаваемых значков могут быть кратны 8 (16×16, 24×24, 32×32 и так далее, но надежнее всего выбрать именно 16×16).

Затем изображение, которое должно стать фавиконом, открывается в Фотошопе. Жмется “Image – Image Size” и размер изображения меняется на 16х16 пикселей. Затем жмется “File – Save as” и выбирается формат ICO (название файла нужно сделать favicon.ico).

Далее файл загружается в корневую папку сайта. После этого через «Внешний вид – редактор» админки WordPress в файле header.php прописываются следующие строки:

Через некоторое время фавикон появится на сайте.

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

Сервисы

Для создания иконок также существуют специальные программы и ресурсы, среди которых популярностью пользуются:


  • favicon.cc – простейший редактор позволит создать несложное изображение, принцип работы немного напоминает Paint. Также выбираются цвета, и выполняется рисунок нажатием на пиксельные квадраты, которые нужно закрасить. Есть инструмент для исправления. Созданную картинку здесь же можно сохранить на компьютер в качестве готового изображения favicon. В процессе работы внизу экрана можно наблюдать предварительный результат в том виде, в каком он будет отображаться в браузере. Ресурс также предлагает большой выбор готовых иконок;
  • favicon.ru – здесь лучше создавать фавиконы из уже готовых изображений. Картинка загружается с компьютера, обрабатывается системой и преобразуется в файл favicon.ico, который затем можно скачать;
  • iconj и audit4web – базы, в которых можно найти готовые фавиконы.

Есть и такой сервис:

Можно обратиться за разработкой изображения и к дизайнеру, но это обойдется существенно дороже.

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

znet.ru

Что такое Фавикон и зачем он нужен для сайта


По сути Favicon — это обычный значок (изображение небольшого размера 16 на 16 пикселей, иконка). Но для владельца сайта он может очень много значить. Однако, обо всем по порядку.

Само по себе название «фавикон» произошло от английского словосочетания FAVorites ICON, означающего — иконка для «Избранного» (так называются закладки в браузере Internet Explorer). Зачем она нужна? Очевидно, что так гораздо проще отыскивать взглядом нужную вам закладку, ибо легче искать знакомый значок, чем читать названия сайтов.

Что такое фавикон для сайта

Раньше картинку Favicon вы могли видеть в адресной строке браузеров, перед URL-адресом открытой страницы (в моем IE9 так до сих пор и осталось), но после того, как все браузеры стали поддерживать вкладки, то данный значок мигрировал как раз на эти самые вкладки. Зато, когда их открыто очень много, именно фавиконы позволяют понять какая вкладка какому сайту соответствует:

Что такое фавикон для сайта

Само собой, что и свое изначальное значение Favicon.ico не утратил, он по-прежнему используется в закладках всех браузеров для быстрого визуального поиска нужного сайта среди тысяч закладок (взгляните на верхнюю панель вашего обозревателя и убедитесь в этом).


Что такое фавикон для сайта

А также, что немаловажно, поисковая система Яндекс отображает Favicon в своей выдаче (результатах поиска) для каждого ресурса, если у него этот значок будет иметься (был добавлен и правильно настроен владельцем сайта, а робот Яндекса успел уже его проиндексировать).

Что такое фавикон для сайта

У Яндекса имеется специальный бот для индексации фавиконов под названием YandexFavicons (у них даже апдейты бывают, после которых и имеет смысл проверять наличие нового и обновленного Favicon.ico рядом с вашим сайтом в выдаче), в задачу которого входит сбор и обновление иконок для всех сайтов. Робот Яндекса, специализирующийся на их индексации, посещает сайты с периодичностью от нескольких дней до одного месяца (апы, соответственно, очень редкие получаются).

Поэтому не стоит ждать того, что недавно созданный в online generator или сделанный самостоятельно фавикон сразу же появится в поисковой выдаче Яндекса рядом с описанием вашего ресурса. Должно будет пройти какое-то время. Яндекс, после того как найдет Favicon.ico у вас на сервере, преобразует ее в формат PNG (из графического формата ICO) и с этого момента фавикон вашего сайта будет доступен по адресу:


http://favicon.yandex.net/favicon/ktonanovenkogo.ru

Естественно, что для проверки своего сайта вам нужно будет в конце приведенной ссылки вместо URL-адреса моего блога написать свой.

Если у вашего проекта Favicon еще не настроен, то самое время задуматься о его создании и установке, т.к. это позволит вам привлекать большее количество посетителей с страниц Яндекса (из поисковой выдачи), ибо рядом с адресом вашего проекта будет красоваться эта иконка, побуждая пользователей выбрать вас, а не соседа по выдаче).

В принципе, Favicon.ico нужного размера вы можете сделать и сами, так же у вас будет возможность создать его с помощью онлайн генераторов (из загруженных вами картинок) или же просто скачать целиком их online коллекцию или галерею.

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

В общем, выгода создания яркого и запоминающегося значка (мини-логотипа) для своего сайта очевидна (прежде всего это узнаваемость «бренда» и все хорошее, что из этого следует). Осталось только понять, как его создать и поставить на свой сайт, а также, что из себя должен представлять этот графический файл? На второй вопрос ответить проще — по определению Favicon должен быть сохранен в формате ICO, размещен в корне сайта (хотя, можно и другом месте), а его размер при этом должен составлять 16 на 16 пикселей.

В принципе, чтобы создать favicon, вовсе не обязательно использовать какие-либо специальные онлайн генераторы, хотя это довольно удобно и просто. Можно попытаться сделать его в Photoshop, но он по умолчанию, к сожалению, не умеет сохранять изображения в формате ICO. Поэтому для того, чтобы научить Фотошоп работать с ICO, нужно будет установить специальный плагин.

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

Ну, а самый простой вариант — это скачать коллекцию Favicon-ок из какой-нибудь онлайн галереи или каталога. О том, где ими можно будет разжиться, читайте чуть ниже.

Как создать Favicon онлайн и где можно скачать их коллекцию

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

  1. Faviсon.cc — довольно-таки удобный онлайн-генератор фавиконов. Используя его вы можете, например, создать свою иконку с нуля (полный эксклюзив), нарисовав ее попиксельно. Для этого вам нужно будет нажать в левой части окна сервиса на кнопку «Create New Favcon».

    Что такое фавикон для сайта

    В центре страницы генератора расположена область, где каждый квадратик является пикселем вашей будущей фавиконки. Ваша задача состоит в закрашивании разными цветами этих квадратиков. Для закрашивания одного квадратика цветом нужно поставить галочку в правой части окна сервиса в поле «Color Picker», выбрать на расположенной там же палитре нужный цвет и щелкнуть по нужному квадратику. Для удаления неправильной закраски поставьте галочку в поле «transparent» и щелкните по квадратику, в результате чего он станет бесцветным (прозрачным).

    Для перемещения пикселя по холсту генератора вам нужно будет поставить галочку в поле «move». Результат своих трудов в реальном масштабе вы сможете наблюдать в области «Preview» под холстом. Если созданный вами Фавикон вам подходит, то нажмите на кнопку «Download» для его сохранения к себе на компьютер. В результате вы получите графический файл, который сможете затем скачать и загрузить на сервер хостинга.

    Теперь вы знаете как сделать мини-логотип для своего сайта с нуля. Но если вы графическими талантами не обладаете, то можете на сервис онлайн генератора загрузить любую картинку для будущего фавикона, которая будет служить болванкой. Картинка может быть абсолютно любого размера и формата. Для загрузки файла значка на онлайн сервис вам нужно будет нажать в левой части окна сервиса на кнопку «Import Image».

    В открывшемся окне, нажав на кнопку «Обзор», найдите на своем компьютере подходящее изображение. Затем выберите, что делать с соотношением сторон вашей картинки при преобразовании его в формат 16 на 16 (квадрат). Это актуально, если загружаемое вами изображение не квадратное. В этом случае возможны два варианта: оставить соотношение сторон неизменным (Keep dimensions), либо преобразовать картинку к квадратному виду (Shrink to square icon). Во втором случае изображение будущей фавиконки будет искажено по одной из осей.

    Для загрузки в online generator и преобразования вашей картинки нужно будет нажать на кнопку «Upload». Созданная из него Favicon.ico будет доступна к редактированию точно так же, как и нарисованная вами. Когда закончите колдовать над шедевром, то нажмите на кнопку «Download» для того, чтобы скачать его к себе на компьютер.

    На этом онлайн сервисе также имеется возможность использовать коллекции фавиконов, созданные другими его пользователями и выложенные в общий доступ. Для того, чтобы посмотреть имеющиеся в галереи экспонаты, вам нужно будет нажать в левой части окна либо на кнопку «Latest Favicons» для просмотра коллекций отсортированных по дате создания, либо на кнопку «Top Rated Favicons» для просмотра галерей отсортированных по рейтингу.

  2. Favicon.ru — когда-то этот сервис был значительно проще описанного выше онлайн генератора, но последнее время он стал практически его аналогом, но только на русском языке. Favicon.ru позволяет не только преобразовывать любое имеющееся у вас изображение (на компьютере или в интернете) в формат ICO с размером 16 на 16 пикселей, но и дает возможность нарисовать его с нуля попиксельно.

    Что такое фавикон для сайта

    Этот вариант online favicon generator примечателен, пожалуй, только тем, что он отечественный. Поэтому он и попал в эту статью. Итак, для работы с ним вам нужно на главной странице вверху нажать на кнопку «Выберите файл» и указать путь до нужного изображения на вашем компьютере. Загруженное и преобразованное в формат Favicon.ico изображение можно будет подкорректировать, а затем сохранить к себе на компьютер. Все просто и удобно.

  3. Logaster.ru — это онлайн генератор логотипов, но помимо логотипов он еще создает и фавикон. В отличии от всех других сервисов, вам не нужно рисовать дизайн фавикона или конвертировать ее с логотипа.

    Что такое фавикон для сайта

    Для того, чтобы создать фавикон, сначала необходимо ввести название сайта или компании и выбрать вид деятельности. Сервис предложит готовые к использованию несколько десятков шаблонов фавикона. Более подробно, как создать фавикон, можно прочитать здесь. После создания Favicon.ico, вы можете скачать файл к себе на компьютер в формате ICO или PNG.

После этого вам только остается нажать на кнопку «Создать». На открывшейся странице вы увидите ссылку для скачивания получившегося фавикона.

Подборка онлайн генераторов, коллекции и галереи фавиконов

Если вам по каким-либо причинам не понравились описанные выше favicon generator, то могу предложить попытать счастье на одном из следующих бесплатных онлайн-сервисов:

  1. FaviconGenerator — позволяет преобразовать в нужный формат фавикона любое загруженное с вашего компьютера изображение (загружать можно картинки в формате PNG, JPEG, JPG, GIF).
  2. AntiFavicon — достаточно интересный Favicon Generator. На нем вы можете создать фавикон с надписью. Текст надписи вам нужно будет ввести в поля «Top text» и «Bottom tex», а цветовую гамму — настроить в области «Colors».
  3. FavIcon from Pics — еще один простой онлайн сервис — указываете путь до картинки на своем компьютере, преобразуете и скачиваете результирующий файл в формате ICO и GIF.
  4. Iconj — примечательно то, то созданную иконку вы можете либо скачать, либо оставить на сервисе и получить на этот файл ссылку
  5. DeGraeve — достаточно мощный Favicon Generator, по функционалу похож на рассмотренный ранее Faviсon.cc. Здесь тоже можно сделать все либо с нуля, либо загрузить изображение, которое в последствии можно подкорректировать и скачать уже в формате ICO подходящего размера.
  6. Generator — позволяет как генерировать фавикон из загруженного изображения, так и создать ее с нуля в специальном редакторе.
  7. Онлайн редактор иконок favicon.ico — ну, как бы, все при нем — и создание фавиконов с нуля, и доработка уже имеющегося изображения.
  8. Online Favicon — очень функциональный инструмент для создания и редактирования мини-логотипов
  9. Free Favicon Generator — на случай, если ничего из выше предложенного списка вас не устроит.
  10. Фавикон-генератор — простенько и со вкусом…

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

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

Если у вас нет желания или возможности (вы не художник и ни когда им не были), то проще всего будет попробовать поискать в галереях с коллекциями бесплатных фавиконов:

  1. Галерея иконок для сайта favicon.ico — более чем 15000 мини-логотипов для вашего сайта на любой вкус и цвет
  2. Iconj — достаточно большая коллекция значков, разработанных другими людьми и выложенных в общий доступ
  3. Favicon.cc — 55 тысяч различных вариантов на все случаи жизни. Имеются также анимированные фавиконы, которые правда будут видны только в браузере FireFox
  4. The Favicon Gallery — еще чутка подходящих по размеру иконочек

Если вы знаете еще какие-то подобные ресурсы, то я добавлю ваши ссылки в этот список.

ktonanovenkogo.ru

Фавикон – что это такое и для чего он?

Вот такие иконки и называются фавиконами. У них есть определенный размер(16 на 16 пикселей), и сохраняются они в специальном формате.

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

Фавикон для сайта: как его воспринимают посетители?

Таково психологическое восприятие пользователей. Если у сайта в заголовке есть красочная картинка, то это активизирует любопытство. Хочется увидеть поближе: что же за ней скрывается?!

Кроме того, что это отличный способ увеличить посещаемость (любопытных людей и в наш век достаточно). Чтобы выделиться на фоне ресурсов похожей тематики, используйте фавикон, который придаст вашему сайту уникальность и неповторимость. Благодаря иконке пользователям легче найти такой ресурс в перечне ссылок, добавленных в закладки. Единственно верное решение – добиться оригинальности и привлекательности этой иконке. Приятно видеть живописную и колоритную картинку. Изображение на картинке по всем критериям должно соответствовать тематике вашего сайта. И дизайн логотипа, отражающий и повторяющий в какой-то мере тематическую линию ресурса либо содержащий в себе хотя бы сочетания названий ресурса, также должен быть тождественен самому веб-сайту.

Устанавливаем фавикон на сайт

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

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

www.markint.ru

Что такое фавикон и для чего он необходим?

Прежде, чем приступить к конкретным практическим действиям, надо все же до конца выяснить степень необходимости установки фавикона и ту роль, которую он выполняет. Вообще, слово favicon происходит от от слияния двух английских слов: favorite (любимый, избранный) и icon (иконка, иллюстрация, символ).

Что же такое фавикон и в чем его преимущество? Это небольшая картинка размером 16 на 16 пикселей, которая появляется рядом с тайтлом вашего ресурса после загрузки соответствующего графического файла с расширением ico в корневую директорию сайта (подробности установки ждут вас ниже по тексту этой публикации).

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

Ежели пользователь работает сразу с большим числом вкладок, и тайтлы плохо просматриваются, то наличие таких иконок дает возможность, окинув взглядом, сразу определить, где какая страница открыта, чтобы перейти на нее. Вот так это дело выглядит в Хроме (тут вся информация о веб-браузере Google Chrome):

«>

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

«>

Другим важным плюсом наличия изображения favicon будет его появление на странице результатов поисковой выдачи (серпа) Яндекса. Это очень удобно юзерам, которые ищут для себя нужную информацию.

Они могут выбирать веб-страницы для перехода не только с помощью предоставленных тайтлов и сниппетов, но и по значку выделить нужный сайт из ряда других (который, возможно, понравился ранее из-за высокого качества контента):

«>

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

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

Ведь при условии качественного содержания посетители будут не просто возвращаться на этот ресурс, но и своими действиями увеличивать время просмотра, его глубину и другие ПФ. Именно favicon изначально поспособствует в этом.

Так что наличие фавиконки выгодно как юзерам, так и вебмастерам. За это можно выразить глубочайший респект «зеркалу рунета», выдача которого в этом смысле выгодно отличается от серпа Гугла, который выглядит слишком аскетичным.

Кстати, у Яндекса даже имеется специальный бот, который занимается индексированием иконок сайта. Так что даже после установки фавикона он не сразу может появится. Придется подождать очередного апдейта (неделю, иногда чуть больше), чтобы он отобразился на странице поиска. Иконку своего сайта в закромах «зеркала рунета» можно найти по совершенно конкретному адресу. Моя, например, находится здесь:

http://favicon.yandex.net/favicon/goldbusinessnet.com

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

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

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

Как сделать favicon для сайта в online generator и бесплатно скачать коллекции иконок

Теперь перейдем непосредственно к практическим действиям. Среди русскоязычных сервисов стоит выделить онлайн-генератор Логастер. Процесс создания фавикона не требует больших усилий или каких-то специальных знаний. Вам не нужно быть дизайнером, чтобы получить качественный фавикон всего в несколько кликов мыши.

Перед созданием фавикона, вам необходимо создать логотип, но его создание проходит всего в 4 шага, поэтому вы в считанные минуты сможете подобрать логотип, а затем на его основании создать фавикон. На странице логотипа необходимо нажать треугольник и выбрать строчку — «Создать фавиконку с этим логотипом»:

«>

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

«>

Достаточно только выбрать понравившийся дизайн. При необходимости его можно редактировать. Сервис Логастер подойдет тем, кто уделяет особое внимание дизайну своего сайта, но не хочет тратить слишком много сил, средств и времени.

Среди зарубежных генераторов следует отметить довольно функциональный Favicon.cc, где можно сформировать весьма приличный мини-логотип, даже если вы не обладаете какими-то особыми навыками.

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

Все эти возможности воплощены в находящемся на главной странице блоке кнопок, который расположен в левой части:

«>

Для создания эксклюзивной иконки воспользуемся кнопочкой «Create New Favicon» и нарисуем картинку сами. В плане достижения ее уникальности это самый оптимальный вариант, поскольку в этом случае риск повторить чей-нибудь вариант будет наименьшим.

Наша задача упрощается тем, что окно конструктора, в котором нужно нарисовать фавикон, поделено на квадратики, сторона каждого из которых равна 1 пикселу. При этом общий размер иконки будет составлять необходимые нам 16×16, так как по вертикали и горизонтали пикселов как раз 16 (как вы понимаете, это окошко для удобства представлено в увеличенном формате):

«>

В правой части конструктора под надписью «Color Picker» даны инструменты для создания иконки. Вертикальный спектр дает возможность выбрать цвет кликом по нужной его части, а палитра слева от него — оттенок этого цвета. После выбора цвета водите по пиксельной сетке курсором, который примет форму карандаша, и закрашивайте необходимые участки.

Если передвинуть горизонтальный ползунок «Transparency» вправо-влево, добьемся изменения прозрачности пиксела. Показатель 0% дает полностью непрозрачный фон, 100% — наоборот, прозрачный. В процессе рисования поставьте галочку напротив «transparent» при желании полностью удалить не понравившийся цвет с изображения в том или ином месте:

«>

А теперь попробуем настроить полупрозрачный фон необходимых нам участков или всего рисунка в целом, сдвинув ползунок «Transparency» на отметку «50%»:

«>

При нежелании каждый раз возвращаться к палитре для выбора оттенка отметьте опцию «pick existing color», после которого курсор примет форму пипетки, с помощью которой можно копировать цвет уже закрашенных областей:

«>

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

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

Что еще мне нравиться в этом сервисе, так это то, что одновременно с манипуляциями на «холсте» на вкладке открытой в браузере вебстраницы Favicon.cc, а также в разделе предварительного просмотра «Preview», который находится чуть ниже, появляется изображение будущей фавиконки в реальном размере, которое меняется в такт всем действиям:

«>

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

Далее продемонстрирую, как сделать фавикон в данном online генераторе из уже существующей картинки. Для этого воспользуйтесь кнопочкой «Import Image» в упомянутом уже блоке, после чего выбираете графический файлик на жестком диске ПК и загружаете его на сервис («Upload»):

«>

Здесь следует обратить внимание на то, что поддерживаются графические файлы в форматах jpg, jpeg, gif, png, bmp, ico, cur. Это уже можно считать широким выбором. Максимальный размер загружаемого файла не должен превышать 5 Мб, что более, чем достаточно.

Также имейте ввиду, что для сохранения пропорций изображения (которое не является квадратным, где ширина и высота равны) оставляете включенной опцию «Keep demensions».

Ежели примените «Shrink to square icon&#187;, то иконка примет форму квадрата, но будет деформирована по одной из сторон, что, по моему мнению в стандартном варианте не является лучшим решением. Впрочем, в каждом конкретном случае могут быть свои предпочтения. После загрузки картинки она займет свое место в редакторе генератора Favicon.cc:

«>

Далее вы можете отредактировать ее как вашей душе угодно, используя описанные выше инструменты. Хочу отметить следующее. Я специально взял для примера изображение с расширением jpg, которое, как известно, не поддерживает прозрачный фон. Обратите внимание, что и в редакторском окошке фоновые пикселы непрозрачные (белого цвета).

Казалось бы, какая разница? Но посмотрим, как будет выглядеть подобный значок на фоне, отличном от белого (например, неактивные вкладки браузера Google Chrome серого цвета):

«>

Согласитесь, белый фон все портит. Но все это поправимо. Для того, чтобы пикселы вокруг рисунка сделать прозрачными, используем для коррекции инструмент «transparent» и с помощью «ластика» настраиваем прозрачность:

«>

После выполнения этих действий фавиконка на серой вкладке браузера становится гораздо более симпатичной:

«>

Не рассмотренным остался один инструмент. Это опция «move» которая позволяет при необходимости переместить всю картинку на нужное расстояние (вправо-влево, вверх-вниз):

«>

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

Делаем анимированный фавикон в онлайн генераторе

Рассказывая о сервисе Favicon.cc, я не сказал еще об одной опции, которую он предоставляет, а именно о возможности создать анимированную иконку. Прежде, чем продолжить, хотелось бы вас предупредить, что анимация будет работать не во всех браузерах. Так что решайте сами, нужно это вам или нет. Я, например, считаю это излишеством, но, как говорится, на вкус и на цвет…

Если вы решили, что подобная favicon-ка будет для вашего сайта полезной, то нажимайте на опцию «Use Animation» в самом низу окна редактора. Чтобы сделать просто моргающую иконку, достаточно щелкнуть по «Append New Frame», создав пустой фрейм (без изображения) и выбрать из выпадающего меню желаемую периодичность (на скриншоте 1 сек.):

«>

Чтобы анимация просматривалась в предпросмотре ниже, отметьте чекбокс «animate preview». Для данного примера фавиконка будет моргать с периодичностью в одну секунду. Исчезать она будет потому, что второй фрейм, как я уже отметил, будет пустым:

«>

Но можно во втором (третьем и т.д.) фрейме создать другую картинку, тогда все эти изображения будут сменять друг друга в установленном порядке. Есть возможность использовать одну и ту же иконку, но в разном цвете.

С этой целью надо просто скопировать исходное изображение, кликнув по кнопочке «Copy Previous Frame» и средствами генератора изменить некоторым образом цветовую гамму. Для образца в дополнение к исходнику я соорудил нечто вроде рамочки:

«>

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

Кроме скорости чередования кадров можно настроить также количество повторений (итераций). К слову, «loop forever» означает «бесконечный цикл»:

«>

Ежели в процессе творческой работы вам что-то не понравилось, то опции «Clear Frame» и «Delete Frame» позволят соответственно полностью очистить или удалить ненужный фрейм.

Список онлайн генераторов и галерей с коллекциями фавиконов

Чтобы дать вам возможность выбора, предлагаю взглянуть на другие сервисы, как российские, так и зарубежные, где также можно создавать favicon-ки для своего ресурса. Начнем с online генераторов рунета:

  • Favicon.ru — почти полный аналог очень подробно описанного мною выше онлайн сервиса Favicon.cc, поэтому создавать здесь значок будет проще простого, тем более, что интерфейс полностью на русском. Единственный недостаток Фавикон.ру, если его можно считать таковым — отсутствие возможности генерировать анимированную иконку;
  • Favicon.by — ресурс с аналогичным выше приведенным генераторам набором инструментов. Для получения значка сайта вы можете импортировать не только изображение с компьютера, но и уже готовую фавиконку абсолютно с любого сайта, просто введя URL-адрес веб-ресурса, а затем отредактировать ее по своему желанию;
  • PR-CY.ru — простенький generator без опций редактирования, где в три шага делаете favicon.ico и скачиваете на компьютер;
  • CY-PR.com — загруженную картинку просто преобразовывает в формат ico. Для скачивания подведите курсор к полученной фавиконке, вызовите контекстное меню правой кнопкой мыши и выберите из него пункт «Сохранить картинку как»;

Ну а теперь лучшие англоязычные ресурсы, которые достойны внимания:

  • Favicon-Generator — генерирует значок на основе загруженного изображения формата png, jpg или gif. Здесь вы можете добавить созданную иконку в публичную галерею;
  • DeGraeve — этот сервис позволяет сделать фавиконку как на основе готовой картинки, так и самостоятельно, используя свои художественные навыки;
  • Iconj — генерация favicon.ico из загруженной картинки;
  • FaviconGenerator — сервис с простой опцией преобразования изображения с расширением png, jpg, jpeg или gif в графический файл формата ico;
  • DynamicDrive — поддерживаются графические форматы gif, jpg, png и bmp, максимальный размер файла 150 kB.

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

Если эксклюзивность иконки вас не напрягает, (а может, вы нуждаетесь сразу в нескольких картинках для ряда своих проектов), то в сети можно насобирать их целую гору. Благо существуют специальные галереи с коллекциями бесплатных иконок. Скачать их можно тут:

  • Коллекция от Favicon.сс — одна из самых больших, включает более 450 000 различных фавиконок. На первой странице они ранжированы по рейтингу (в начале самые топовые), а на этой страничке по дате их размещения (вверху самые свежие). В числе прочих присутствуют и анимированные;
  • От Favicon.by — очень приличная галерея иконок, выложенных для свободного скачивания;
  • От Iconj — более 18 000 фавиконок на самую разнообразную тематику, отдельно представлены анимированные, что создает дополнительный комфорт при отборе;
  • Audit4web — этот каталог содержит свыше 15 000 самых разных вариантов значков.

Нам осталось определиться, каким образом установить созданный и загруженный favicon.ico на свой веб-сайт. Все подробности этого важного действа ниже.

goldbusinessnet.com

Что такое favicon?

Favicon (англ. Favorite Icon) — это небольшая иконка (изображение, картинка) в специальном формате, которая отображается в адресной строке браузера при просмотре сайта, вкладке браузера или в его закладках (“Избранном”).

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

Зачем нужен favicon для сайта?

favicon – товарный знак Вашего сайта. У многих компаний на сегодняшний день есть отличительный favicon значок, который выделяет их среди конкурентов. Чтобы иконка лучше запоминалась пользователями, компаниям следует отображать в ней свой логотип, который также должен быть одним из эллементов шапки сайта. Ещё одна положительная особенность использования favicon в том, что при просмотре большого количества сайтов в браузере, Вы не видите заголовка страниц полностью, а видите только иконку и вы сразу с легкостью можете определить ту вкладку, куда Вы хотели перейти.

Что лучше изобразить на фавикон?

  • Иконка должна соответствовать тематике сайта.
  • бренд, если у Вас сайт связан с этим брендом. При этом для разных страниц можно отображать разные бренды;
  • Применяйте фавикон, на который хочется кликнуть, это повысит кликабельность при просмотре в поиске Яндекса, Гугла;
  • Сделайте несколько дизайнов фавиконок для различных разделов Вашего сайта.
  • Сделайте несколько дизайнов фавиконок для различных событий (напр. Нового Года, Дня Святого Валентина или Дня космонавтики, :).

Разместите полученный файл в корне вашего сайта, там где находится основной индексный файл(index.php). Для указания браузеру местонахождения иконки сайта(favicon) в секции заголовка страницы (head) вставьте следующую строку:

 <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> 

Как сделать анимированный favicon?

Формат ICO не поддерживает анимацию. Но современные браузеры позволяют использовать формат GIF для миниатюр. Возможно указать для современных браузеров один анимированный файл(favicon.gif), а для древних, типа Intertet Explorer, другой(favicon.ico). Для этого в секцию head внесите следующие две строчки:

 <link rel="icon" type="image/png" href="/favicon.png" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> 

Естественно предварительно нужно поместить оба файла в корневую папку сайта.

Здесь можно сделать анимированнй gif.

Как быть, если запрещен показ изображений в браузере?

Если сделать favicon c внедренным изображением в код старницы:

 <link rel="icon" type="image/gif" href="data:image/gif;base64,R0l...куча_символов...gCADs=" /> 

То иконка будет показываться в браузере даже тогда, когда картинки будут отключены. Как сделать внедренное изображение описано здесь.

Как получить favicon с сайта

Не все вебмастера располагают favicon.ico в корне сайта. Для получения адреса favicon используйте следующий скрипт:

<? $url='http://htmlweb.ru'; $html=file_get_contents($url); if (preg_match('/<([^>]*)link([^>]*)(rel="icon"|rel="shortcut icon")([^>]*)>/iU', $html, $out)) {  $link_tag = $out[0];  if (preg_match('/href([s]*)=([s]*)"([^"]*)"/iU', $link_tag, $out))  {  $favicon = trim($out[3]);  if (strpos($favicon, '://')===false)  $favicon = $url. '/' . ltrim($favicon, '/');  } } ?>

Поисковые системы Google, Яндекс и favicon

Робот поисковых систем кешируют иконки сайтов. Закешированные иконки доступны по следующим запросам:

http://favicon.yandex.net/favicon/htmlweb.ru

http://www.google.com/s2/favicons?domain=htmlweb.ru

Кроме этого, Яндекс может сделать Вам «спрайт» из иконок разных сайтов:

http://favicon.yandex.net/favicon/google.com/yandex.ru/htmlweb.ru

Иконки для iPhone и iPad

<!-- For iPhone 4 Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon- 114x114-precomposed.png" /> <!-- For iPad: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon- 72x72-precomposed.png" />

Даже если Вы не указываете link-ссылку на картинку iphone все равно будет искать в корневой папке сайта файл с именем apple-touch-icon.png и если найдет, то Возьмет из него картинку, закруглит по углам и на нее будет наложен блик автоматически самоим устройством. Для избежания этого вместо apple-touch-icon.png следует написать apple-touch-icon-precomposed.png владельцы айфонов и точей, т.к. для них мы делаем красивую иконюшку размером 57×57 (можно кстати и больше, но это стандартный размер иконки на ланч-скрине), подключая ее так:

<link rel="apple-touch-icon" href="apple-touch-icon.png"/>

Правильно опубликовать и объявить иконки для старых и новых Retina iPad:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

Как динамически менять favicon?

Если Вы попробуете поменять значение свойства тега через DOM, то Вы не пролучите желаемый результат. Чтобы динамически поменять иконку страницы, надо сперва удалить тег link со старой иконкой из заголовка страницы, а затем добавить его с новым содержимым. Делается это так:

// Ссылка на файл новой иконки  var icon='new_favicon.ico';  var head = document.getElementsByTagName('head')[0];   // Найти и удалить старую иконку из тега HEAD  var links = head.getElementsByTagName('link');  for (var i = 0; i < links.length; i++) {  var lnk = links[i];  if (lnk.rel=='shortcut icon') {  head.removeChild(lnk);  }  }   // Добавить новую иконку  var link = document.createElement('link');  link.setAttribute('href',icon);  link.setAttribute('type','image/x-icon');  link.setAttribute('rel','shortcut icon');  head.appendChild(link);

HTML5 и favicon

В HTML5 был добавлен атрибут sizes, позволяющий объявить несколько различных версии одной и той же иконки, и это могут быть PNG файлы:

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">

Как объявить плитку для планшетов на Windows 8?

Объявление для Windows 8.0 выглядит как-то так:

<meta name="msapplication-TileColor" content="#2b5797"> <meta name="msapplication-TileImage" content="/mstile-144x144.png">

Windows 8.1 и IE 11 ожидают несколько версии изображения, объявленных в browserconfig.xml. Например:

Можно не объявлять, если имя файла не менять:

<meta name="msapplication-config" content="browserconfig.xml">
<?xml version="1.0" encoding="utf-8"?> <browserconfig>  <msapplication>  <tile>  <square70x70logo src="/mstile-70x70.png"/>  <square150x150logo src="/mstile-150x150.png"/>  <square310x310logo src="/mstile-310x310.png"/>  <wide310x150logo src="/mstile-310x150.png"/>  <TileColor>#2b5797</TileColor>  </tile>  </msapplication> </browserconfig>


htmlweb.ru

Как создать Favicon (фавикон) с нуля

Есть один очень удобный сервис. Он имеет адрес favicon.cc. Этот сервис по построению фавиконок выглядит так:

Как сделать favicon.ico для сайта (фавикон)Чтобы нарисовать favicon достаточно выбрать цвет и просто рисовать. Если Вы нарисовали что-то, где-то не так, для удаления фрагмента рисунка выберите инструмент transparent (поставьте галочку) и “тыкайте” на пикселы (“квадратики”), которые нужно убрать:

Как сделать favicon.ico для сайта (фавикон)Я нарисовал следующий фавиконку:

Как сделать favicon.ico для сайта (фавикон) Больше всего в favicon.cc мне понравилось то, что можно мгновенно видеть результат своего труда в оригинальном размере. Для этого нужно немного спуститься вниз в раздел Previw:

Как сделать favicon.ico для сайта (фавикон) Или же можно прямо в браузере (Opera, Firefox, Internet Explorer и т.п.) посмотреть итог работы:

Как сделать favicon.ico для сайта (фавикон)

Теперь нам нужно просто сохранить иконку сайта на свой компьютер. Для этого нужно нажать на кнопку “Download Favicon”:

Как сделать favicon.ico для сайта (фавикон)

Создание favicon (фавикон) из готового изображения

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

Сервис на русском языке, поэтому у Вас не должно возникнуть проблем. Просто указываете картинку, которую Вы хотите видеть в роли иконки Вашего сайта (кнопка “Обзор”), потом нажимаете “Создать favicon.ico”, а дальше уже “Скачать favicon.ico”.

Список сервисов с готовыми favicon (фавикон)

Также можно просмотреть уже готовые иконки, попробовать найти что-то подходящее. Я предлагаю следующие сервисы:

  1. iconj – Огромная база фавиконок;
  2. favicon.cc – Да, в этом сервисе тоже есть уже готовые фавиконки.
  3. Favicon.co.uk – Можете глянуть и сюда, вдруг найдете что-то подходящее.
  4. audit4web – Большое количество иконок для сайта.

wpnew.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.