Слово «фавикон» (favicon) пошло от английского «Favoritesicon», что означает: «значок для избранного». Это маленькое изображение, которое отображается в адресной строке сайта, в списках закладок, используется некоторыми поисковыми системами. В данной статье мы поговорим о том, как добавить фавикон на сайт или поменять его, как сделать фавикон в режиме онлайн и какие сервисы или программы использовать.
Не стоит приуменьшать полезность фавикона. Ведь именно он создает на подсознательном уровне первое впечатление о проекте, привлекает внимание и создает эффект бренда.
Раньше фавиконы были только в формате ico, т.к. поддерживались исключительно браузером Internet Explorer. На сегодняшний день доступны разные форматы – gif, png и другие.
Таким образом, если говорить простыми словами, то favicon – это иконка сайта, которая используется различными программами и сервисами (поисковыми системами, сервисами закладок, каталогами и т.д). Как уже говорилось выше, поисковые системы также использует данные иконки.
Если поисковая система показывает в выдаче favicon, это, в большинстве случаев, способствует повышению кликабельности и росту числа переходов из поиска. Что, в свою очередь, положительно сказывается на росте позиций и улучшении запоминаемости того или иного проекта. Однако обратите внимание, что устанавливать фавикон лучше на уже оптимизированный сайт.
После смены или установки нового графического изображения, должно пройти некоторое время. Подобные изменения в поисковой выдаче появляются обычно через 2-3 недели.
Классический размер фавикона составляет 16х16 пикселей. Однако есть и другие размеры: 24х24, 32х32, 48х48 и 64х64. Это обусловлено тем, что некоторые пользователи сохраняют ярлык интернет-страницы на рабочем столе. Все эти размеры помещаются лишь в один favicon на вебсайте и от этого его величина становиться больше. Поэтому, к созданию фавикона нужно подойти грамотно.
На сегодняшний момент практически все современные браузеры имеют возможность показывать соответствующую иконку для каждой страницы в отдельности.
Если вы не знаете, как установить фавикон, следуйте следующему алгоритму:
- Сделайте favicon. Сервисы для его создания указаны ниже.
- Загрузите полученное изображение в корневой каталог сайта. К примеру, www.ste.ru/favicon.ico (gif, png)
- В мета-тег <head></head>нужно вставьnt следующий код:
<link rel=»shortcut icon» href=»/favicon.ico» type=»image/x-icon» />
<link rel=»icon» href=»/favicon.ico» type=»image/x-icon» />
Каким должен быть фавикон?
Разобрав технические моменты, можно переходить к имиджевым. Каким же на самом деле должна быть иконка сайта для улучшения запоминаемости и брендирования?
- Не будем скрывать, что фавикон является своеобразной визитной карточкой сайта. Именно поэтому, несмотря на его маленький размер, обратить внимание на него все-таки стоит. Логичным дизайнерским решением для одного из наиболее маленьких графических элементов является его схожесть с дизайном проекта. Если фавикон не будет ассоциироваться с сайтом и формировать о нем первое впечатление, тогда зачем он вообще нужен?
- Сделайте иконку простой и понятной для среднестатистического пользователя. Не стоит вставлять целые шедевры мировых художников! Фавикон должен быть простым и понятным – это аксиома.
- Как уже говорилось выше, данный графический элемент должен отображать тематику сайта. Но если вы продаете бытовую технику, будет проблематично уместить в фавикон все ее многообразие или, наоборот, ограничиться одной лишь стиральной машиной. Подумайте ещё и найдите верное решение!
- Favicon должен ассоциироваться с сайтом. Обратите внимание, на иконку, к примеру, Яндекса – большая красная буква «Я». Или Google– буква «g». Благодаря созданию определенного образа, ваш сайт станет более узнаваемым как онлайн, так и оффлайн.
Сервисы для генерации фавиконов и галереи
На сегодняшний момент существует достаточно большое количество сервисов и программ для генерации фавиконов. Помимо этого, присутствуют также и объемные галереи, на которых можно скачать уже готовые профессиональные изображения.
seranking.ru
Данная статья открывает небольшой цикл статей, в котором мы подробно разберем что такое фавикон, зачем он нужен, посмотрим где их можно взять, как сделать самому и как разместить на своем сайте (блоге).
Итак, сначала разберемся что такое фавикон. Если Вы посмотрите на адресную строку Вашего браузера, то увидите примерно вот такую картину:
Вот эта маленькая картинка (пиктограмма) рядом с адресом Яндекса и есть фавикон.Фавиконы употребляются еще в нескольких местах, например, на страницах поисках Яндекса и т.д. :
У большинства сайтов перед названием стоят фавиконы. Некоторые фавиконы несут смысловую нагрузку, связаны с тематикой сайта, как например, на сайте Mail.ru:
А некоторые представляют собой просто абстрактные картинки, типа фирменного знака:
Чтобы посмотреть их многообразие, достаточно открыть «Закладки» в собственном компьютере или сделать какой-нибудь запрос.
Немного отвлекусь. На скриншоте представлена картинка с автоновостями и я невольно подумал: хорошо бы, если фавикон хоть немного отображал суть сайта. Однако это не всегда может получиться. Например, Вас интересует (и Вы об этом пишите) . Нарисовать АКПП — на таком маленьком рисунке никто ничего не разберет. В общем, в этом вопросе я пока не знаю как поступить.
Продолжим. Само слово фавикон происходит от английского favicon, которое в свою очередь является сокращением двух слов – FAVorites ICON, что переводится как «иконка (значок) для избранного». Так она стала называться потому, что первоначально использовалась в Microsoft Internet Explorer в качестве картинки около закладки в «Избранном».
Такие картинки были одного формата 16×16 пикселей, формат таких картинок, как правило, — ico и располагаются они в одном месте – корне сайта.
Что такое фавиконы, я думаю, Вы теперь себе отчетливо представляете. Несколько сложнее ответить на вопрос: а зачем они, собственно, нужны?
Традиционно на этот вопрос отвечают: чтобы выделить свой сайт среди других. Честно сказать, я этого не понимаю. Как можно выделиться, когда иконки есть почти у всех? Вот Вы можете сказать, что внимательно разглядываете фавиконы на странице выдачи какого-нибудь поисковика?
Еще мне попадались утверждения, что некоторые поисковики, в частности, Яндекс, сайты с фавиконами лучше индексирует сайт. Ничего на этот счет сказать не могу. Здесь что-нибудь внятное могут сказать только разработчики поисковых алгоритмов, а они всегда молчат.
Более-менее похоже на правду утверждение – «чтобы было как у всех», «чтобы было не хуже, чем у соседа» и все в таком роде. Ну, не знаю – не знаю, это дело каждого.
Что касается меня, то я прекрасно обходился и без них, но с ростом количества моих сайтов, я пришел к выводу, что хорошо бы завести какую-нибудь метку дня них, чтобы мне их было проще искать на странице выдачи. Вот так я и обзавелся фавиконами.
Кстати, мне гораздо легче искать свои сайты, если у них одинаковая метка (фавикон), поэтому у всех моих сайтов он одинаковый. Поэтому, если увидите где-нибудь такой фавикон, значит, я где-то рядом 🙂
А что Вы думаете, для чего еще нужен фавикон? Напишите в комментариях, буду Вам признателен.
Другие статьи о фавиконах:
Как сделать из картинки фавиконку?
Где найти (скачать) фавикон?
Как установить фавиконку на сайт?
Где найти (скачать) фавикон для сайта на бесплатном хостинге?
А еще Вы можете подписаться на рассылку и первым получать самые свежие статьи.
Удачи!
Автор: Сергей Ваулин
www.novichkoff.ru
Зачем нужен фавикон
Фавикон – на первый взгляд незначительный элемент сайта, но на самом деле помогающий решать важные задачи:
- улучшать вид сайта в выдаче поисковых систем. Если нет иконки, сниппет менее заметен визуально, что может негативно сказаться на кликабельности. Чтобы выделить ресурс, используются разные визуальные приемы. Например, создаются значки в виде стрелочки, привлекающей взгляд к заголовку;
- способствовать узнаваемости сайта, бренда. Часто посещаемые ресурсы запоминаются в том числе по фавикону. Вполне возможна ситуация, что пользователь кликнет по ссылке, занимающей даже более низкую позицию, если увидит знакомый значок. Работает и обратное: так как фавикон часто перекликается с логотипом, то запоминается и стоящая за ресурсом компания;
- помогать пользователям ориентироваться в закладках и вкладках. Быстрее визуально найти нужный ресурс по значку, чем читать название или описание.
Как сделать фавикон
Традиционно в качестве иконки сайта используется изображение формата 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
Вы, конечно можете попытаться найти готовый файл favicon.ico на сайте www.iconfinder.com, но думаю многим хотелось бы сделать что-то свое. Ведь именно фавиконка будет выделять ваш сайт в поисковой выдаче. О том как это сделать вы сейчас знаете. Итак, приступим.
Существует масса программ и сервисов. Можно воспользоваться, например, с помощью инструмента Favicon Generator, можно легко преобразовать любой GIF, PNG или JPEG в ICO, который поддерживается всеми современными браузерами. Программа также позволяет создавать фавиконки «с нуля» с помощью удобного онлайн-редактора.
Создание фавиконки онлайн
Если предыдущий вариант по каким-либо причинам вас не устраивает, то можете попробовать быстрый, легкий и простой способ и сделать фавиконку за несколько минут с помощью сервиса Logaster.
Logaster — это онлайн-сервис для создания логотипов и элементов фирменного стиля. В нем вы в автоматизированном режиме, буквально в несколько кликов, получите иконку для сайта в формате ICO и PNG.
Но учтите, что никакой автоматический генератор логотипов не может заменить творчество человека.
Конечно, крупные компании такими инструментами пользоваться не будут. Они найдут дорогого дизайнера, который создаст для них профессиональный логотип. Но, небольшим фирмам, частным предпринимателям такой инструмент может быть как раз кстати.
Как происходит процесс создания иконки в Логастер
- Чтобы фавиконка сочеталась с вашим логотипом, вам будет предложено сначала создать логотип (это бесплатно).
- Напишите название и, если хотите, слоган, указываете вид деятельности, а Logaster самостоятельно подготовит для вас множество вариантов логотипов.
- Выбираете подходящий логотип, вы сможете изменить его позднее.
Вот что у меня получилось
Теперь можно нажать на кнопочку «Скачать логотип». В бесплатной версии на нем будет водяная надпись Logaster.com
Логотип можно купить. После этого вы сможете скачать в выбранном формате (PNG, JPEG, PDF, SVG) и размере (1024 px, 5000 px).
Теперь переходим непосредственно к созданию фавиконки.
- Опять-таки выбираете понравившийся вариант.
- Можете изменить форму, сделав ее квадратной, с закругленными углами, круглой или вообще не вписывать ее в определенную форму.
- При желании добавьте цветную обводку, кликнув на инструмент «Обводка».
- Нажмите на кнопку «Сохранить».
Вот какая получилась фавиконка. В принципе, выглядит неплохо.
Как добавить фавиконку на свой сайт
- Купите и активируйте фавиконку.
- Скачайте ее.
- Разархивируйте скачанный файл в корневую папку вашего сайта.
- Вставьте следующий код на все страницы сайта в тег
<head>:
<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"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192"> <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="icon" href="/favicon.ico">
Дизайн-пакет со скидкой
Дополнительно вы можете приобрести весь комплект фирменного стиля. Вот один из вариантов.
Плагин для создания фавиконок
Существует огромное количество разных программ для создания фавиконок. В основном они являются примитивными, позволяющими создать иконки, используя при этом 16 цветов.
Создать фавиконку можно прямо в Фотошопе. Для этого понадобится плагин, который можно скачать по адресу www.telegraphics.com.au. Для его установки, скопируйте файл ICOFormat.8bi в директорию c:Program FilesAdobeAdobe Photoshop CS2Plug-InsFile Formats.
С помощью плагина ICOFormat.8bi, вы сможете сохранять картинки в виде «.ico-файлов».
Как установить плагин ICO (Windows Icon) Format
- 64-bit Windows (Vista/Windows 7):
- Restart before installing;
- Положить плагин в папку C:Program FilesAdobePhotoshopPlug-InsFile Formats, но у меня другая структура, у меня этот файл хранится здесь: C:Program FilesAdobeAdobe Photoshop CS6 (64 Bit)Plug-ins.
- If you are running on a 64-bit Windows system and are launching the 64-bit version of Photoshop CS4 or CS5, download the 64-bit version of the plugin and put it in the Plug-Ins folder corresponding to 64-bit Photoshop (i.e., the one in «Program Files» not «Program Files (x86)»).
- Move the plugin into the «File Formats» folder inside your Photoshop Plugins folder:
- For Windows (32-bit), ICOFormat.8bi
- For Windows (64-bit), ICOFormat64.8bi
- For Mac OS X, ICOFormat.plugin (note that separate versions are provided for CS2, CS3/4 and CS5)
- For Mac OS X/Classic, icoformat
- For 68K MacOS, icoformat(68K)
- If using Corel PSP Photo X2, put the plugin in C:Program FilesCorelCorel Paint Shop Pro Photo X2LanguagesENPlugIns
- Quit and relaunch Photoshop, if it’s already running.
Есть еще онлайн-сервис www.convertico.com. ConvertICO это бесплатный онлайн-конвертер файлов ICO/PNG. Он работает быстро и прост в использовании. Он используется для преобразования значков рабочего стола, иконок приложений, а также фавиконок для веб-сайтов.
Как сделать favicon.ico самому
- Открыть Фотошоп.
- Создать документ 32×32 пикселей.
- Вставить из Иллюстратора смарт-объект готового изображения.
- С помощью команды «Сохранить как» сохранить фавиконку в формате
.ICO*. - Полученную фавиконку загрузить в корень сайта и подключить через тему Вордпресс, либо руками прописать в шаблон сайта. О том как подключать favicon, я уже писал ранее.
* Если у вас не установлен специальный плагин ICO (Windows Icon) Format, можете скачать его с сайта www.telegraphics.com.au/sw/. Там есть для Маков, Винды 32, 64-разрядных с поддержкой всех версий Photoshop, включая CS6.
Отображение favicon
Чтобы ваш сайт отображал фавиконку, ее можно просто расположить в корне сайта. Браузер и поисковые системы сами определят, что у вас есть файл favicon.ico и будут ее отображать автоматически. Данный способ является самым простым и он действенен в 95% случаев. Но, можно и явно подключить фавиконку.
Как подключить favicon
Фавиконка подключается при помощи метатега <link> c указанием соответствующих атрибутов.
После создания favicon сохраните его в корневом каталоге вашего сайта. Затем включите следующий код в секции <head> документа HTML.
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"><link rel="icon" href="/favicon.ico" type="image/x-icon">
где:
- Аттрибут
relозначает, что это иконка для сайта; может содержать и «shortcut icon» (при этом Microsoft Internet Explorer будет реагировать на строку «shortcut icon», а браузеры, соответствующие стандартам — на слово «icon») hrefсодержит абсолютный или относительный URL к файлу, где он размещен.- Форматом файла может быть
pngилиgif, размером 16×16 или 32×32 и с 8-битной или 24-битной глубиной цвета.
В некоторых темах подключение происходит программно, с помощью php-кода:
/*<link rel="icon" type="image/png" href="<?php //echo get_template_directory_uri(); ?>/img/favicon.ico" />*/
Как проверить корректность установки фавиконки
Перейдите по ссылке ниже и вместо www.fortress-design.com напишите адрес своего сайта
http://favicon.yandex.net/favicon/www.fortress-design.com
Возможные проблемы
Бывают проблемы с фавиконкой в Яндексе — Вебмастер ее почему-то не видит. На что поддержка отвечает таким письмом:
fortress-design.com
Что такое фавикон и зачем он нужен
Примерами фавиконов для веб-ресурсов могут служить логотипы автомобильных брендов, размещаемые на капоте авто: у Шевроле – галстук-бабочка, у Шкоды – индеец со стрелой, у Ауди – четыре кольца, у Фольца – сплетение букв V и W и т.д.
Favicon отображается в поисковой выдаче Яндекса, на странице закладок и привязывается к веб-ресурсу при выборе, если пользователь добавляет веб-страницу в «Избранное».
Пользователи сети активнее реагируют на картинку, чем на текст. Кроме того, данный значок повышает узнаваемость вашего веб-ресурса, создаёт дополнительное удобство для ваших посетителей и привлекает дополнительное внимание.
Как сделать Favicon
Фавикон – обычный графический файл. Сделать его можно несколькими способами.
- Создать самостоятельно в графическом редакторе.
- Нарисовать при помощи интернет-сервисов типа favicon, а затем скачать.
- Взять готовое изображение и также воспользоваться сервисом в интернете, который при загрузке начальной картинки преобразует ее в фавиконку.
- Скачать готовый favicon из банка графических иконок, которых в интернете очень много.
Но скачать или создать фавикон – это только первый шаг. Его необходимо установить на ваш сайт. Расскажем, как это сделать.
Загрузите файл на ваш веб-сайт, желательно, в его корневую папку. Как правило, браузерам теперь не нужно на него указывать, если файл имеет стандартное название и находится в корне. Но все же для явного указания на фавикон пропишите всайта следующие строки:
<link rel=»icon» type=»image/тип файла» href=»путь от корня к фавикон» />
Для IE указываем shortcut icon (с конкретным примером для иконки PNG):
<link rel=»shortcut icon» type=»image/png» href=»/assets/img/icon.png» />
При этом можно указать 2 разных изображения: одно для IE, другое — для остальных веб-браузеров.
Не забывайте про отображение фавикона для мобильных устройств. В<head>следует указать <link rel=»apple-touch-icon» и т.д.> , при этом изображение должно иметь размер 60х60 или 120х120.
Яндекс отображает иконку веб-ресурса после того, как она попадет в его индекс. Специальный робот обходит сайты примерно 1 раз в месяц и обновляет свою базу.
Для изменения старого favicon на новый следует просто закачать новую иконку с таким же названием на место старого изображения и дождаться ее переиндексации.
Правильный Favicon – какой он
Фавиконка – это визитная карточка, она не должна контрастировать со стилем и тематикой веб-ресурса. Если ваш сайт про автомобили, то стиральная машинка на фавиконе будет выглядеть странно.
- Иконка должна легко восприниматься. Не стоит рисовать на ней полную картину: достаточно 1-2 схематичных изображения.
- Она должна быть заметной, привлекающей внимание. Картинка не должна теряться на белом фоне поисковой выдачи и должна бросаться в глаза.
- Фавиконка должна быть запоминающейся, поэтому используйте простые образы, но не похожие на другие. Иначе вас могут спутать. Многие запомнив вашу иконку, увидев ее снова в выдаче захотят перейти к вам, как к старому знакомому, который однажды уже помог.К примеру, социальная сеть Одноклассники имеет favicon с оранжевыми буквами ОК. Цвет указывает на стилевое решение веб-ресурса, а буквы расшифровываются как две аббревиатуры: сокращенное название веб-ресурса и принятое во всем мире «Окей».
semantica.in
Favicon (сокр. от англ. FAVorites ICON — «значок для избранного» , от названия папки с закладками в MSIE) — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса. Традиционно использовались изображения размера 16×16 пикселей формата ICO, помещённые в корень сайта под именем favicon.ico, — тогда Microsoft Internet Explorer использовал их для закладок.
Самые первые фавиконы применялись для закладок, по которым можно было считать посетителей, отправивших страничку на сайте в папку «Избранное» . Сейчас фавикон применяется более широко, например он отображается в поисковых системах.
Фавикон имеет смысл делать свой, а не выбирать в сети, что бы он соответствовал тематике сайта, его оформлению и т. д. Если для пользователя самостоятельное создание фавикона затруднительный процесс, то можно обратиться к профессионалу.
Если правильно подойти к созданию фавикона, то можно сразу увеличить посещаемость сайта и соответственно увеличить свою доходность. Необходимая деталь, вызывающая интерес при просмотре списка, выдавшегося поисковиком вот, что такое фавикон .
Чем интереснее, красочнее, индивидуальнее будет ваш фавикон, тем больше будет вероятность увеличения посетителей вашего сайта.
favicon.ico Generator
Вещь эта, между прочим, удобная и полезная. С одной стороны, сразу видно серьезное отношение к созданию сайта, с другой — найти картинку в раскрывающемся списке адресной строки или в журнале значительно проще, чем обычный текст напротив «казенного» листочка с заломленным углом.
Можно загрузить произвольную картинку, которую движок сам сожмет до размера 16×16 пикселей, и корректировать ее. Или рисовать с нуля самому. Результат деятельности отображается в реальном времени в текущем окне браузера, что весьма удобно. Итоги работы сохраняются сразу в формате ico.
Favicon – это иконка, которая отображается в адресной строке браузера, в закладках браузера, в папках Windows, если ваша была страница была сохранена на жёсткий диск.
Такая иконка нужна для нескольких вещей:
1. Она создаёт/улучшает вашему сайту бренд и делает его запоминающимся
2. Ваш сайт будет легче отыскать в закладках, среди сотен других счастливчиков
Подробнее ЗДЕСЬ.
http://work.free-lady.ru/favikon-favicon-chto-eto-takoe/
otvet.mail.ru
На сегодняшний день favicon — это не просто значок 16×16 во вкладке браузера. Он является важной составляющей интерфейса, а также играет немаловажную роль в прогрессивных веб-приложениях. Существует немало способов подключения и использования favicon, о которых я расскажу в данной статье.
В каком формате должен быть фавикон?
Раньше основным форматом фавикона был формат ICO. Его главная особенность заключалась в том, что файл такого формата мог хранить в себе несколько вариантов размеров иконки. Сейчас формат ICO считается устаревшим, на смену ему пришёл формат PNG с новыми возможностями по взаимодействию с иконкой.
Помимо PNG, поддерживается формат SVG. Но у него, к сожалению, невысокая поддержка на данный момент. Однако этот формат идеально подходит для фавиконов, его использование намного бы упростило нам жизнь. Будем надеяться, что ситуация скоро изменится.
Фавикон может быть создан ещё в нескольких форматах, например, в формате GIF или JPEG, но проблемы с поддержкой делают их использование нецелесообразным.
HTML5 и атрибут sizes
Атрибут sizes пришел в нашу жизнь с HTML5. Благодаря ему браузер или устройство может выбрать необходимый размер фавикона. Атрибут sizes указывается в формате [ширина х высота] без указания единиц. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться до любого размера, например, если она хранится в векторном формате SVG.
<link rel="icon" sizes="<ширина>X<высота>"> <link rel="icon" sizes="<ширина1>X<высота1> <ширина2>X<высота2>* | any">
Пора ли отправлять ICO на свалку?
Как я уже сказала, формат ICO сегодня уже можно считать устаревшим, но значит ли это, что от него нужно срочно избавиться? Ответ, как всегда, неоднозначный. Есть случаи, когда формат ICO ещё может сослужить вам хорошую службу. Приведу несколько примеров оправданного использования фавикона в формате ICO в разных операционных системах и поговорим об альтернативах.
Windows
Начнём, пожалуй, с Windows.
До 11 версии формат PNG в IE не поддерживался, поэтому для IE10 и более младших версий по-прежнему необходимо использовать формат ICO. А вот с IE11 смело можно переходить на PNG. Для устаревших браузеров Microsoft рекомендует размеры 16х16, 32х32 и 48х48 для фавиконов формата ICO.
Начиная с IE9, сайты получили возможность быть закрепленными в меню и панели задач, а с приходом IE11 и Windows 8.1 появилась возможность создавать закрепленные сайты в виде живых плиток. По умолчанию изображением на плитке будет фавикон, но только не для больших и широких плиток, для которых нужно задавать изображение специального размера. Сделать это можно следующими способами: добавив теги метаданных в разметку веб-страницы или файл конфигурации браузера.
Сначала давайте рассмотрим первый способ.
Определение фавикона в устройствах Windows с помощью метаданных в <head>:
<meta name="msapplication-TileImage" content="imagestileimage.jpg"> Если мы хотим указать иконки для больших плиток, это можно сделать с помощью следующих метаданных:
<meta name="msapplication-square70x70logo" content="images/smalltile.png"> <meta name="msapplication-square150x150logo" content="images/mediumtile.png"> <meta name="msapplication-wide310x150logo" content="images/widetile.png"> <meta name="msapplication-square310x310logo" content="images/largetile.png"> Можно указать цвет фона плитки:
<meta name="msapplication-TileColor" content="#009900"> Можно указать имя закрепленного сайта:
<meta name="application-name" content="Rick and Morty"> Если нет этих метаданных, то в качестве имени используется значение в <title> страницы.
Можно указать текст дополнительной подсказки, появляющейся при наведении указателя мыши на ярлык закрепленного сайта в меню “Пуск” Windows или на рабочем столе:
<meta name="msapplication-tooltip" content="Title"> Можно даже определить адрес документа:
<meta name="msapplication-starturl" content="./"> И тогда независимо от того, какую страницу пользователь перетащил на панель задач, закрепленный сайт будет открывать указанный адрес.
Есть ещё много других метаданных, которые, например, определяют цвета кнопок навигации в браузере или делают плитки динамичными.
Начиная с IE11 Windows 8.1 и Edge Windows 10 можно закрепить веб-сайт с помощью файла конфигурации браузера. Это удобно: создать один файл browserconfig.xml и поддерживать, и подключать его на каждой странице, если у нас есть несколько страниц, которые будут использовать одни и те же плитки.
Вызов файла в <head>:
<meta name="msapplication-config" content="browserconfig.xml"> browserconfig.xml
<?xml version=”1.0" encoding=”utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="/img/favicons/mstile-70x70.png"/> <square150x150logo src="/img/favicons/mstile-150x150.png"/> <square310x310logo src="/img/favicons/mstile-310x310.png"/> <wide310x150logo src="/img/favicons/mstile-310x150.png"/> <TileColor>#000000</TileColor> </tile> <notification> <polling-uri src="notifications/contoso1.xml"/> <polling-uri2 src="notifications/contoso2.xml"/> <polling-uri3 src="notifications/contoso3.xml"/> <frequency>30</frequency> <cycle>1</cycle> </notification> </msapplication> </browserconfig> square70x70logo, square150x150logo, wide310x150logo, square310x310logo — элементы, внутри которых объявляются изображения для различных размеров плитки.
Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей. Желательно, чтобы размер исходного изображения примерно в 1.8 раза превышал размер целевой плитки, чтобы его можно было увеличивать и уменьшать. Например, для 70х70 рекомендуемый размер 128х128, а для широкой плитки 310×150 исходное изображение имеет размер 558×270.
Если плитка сайта статическая, то вышеперечисленных элементов будет достаточно. Если же предполагается динамическая плитка, то необходимо добавить элемент <notification>. Этот элемент может включать в себя до 5 элементов <polling-uri>, содержащих в атрибуте src пути к соответствующим xml-файлам уведомлений. Также внутри этого тега содержится элемент <frequency>, значение которого указывает в минутах интервал между обращениями к сайту за обновлением уведомлений, то есть живая плитка будет обновляться каждые, например, 30 минут. Да, значение не произвольное, а только 30, 60, 360, 720 или 1440.
Наконец, есть внутри тега <notification> еще элемент <cycle>, отвечающий за способ повторения уведомлений (может принимать значения от 0 до 7). Шаблоны доступны только для средних, широких и больших плиток.
Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.
С помощью платформы уведомлений Windows сайт может за один раз показывать на плитке до пяти текстовых сообщений или сообщений с изображениями, которые циклически сменяют друг друга. Не будем подробно останавливаться на этих xml-файлах уведомлений. Существует множество шаблонов живых плиток, вот один из них:
<tile> <visual lang="en-US" version="2"> <binding template="TileWide310x150ImageAndText01" <image id="1" src="images/image1.png" alt="alt text"/> <text id="1">Text Field 1</text> </binding> </visual> </tile> То, что написано в кавычках в атрибуте template — название шаблона. Этот шаблон содержит изображение и небольшой текст. Используется для больших изображений и средних названий. На самом деле, подобных шаблонов очень много: и просто c текстом, и просто с изображением, и с несколькими изображениями, и с несколькими строками текста, и так далее. Большинство шаблонов изображения или текста размещают текст на той же плитке, что и изображение. Но шаблоны с Peek в названии выполняют переключение между изображением и текстом на плитке.
Подробнее о шаблонах можно узнать на официальном сайте.
Mac OS
В Mac OS особо не разгуляешься, к сожалению. Если сохранить сайт на рабочий стол в Mac OS, то значок будет отображаться как скриншот страницы с html кодом. Просто так сайт приложением в Mac OS не сделать, но и не будем.
Safari — вот где нам пригодится формат SVG. Чтобы использовать SVG, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#00а0ff"> Если не указывать эту иконку, то браузер будет отображать первую букву домена нашего сайта.
Вспомнила еще один случай, где нам еще может пригодиться формат ICO. Поисковик Яндекс вставляет фавикон в поисковой выдаче рядом с заголовком сайта. Что, безусловно, увеличит привлекательность сниппета и, как следствие, кликабельность.Яндекс рекомендует использовать для этих целей формат ICO.
iOS
Safari в iOS вообще не отображает favicon во вкладках, но использует их для закладок, так же как и в Mac OS. В iOS пользователи могут добавить сайт на рабочий стол, и оно будет выглядеть как нативное приложение. Эти ссылки отображаются в виде значков и называются Web Clips.
Для этого нужно добавить rel=«apple-touch-icon» и указать размер с помощью атрибута sizes. Каждое устройство нуждается в своем размере иконки. Так как iOS устройств довольно много, и каждое устройство имеет свое разрешение экрана, спецификация, разработанная Apple, поддерживает возможность указать несколько тегов с иконками разных размеров.
<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"> <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png"> Если значок не соответствует рекомендуемому размеру устройства, используется самая близкая по размеру иконка большего размера, нежели рекомендуемый. Когда пользователь заходит на ваш сайт с iOS устройства, запрашиваются файл apple-touch-icon-precomposed.png, который должен быть оформлен в стиле iOS: закругленные углы, блики, и тень. Если файла с таким названием в корне проекта или rel=«apple-touch-icon-precomposed» нет, будет запрошен apple-touch-icon.png, которому разрешено быть таким, какой он есть, а все эффекты будут наложены самим iOS. Соответственно, нужна иконка под каждый размер. А вот если нет и этих файлов, то на рабочем столе iPhone или iPad будет отображаться не красивая иконка, а миниатюра страницы — ее скриншот.
Ходят слухи что Blackberry будет тоже использовать rel=«apple-touch-icon-precomposed», но возможности проверить, к сожалению, не было.
Подробнее прочитать про актуальные размеры для устройств iOS можно на официальном сайте.
Некоторые могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch Icon должна быть 180х180. Остальные устройства могут уменьшить изображение. Но некоторые другие платформы тоже используют Apple Touch Icon, поэтому лучше их объявить.
Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch Icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну из этих иконок.
В iOS можно указать заголовок веб-приложения. По умолчанию используется значение тега <title>. Чтобы задать другой заголовок, добавьте метатег на веб-страницу:
<meta name = "apple-mobile-web-app-title" content = "AppTitle"> Кстати, можно даже установить стиль строки состояния для веб-приложения:
<meta name="apple-mobile-web-app-status-bar-style" content="black"> Можно поменять её цвет, можно сделать полупрозрачной. Это тоже повлияет на вид нашего сайта.
Android
Устройства на Android отлично понимают формат PNG, а ещё поддерживают манифест веб-приложения manifest.json, в котором можно прописать все параметры того, как будет вести себя сайт, если его установить на домашний экран. Этот манифест пока, к сожалению, не читают устройства под IOS. А если Android не найдет этот файл, то он будет использовать apple-icon-touch.
Файл манифеста может содержать в себе ряд космических параметров, но тут находятся лишь те, которые нам необходимы для отображения сайта на домашнем экране:
{ "name": "Rick and Morty", "short_name": "Rick", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#b3adad", "background_color": "#b3adad", "display": "standalone" } Ключ name определяет подпись в приложению на домашнем столе. Если этот параметр не указан, подпись будет взята из <title> в <head>;
Ключ short_name определяет укороченную подпись для приложения, если не хватает места для полного имени;
Ключ icons — определяет массив объектов иконок, может принимать три значения: sizes, src, type;
Ключ theme_color определяет цвет строки состояния. Начиная с 39 версии хрома для Android Lollipop появилась возможность менять цвет интерфейса браузера и цвет вкладки браузера.
Задать цвет можно и через <head>, добавив следующий мета-тег:
<meta name="theme-color" content="#9CC2CE"> Ключ background_color определяет цвет фона для веб-приложения на домашнем столе. Этот же параметр отвечает за то, какой цвет будет иметь фон приложения, когда он открывается, т.е. манифест загрузился, но ещё не загрузились стили;
Ключ display определяет режим отображения веб-приложения. Например, значение standalone, которое мы указали, позволило открывать нам сайт как приложение.
Вызов в <head>:
<link rel="manifest" href="manifest.json"> В манифесте есть ещё много других потрясающих параметров, которые сделают из веб-сайта настоящее приложение, но они уже не относятся к нашей теме.
Автоматизация
В заключение нужно сказать, что все, что мы рассмотрели в рамках данной статьи, не обязательно писать руками, не забывайте про автоматизацию. Существуют сайты, на которых можно быстро сгенерировать все необходимые нам размеры и форматы favicon: realfavicongenerator.net, а при необходимости можно заодно сгенерировать код.
Есть пакеты для сборки и для Gulp, и для Grunt.
Главное помнить, что сегодня favicon — это больше, чем иконка в адресной строке и закладке браузера.
habr.com
Что такое фавикон?
Фавикон (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