Сегодня мы затронем очень интересную тему. При работе над вашим сайтом, у вас рано или поздно возникнет необходимость в создании фавикона. Говоря простым языком, фавикон — это значок вашего сайта, который отображается на вкладке в браузере. Также, его можно увидеть в области быстрого доступа браузера, если ваш сайт был добавлен в «Избранное».
Думаю, нет смысла говорить о том, что фавикон должен быть хорошего качества, ведь он является в какой-то мере лицом вашего сайта. В данной статье мы научимся создавать удовлетворяющие нашим потребностям фавиконы, а также познакомимся с сервисом для их конвертации. Подробнее читайте ниже.
Видеоверсия:
[iframe id=»https://www.youtube.com/embed/9qwJ85yyKRM?rel=0&vq=hd720″ align=»center» mode=»normal» autoplay=»no» maxwidth=»1280″]
Каким должен быть фавикон
Прежде чем приступать к созданию самого фавикона, было бы неплохо остановиться на том, какими они должны быть в идеале. Итак, идеальный фавикон:
- Является четким и понятным
- Сделан в хорошем качестве
- Передает смысл вашего сайта
- Имеет общую стилистику с вашим сайтом
- Выделяется на фоне значков других сайтов
Вышеперечисленные параметры можно отнести к идеальному фавикону. И нам необходимо создать именно такой значок для нашего сайта. Однако, существуют споры о том, что именно должно быть изображено на фавиконе. Я считаю, что в этом вопросе нужно исходить из общей стилистики и тематики вашего сайта. На нем может быть изображена какая-нибудь картинка или текст. В случае размещения на фавиконе текста, он должен состоять не более чем из 2-х букв. Иначе, никто не сможет разобрать подобный текст, ведь размеры фавикона в основном составляют 16*16 пикселей.
Каких размеров бывают значки сайтов
Как Вы знаете, сейчас существует огромное множество браузеров, мониторов и устройств. И их требования к размерам фавиконов отличаются. Существуют следующие варианты размеров, которые следует учесть:
- 16*16px — стандартные размеры фавиконов, подходящие для большинства браузеров и устройств
- 32*32px — используются в некоторых случаях в Internet Explorer и Safari
- 57*57px — используются при отображении на iPhone
- 72*72px — используются при отображении на iPad
- 114*114px — используются при отображении на ретина дисплеях (57*2=114)
- 144*144px — используются при отображении на ретина дисплеях iPad (72*2=144)
Какого формата должны быть фавиконы
Раньше браузеры воспринимали фавиконы только в формате «ico». Сейчас они научились понимать и другие форматы, в том числе и «png». В нашем случае, мы убьем 2-х зайцев одним выстрелом. Вначале мы создадим фавикон в формате «png», а затем сконвертируем его в «ico».
Несколько способов создания фавиконов
На сегодня существует два основных способа создания фавиконов:
- Через специальные онлайн сервисы
- Создание самостоятельно через специальные программы типа Photoshop и Adobe Illustrator
Каждый способ имеет свои особенности. Преимущество создания фавикона через онлайн сервисы состоит в том, что Вам не нужно для этого обладать какими-то специальными навыками. Вы просто загружаете необходимое изображение, дорабатываете его и скачиваете готовый фавикон. Либо просто работаете с текстом и рисуете значок инструментами онлайн сервиса.
общем, главный плюс данного метода заключается в простоте. Однако, обратная сторона медали заключается в том, что качество таких значков для сайтов оставляет желать лучшего. Уникальный фавикон вы не получите по той простой причине, что галерея значков онлайн сервисов не является безграничной. А при использовании собственных изображений, при помощи инструментов сервиса не так-то просто создать качественный продукт. В случае рисования значка вручную через инструменты онлайн сервиса получается «нечто невообразимое».
Поэтому, мы выбираем второе, более сложное но удачное решение. Для создания фавикона мы воспользуемся программой Photoshop. Если вы не имеете опыта работы с этой программой, то ничего страшного. Следуя моим инструкциям вы легко справитесь с поставленной задачей.
Создаем фавикон
Как я уже упоминал, фавикон можно создать при помощи изображения или просто букв. В нашем случае я буду использовать какую-нибудь картинку. Например, давайте представим что у нас сайт автомобильной тематики. Следовательно, нам нужно найти изображение из области авто. Я предлагаю сделать значок нашего сайта в виде колеса.
Подбираем изображение
Брать изображения Вы можете откуда угодно. Например, через тот же яндекс картинки. Главное условие — чтобы изображение было простое, без теней и объемов. Это связано с тем, что при ее уменьшении до размеров в 16 пикселей она не будет обладать большой детализацией. Из-за лишних объемов и теней картинка может смазаться.
Я нахожу подходящее изображение при помощи поиска google по запросу «колесо». Мне лишь остается ее сохранить кликнув правой кнопкой мыши и выбрав функцию «Сохранить картинку как».
Далее, мы открываем это изображение при помощи Photoshop. Очень важно, чтобы фавикон был с прозрачным фоном. В нашем случае это не так. Для удаления заднего фона мы используем инструмент «Волшебная палочка». Суть ее работы очень проста. С помощью этого инструмента мы можем выделять области на изображении одного и того же цвета. Так как фон нашего изображения четко контрастирует с самим колесом, сделать это будет очень легко. Кликнув один раз мы выделяем одноцветную область. Нажав сочетание клавиш CTRL+Delete мы удаляем эту область.
Делаем это со всеми частями фона изображения. Таким образом, на нашей картинке колесо находится на прозрачном фоне, что и требовалось сделать. Итак, заготовка для значка нашего сайта готова.
Создаем фавикон в 2-х разных размерах
Я предлагаю сделать 2 фавикона размерами 64px и 16px. Для начала нам нужно создать значок большего размера (64px). Для этого мы нажимаем сочетание клавиш CTRL+N. В появившемся окне мы выбираем высоту и ширину изображения в 64px.
Далее, нам необходимо перенести наше колесо в область только что созданного изображения. Для этого мы возвращаемся на картинку с колесом и выбираем инструмент «Перемещение». Следующим шагом мы кликаем по изображению колеса и при зажатой левой кнопке мыши перемещаем ее в область нового изображения. Убедитесь, чтобы при перемещении был выделен слой с колесом. В противном случае перенос не удастся.
После перемещения колеса в новое изображение мы видим что они не подходят по размеру. Нам нужно уменьшит колесо до размеров в 64 px. Для этого мы зажимаем клавишу SHIFT и кликнув по диагональной точке изображения уменьшаем ее. Вот мы и создали первый фавикон для нашего сайта. Напоминаю что он у нас размером 64*64px. Теперь нам остается сохранить ее выбрав функцию «Сохранить для веб» во вкладке «Файл». Мы выбираем формат PNG-24 и папку images. Сам фавикон называем также, только латинскими буквами — «favicon».
Отлично. Теперь нам остается создать фавикон меньшего размера. Для этого мы кликаем по вкладке «Изображение» и выбираем функцию «Размер изображения». Здесь мы задаем ширину и высоту в 16px. Теперь нам остается сохранить данное изображение для веб. Ее мы можем назвать «favicon-2».
Итак, вот мы и создали 2 фавикона для нашего сайта в формате «png». Мы создали сначала вариант с размером в 64px для того, чтобы потом легко уменьшить ее до размеров в 16px. Если вначале создать вариант с 16px, то увеличить ее до 64px без потери качества не получится. Поэтому, имейте это ввиду чтобы не делать двойную работу.
Устанавливаем фавикон на сайт
Для установки фавикона на сайт внутри тега <head> мы прописываем:
<link rel="shortcut icon" href="images/favicon-2.png" type="image/png">
В случае, если у нас фавикон в формате «ico» то мы вместо «png» прописываем «ico». Например:
<link rel="shortcut icon" href="images/favicon-2.ico" type="image/ico">
Далее, сохраняем прогресс и проверяем результат. После открытия нашей веб-страницы мы видим появление фавикона.
Как видите, значок сайта отображается как мы и задумывали.
Конвертируем значок для сайта в формат «ico»
Современные браузеры без проблем могут распознавать и отображать фавиконы в формате «png». Однако, у Вас может возникнуть необходимость конвертировать ее в формат «ico». Одним из преимуществ данного формата является хранение фавиконов всех размеров в одном файле. Согласитесь, что это очень удобно. Итак, для конвертации наших значков мы воспользуемся классным сервисом — xiconeditor.com. Работать с ним очень просто. Все происходит 4 шага:
1. Для начала нам нужно загрузить наши фавиконы. Для этого мы кликаем по кнопке «Import».
2. Далее, мы выбираем загружаемые файлы кликнув по кнопке «Upload». Следующим шагом убираем галочки с ненужных размеров (32 и 24px) и нажимаем «Ok».
3. При желании можно кликнуть на кнопку «Preview» и посмотреть как они будут отображаться. Для скачивания наших фавиконов в формате «ico» мы кликаем по кнопке «Export».
Итак, вот мы и научились создавать фавиконы в «png» и конвертировать их в формат «ico». Я специально не рассматривал детальную обработку изображения в фотошопе, так как для многих это будет излишне. При необходимости, вы конечно же можете дополнительно улучшить качество фавикона поработав с пикселями в фотошопе. Я же постарался изложить все самое необходимое и в упрощенной форме. И на этом у меня все. Надеюсь данный урок оказался для вас полезным. Если это так:
- Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
- [popup_trigger id=»3874″ tag=»span»]Подписывайтесь[/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.
На этом я с Вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!
site4business.net
favicon.ico
Хотя все настольные браузеры могут иметь дело с этим значком, это в первую очередь для более старой версии IE.
Формат ICO отличается от формата PNG. Этот момент сложный, потому что некоторые браузеры достаточно умны, чтобы правильно обрабатывать PNG-изображение, даже если он был неправильно переименован с расширением ICO.
ICO файл может содержать несколько изображений и Корпорация Майкрософт рекомендует размещать 16×16, 32×32 и 48×48 версии значка в favicon.ico. Например, IE будет использовать версию 16×16 для адресной строки, а 32×32 — для ярлыка панели задач.
Объявите значок с помощью:
<link rel="icon" href="/path/to/icons/favicon.ico"> Однако рекомендуется разместить favicon.ico в корневом каталоге веб-сайта и не объявлять его на всех и пусть современные браузеры выбирают значки PNG.
Значки PNG
Современные настольные браузеры (IE11, последние версии Chrome, Firefox…) предпочитают использовать значки PNG. Обычно ожидаемые размеры 16×16, 32×32 и «как можно больше» . Например, MacOS/Safari использует значок 196×196, если он самый большой, который он может найти.
Каковы рекомендуемые размеры? Выберите свои любимые платформы:
- Большинство настольных браузеров: 16×16, 32×32, «как можно больше»
- Android Chrome: 192×192
- Google TV: 96×96
- … и другие, которые более или менее документированы.
Значки PNG объявляются с помощью:
<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/path/to/icons/favicon-32x32.png" sizes="32x32"> ... Остерегайтесь: Firefox не поддерживает атрибут sizes и использует последний значок PNG, который он находит. Обязательно объявите 32×32-картинку последней: она достаточно хороша для Firefox, и это предотвратит ее загрузку большого изображения, которое не нужно.
Также обратите внимание, что Chrome не поддерживает атрибут sizes и имеет тенденцию загружать все объявленные значки. Лучше не объявлять слишком много значков.
Мобильные платформы
Этот вопрос касается значка рабочего стола, поэтому нет необходимости слишком много размышлять в этой теме.
Apple определяет значок касания для платформы iOS. iOS не поддерживает значок без квадрата. Он просто перетаскивает изображения без квадратов, чтобы сделать их квадратными (ищите пример Kioskea).
Android Chrome использует значок Apple touch, а также определяет значок 192×192 PNG.
Microsoft определяет изображение плитки и browserconfig.xml.
Заключение
Создание знака, который работает повсюду, довольно сложно. Я советую вам использовать этот генератор favicon. Полное раскрытие: я автор этого сайта.
qaru.site
Это фавикон
Если дословно перевести этот термин, то получится «любимое изображение». Это слово происходит от совмещения двух английских слов favorites, что значит избранный, и icon, то есть изображение или иконка.
«>
Место размещения фавиконов – адресная строка веб-ресурса на вкладке браузера или список избранных закладок. В некоторых поисковых системах фавиконы располагаются возле ресурсов на страницах поиска. Например, в «Яндексе». Стоит также отметить, что алгоритмы поиска этой системы при поисковой выдаче сначала отдают предпочтение ресурсам, у которых есть иконка сайта.
Поэтому не нужно игнорировать значимость этого изображения. Пускай размер фавикона и маленький, он является брендом ресурса, привлекает пользователей и влияет на составление первого впечатления о сайте.
Со страниц истории
Впервые такое понятие как «фавикон» появилось в 1999 году. Тогда компания «Майкрософт» выпустила новую версию браузера Explorer. В этом обновленном варианте Internet Explorer -5 стало возможным использовать фавикон. Для этого нужно было загрузить изображение с расширением .ico в основную папку сайта.
Загруженная картинка должна была иметь формат http://«название сайта» /favicon.ico. Лишь в таком случае браузер мог использовать соответствующего размера фавикон в списке закладок и возле адресной строки сайта, что расположен в закладках. Но это уже давно устаревшая техника, сейчас иконка сайта поддерживается на сайтах и без закладок. Кроме того, доступны разные форматы избранных изображений. Теперь можно использовать не только картинку с расширением .ico, подойдут также .jpg, .png, .gif и .jpeg форматы.
Особенности форматов
Как уже было сказано раньше, в качестве фавиконов использовалось только изображение с расширением .ico. И это намного упрощало задачу, можно было взять понравившееся изображения подогнать под размер фавикона и попросту поменять расширение. Сейчас этим занимаются специальные сервисы, но из-за того, что увеличилось количество форматов нужно иметь хотя бы базовые знания об их особенностях.
«>
Самые распространенные форматы на сегодня это .png и .ico:
- .ico— этот формат превосходно подходит для Windows. Картинки с таким расширением имеют разное разрешение и глубину цвета. То есть, битовую глубину, что характеризирует информацию о цвете для каждого пикселя и делает изображение более точным. Для браузера Internet Explorer это отличное решение, так как здесь могут использоваться фавиконы разных размеров.
- .png — файлы этого расширения более удобны в использовании. Это объясняется тем, что для создания иконки сайта не нужно никаких дополнительных инструментов. Более того, форматом поддерживается маска-канал, с помощью которой можно создать картинку самого маленького размера без потери качества изображения. Единственное, чем этот формат уступает предыдущему – невозможность отображения фавикона в Internet Explorer.
Другие расширения
Что касается остальных форматов, то у каждого есть как свои преимущества, так и недостатки. Все они проявляются в зависимости от того, в каком браузере отображаются. К примеру, картинки формата .gif не совместимы со старыми браузерами. Картинкам .jpg недостает качества и четкости изображения, однако здесь плавные переходы между цветами. Отличным качеством изображения обладают фавиконы формата .svg, вот только они доступны лишь в браузере Opera.
Под вопросом также остается анимированная иконка сайта формата .apng, поскольку движущееся изображение может отвлекать внимание пользователя от основной информации. Это с одной стороны и выделяет ресурс среди других, а с другой может раздражать постоянным мерцанием.
«>
Размер имеет значение
В классическом варианте размер иконки составляет приблизительно 16ˣ16 пикселей. По крайней мере, так было до недавнего времени. Но с развитием технологий размер фавикона стал увеличиваться. Сейчас максимальный размер иконки составляет 64х64 пикселя. Такая динамика расширения избранного изображения спровоцирована желанием (и, соответственно, возможностью) пользователей сохранять ярлыки сайтов в соответствующих папках или на рабочем столе, чтобы иметь быстрый доступ.
На сегодняшний день существует 5 размеров фавикона:
- 16х16;
- 24х24;
- 32х32;
- 48х48;
- 64х64;
«>
Добавление иконки
Все эти размеры должны вместиться в один фавикон на сайте, а это несколько усложняет задачу создания избранного изображения. Но сегодня все браузеры обладают функцией воспроизведения фавикона в отдельности для каждой страницы. То есть, в зависимости от запроса браузеры автоматически подбирают размер фавикона для сайта.
Чтобы установить фавикон на сайт, нужно всего лишь следовать несложному алгоритму:
- Во-первых, необходимо создать фавикон. Этот процесс не должен доставить неудобств. Для начала нужно выбрать изображение, которое будет позиционировать сайт, а потом отредактировать его при помощи специального сервера, который автоматически подгоняет картинку под стандартный размер фавикона.
- Во-вторых, нужно полученный материал загрузить в корневую папку сайта.
- И в-третьих, вписать в тег <head> такой код:
«>
Чтобы имидж не испортить
Как уже было сказано фавикон – это бренд, лицо сайта. Поэтому крайне важно понимать, какой должна быть иконка, чтобы привлечь внимание посетителей, а не оттолкнуть их. Размер фавикона в пикселях очень маленький, но тем не менее он играет ключевую роль в процессе персонализации сайта. Логично будет сделать фавикон таким образом, чтобы он подходил под общий дизайн ресурса. Важно помнить, иконка сайта должна создавать о нем первое впечатление, если же фавикон не ассоциируется с ресурсом, то лучше его попросту удалить.
Второе, на что стоит обратить внимание, — это легкость восприятия. Иконка должна быть простой, чтобы ее мог понять каждый пользователь, и это даже не обсуждается.
«>
Основная задача фавикона: изображать ключевую тематику ресурса. Но никто не запрещает применять для этого всю свою креативность. К примеру, если сайт занимается продажей бытовой техники, то можно, конечно, в качестве фавикона использовать изображение стиральной машинки или холодильника. Но чем тогда ресурс будет отличаться от сотен подобных ему, и чем он тогда запомнится? Что если попробовать поэкспериментировать и с названием проекта? Например, «Яндекс» уже давно стал, узнаваем благодаря алой букве «Я». Это и есть главная особенность фавикона, как бренда – врезаться в память пользователя и характеризировать конкретный сайт, выделяя его из сотен других.
Программы для создания фавиконов
Сегодня каждый веб-мастер может воспользоваться специальными сервисами для создания фавиконов. К тому же, существуют объемные галереи, из которых можно выбрать готовую иконку сайта, сделанную на профессиональном уровне. Среди создателей сайтов особой популярностью пользуется галерея IconJ. Она является не только каталогом, но и генератором. Желающие могут выбрать иконку для своего ресурса из каталога, в котором находится более 18000 картинок или же создать свой авторский фавикон.
«>
На пространстве Рунета популярной является база фавиконов от рекламного агентства «Веб Аудит». Что касается иностранных ресурсов, то лучшим вариантом для создания и выбора иконки сайта считают Favicon.cc. Здесь можно воспользоваться специальными функциями, чтобы настроить цветовую гамму, обрезать картинку или наложить дополнительные слои.
Создание фавикона не требует особых знаний или уникальных умений, а его наличие может значительно повысить кликабельность и, соответственно, увеличить трафик. Главное помнить, каждая иконка – это бренд, который должен быть запоминающимся и понятным.
www.syl.ru
Что такое favicon для сайта?
Он представляет собой небольшую картинку, которая будет отображаться во вкладке браузера. Размер favicon составляет 16×16 пикселей. Также эта картинка отображается в результатах выдачи поисковых систем, и если favicon на сайте будет отсутствовать, то рядом с сайтом в выдаче будет пусто. Стоит отметить, что фавикон помогает пользователю отыскать конкретно ваш сайт среди сотни других, поэтому его присутствие на сайте хоть и не является обязательным, но строго рекомендовано. И да, размер favicon не обязательно должен быть 16×16. Некоторые вебмастера делают фавикон размером 32×32 и даже 64×64. Но в своих рекомендациях поисковые системы Google и «Яндекс» пишут, что идеальный размер favicon — 16×16. Поэтому лучше следовать этим советам поисковых систем.
Как создать favicon?
Есть несколько разных способов создания этой картинки. Самый первый и простой способ создать favicon — украсть его, например, из англоязычного сайта.
Допустим, вы создали блог по бытовой технике и полностью настроили его, но остался последний штрих — фавикон. Пишите в поиске Google запрос appliances и смотрите первые 10 сайтов. Фавиконы этих сайтов идеально подойдут вашему новому блогу. Если какая-нибудь картинка вам понравилась, открывайте исходный код страницы и ищите запись favicon.ico. Там будет указан адрес расположениях фавикона. Откройте его и скачайте на компьютер, затем загрузите на сайт и подключите (о подключении ниже).
Второй способ создания favicon размером 16×16 пикселей — использовать специальный сервис генерации фавиконов. Он работает по следующему принципу: вы загружаете изображение (любого размера и расширения), которое подходит для титульной иконки сайта, и нажимаете на кнопку на кнопку Create Favicon. Через секунду получаете готовый фавикон, который можно скачать, загрузить на свой сайт и подключить. Самый популярный сервис — Favicon Generator.
Отметим, что данный сервис лишь немного упрощает процесс создания иконок. То же самое можно сделать и самому. Просто найдите картинку, которая вам подходит, измените ее размер до 16×16 пикселей и сохраните с расширением ico. Все это проделывается в течение одной минуты в программе Paint.
Есть и другие онлайн сервисы поиска фавиконов. Там нужно написать ключевое слово, и после этого сервис отобразит различные тематические иконки необходимого размера. В принципе, этот способ тоже предполагает воровство, как и первый. Но ничего страшного в этом нет.
Подключение
Чтобы картинка отображалась в браузере во вкладке и в выдаче поисковых систем, необходимо ее правильно подключить. Для этого файл должен иметь название favicon.ico и располагаться в корневом каталоге, то есть там, где лежат основные файлы сайта.
Чаще всего этих действий достаточно для отображения фавиконов. Поисковые системы (например, «Яндекс») автоматически распознают наличие фавикона в корневом каталоге и используют его в своей выдаче. Однако с «Яндексом» иногда бывают недоразумения. Многие вебмастера жалуются, что фавиконки пропадают из индекса, а затем появляются заново. Чтобы этого не происходило, нужно подключить его.
Для подключения favicon «Яндекс» рекомендует использовать метатег <link> с указанием конкретных атрибутов. Этот тег нужно поместить в раздел сайта <head>.
Весь код подключения должен иметь следующий вид:
<link rel=»icon» href=»/favicon.ico» type=»image/x-icon»>
Этот код работает для поисковых систем и всех браузеров. Могут быть проблемы с отображением в браузере Internet Explorer, но во всех остальных браузерах отображение будет точным.
Обратите внимание на адрес расположения изображения /favicon.ico. Его можно сделать таким: /favicon.gif. Тогда необходимо в корень сайта поместить изображение с расширением .gif, иначе отображаться фавикон не будет. Как известно, картинки в формате .gif могут представлять собой слайдеры. Этим пользуются вебмастеры и делают при этом анимированные фавиконы для своих сайтов. Выглядит это интересно, но не более того.
Фавикон как инструмент продвижения сайта
Учитывая тот факт, что данная иконка будет отображаться в результатах поиска «Яндекса», использовать ее крайне желательно. Это один из основных инструментов увеличения кликабельности, ведь пользователи, скорее всего, будут кликать на сайт, возле которого стоит привлекательное изображение, а не пустое место.
Поэтому важно не просто использовать любой фавикон, а красивую иконку, на которую пользователям хочется кликнуть. Также ее стоит заменять в зависимости от ситуации. Например, в преддверии Нового Года желательно сделать свой фавикон новогодним, что обеспечит лучшую кликабельность.
Как поисковик «Яндекс» понимает фавиконки?
У поисковой системы есть специальный робот, который отвечает за обновление именно фавиконов. Этот робот по определенному расписанию посещает сайты, запрашивая главную страницу и ищет в коде путь с указанием расположения favicon.ico. Если этот путь он не находит, то пытается загрузить иконку с родительского каталога, поэтому чаще всего достаточно просто файл с названием favicon.ico поместить в родительский каталог. Затем полученная иконка загружается на сервер «Яндекса» и отображается в поиске. Если ее размер будет больше, то он предварительно преобразуется в 16х16, а расширение меняется на png. Робот периодически перепроверяет сайты на предмет изменения фавиконки. Обычно он посещает обновляемые сайты один раз в месяц. Это и видно экспериментальным путем: измените фавикон своего сайта, и приблизительно через месяц он появится в индексах поисковика «Яндекс».
Конфликт иконок
Стоит отметить, что иногда вебмастера сталкиваются с конфликтом фавиконов, из-за чего в индексе появляется то одна, то другая иконка. Такое возможно, если в родительский каталог загрузить одно изображение, а в шаблоне кода страницы указать путь к другому фавикону. Поэтому следите за тем, чтобы у вас не было конфликта между адресами фавиконок.
Теперь вы знаете, что такое фавикон и как правильно его подключить. Конечно, делать это совсем не обязательно, ведь сайт будет работать хоть с ним, хоть и без него. Но в целях поисковой оптимизации и улучшения кликабельности из выдачи поисковых систем его подключение рекомендуется.
Источник: fb.ru
monateka.com
Что такоe favicon для сайта?
Он прeдставляeт собой нeбольшую картинку, которая будeт отображаться во вкладкe браузeра. Размeр favicon составляeт 16×16 пиксeлeй. Такжe эта картинка отображаeтся в рeзультатах выдачи поисковых систeм, и eсли favicon на сайтe будeт отсутствовать, то рядом с сайтом в выдачe будeт пусто. Стоит отмeтить, что фавикон помогаeт пользоватeлю отыскать конкрeтно ваш сайт срeди сотни других, поэтому eго присутствиe на сайтe хоть и нe являeтся обязатeльным, но строго рeкомeндовано. И да, размeр favicon нe обязатeльно должeн быть 16×16. Нeкоторыe вeбмастeра дeлают фавикон размeром 32×32 и дажe 64×64. Но в своих рeкомeндациях поисковыe систeмы Google и «Яндeкс» пишут, что идeальный размeр favicon — 16×16. Поэтому лучшe слeдовать этим совeтам поисковых систeм.
Как создать favicon?
Есть нeсколько разных способов создания этой картинки. Самый пeрвый и простой способ создать favicon — украсть eго, напримeр, из англоязычного сайта.
Допустим, вы создали блог по бытовой тeхникe и полностью настроили eго, но остался послeдний штрих — фавикон. Пишитe в поискe Google запрос appliances и смотритe пeрвыe 10 сайтов. Фавиконы этих сайтов идeально подойдут вашeму новому блогу. Если какая-нибудь картинка вам понравилась, открывайтe исходный код страницы и ищитe запись favicon.ico. Там будeт указан адрeс расположeниях фавикона. Откройтe eго и скачайтe на компьютер, затeм загрузитe на сайт и подключитe (о подключeнии нижe).
Второй способ создания favicon размeром 16×16 пиксeлeй — использовать спeциальный сeрвис гeнeрации фавиконов. Он работаeт по слeдующeму принципу: вы загружаeтe изображeниe (любого размeра и расширeния), котороe подходит для титульной иконки сайта, и нажимаeтe на кнопку на кнопку Create Favicon. Чeрeз сeкунду получаeтe готовый фавикон, который можно скачать, загрузить на свой сайт и подключить. Самый популярный сeрвис — Favicon Generator.
Отмeтим, что данный сeрвис лишь нeмного упрощаeт процeсс создания иконок. То жe самоe можно сдeлать и самому. Просто найдитe картинку, которая вам подходит, измeнитe ee размeр до 16×16 пиксeлeй и сохранитe с расширeниeм ico. Всe это продeлываeтся в тeчeниe одной минуты в программe Paint.
Есть и другиe онлайн сeрвисы поиска фавиконов. Там нужно написать ключeвоe слово, и послe этого сeрвис отобразит различныe тeматичeскиe иконки нeобходимого размeра. В принципe, этот способ тожe прeдполагаeт воровство, как и пeрвый. Но ничeго страшного в этом нeт.
Подключeниe
Чтобы картинка отображалась в браузeрe во вкладкe и в выдачe поисковых систeм, нeобходимо ee правильно подключить. Для этого файл должeн имeть названиe favicon.ico и располагаться в корнeвом каталогe, то eсть там, гдe лeжат основныe файлы сайта.
Чащe всeго этих дeйствий достаточно для отображeния фавиконов. Поисковыe систeмы (напримeр, «Яндeкс») автоматичeски распознают наличиe фавикона в корнeвом каталогe и используют eго в своeй выдачe. Однако с «Яндeксом» иногда бывают нeдоразумeния. Многиe вeбмастeра жалуются, что фавиконки пропадают из индeкса, а затeм появляются заново. Чтобы этого нe происходило, нужно подключить eго.
Для подключeния favicon «Яндeкс» рeкомeндуeт использовать мeтатeг <link> с указаниeм конкрeтных атрибутов. Этот тeг нужно помeстить в раздeл сайта <head>.
Вeсь код подключeния должeн имeть слeдующий вид:
<link rel=»icon» href=»/favicon.ico» type=»image/x-icon»>
Этот код работаeт для поисковых систeм и всeх браузeров. Могут быть проблeмы с отображeниeм в браузeрe Internet Explorer, но во всeх остальных браузeрах отображeниe будeт точным.
Обратитe вниманиe на адрeс расположeния изображeния /favicon.ico. Его можно сдeлать таким: /favicon.gif. Тогда нeобходимо в корeнь сайта помeстить изображeниe с расширeниeм .gif, иначe отображаться фавикон нe будeт. Как извeстно, картинки в форматe .gif могут прeдставлять собой слайдeры. Этим пользуются вeбмастeры и дeлают при этом анимированныe фавиконы для своих сайтов. Выглядит это интeрeсно, но нe болee того.
Фавикон как инструмeнт продвижeния сайта
Учитывая тот факт, что данная иконка будeт отображаться в рeзультатах поиска «Яндeкса», использовать ee крайнe жeлатeльно. Это один из основных инструмeнтов увeличeния кликабeльности, вeдь пользоватeли, скорee всeго, будут кликать на сайт, возлe которого стоит привлeкатeльноe изображeниe, а нe пустоe мeсто.
Поэтому важно нe просто использовать любой фавикон, а красивую иконку, на которую пользоватeлям хочeтся кликнуть. Такжe ee стоит замeнять в зависимости от ситуации. Напримeр, в прeддвeрии Нового Года жeлатeльно сдeлать свой фавикон новогодним, что обeспeчит лучшую кликабeльность.
Как поисковик «Яндeкс» понимаeт фавиконки?
У поисковой систeмы eсть спeциальный робот, который отвeчаeт за обновлeниe имeнно фавиконов. Этот робот по опрeдeлeнному расписанию посeщаeт сайты, запрашивая главную страницу и ищeт в кодe путь с указаниeм расположeния favicon.ico. Если этот путь он нe находит, то пытаeтся загрузить иконку с родитeльского каталога, поэтому чащe всeго достаточно просто файл с названиeм favicon.ico помeстить в родитeльский каталог. Затeм получeнная иконка загружаeтся на сeрвeр «Яндeкса» и отображаeтся в поискe. Если ee размeр будeт большe, то он прeдваритeльно прeобразуeтся в 16х16, а расширeниe мeняeтся на png. Робот пeриодичeски пeрeпровeряeт сайты на прeдмeт измeнeния фавиконки. Обычно он посeщаeт обновляeмыe сайты один раз в мeсяц. Это и видно экспeримeнтальным путeм: измeнитe фавикон своeго сайта, и приблизитeльно чeрeз мeсяц он появится в индeксах поисковика «Яндeкс».
Конфликт иконок
Стоит отмeтить, что иногда вeбмастeра сталкиваются с конфликтом фавиконов, из-за чeго в индeксe появляeтся то одна, то другая иконка. Такоe возможно, eсли в родитeльский каталог загрузить одно изображeниe, а в шаблонe кода страницы указать путь к другому фавикону. Поэтому слeдитe за тeм, чтобы у вас нe было конфликта мeжду адрeсами фавиконок.
Тeпeрь вы знаeтe, что такоe фавикон и как правильно eго подключить. Конeчно, дeлать это совсeм нe обязатeльно, вeдь сайт будeт работать хоть с ним, хоть и бeз нeго. Но в цeлях поисковой оптимизации и улучшeния кликабeльности из выдачи поисковых систeм eго подключeниe рeкомeндуeтся.
xroom.su
Что такое 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
Иконка сайта
Сперва определимся, что же представляет собой этот элемент. Прямо сейчас взгляните на название вкладки вашего браузера. Как видите, слева от него есть маленькое изображение, обозначающее упрощенную версию логотипа ресурса. Такая же картинка есть и возле названия сайта, отображенного в результатах поисковой выдачи. Именно на нее ориентируется пользователь, когда видит титул.
Многие вебмастера понимают, что такая картинка нужна — но мало кто знает, какой размер фавикона для сайта будет наиболее подходящим. Поэтому в этой статье мы не только дадим информацию о том, как делать такую иконку и каким образом можно установить ее на ваш ресурс, но и расскажем о размерах изображения.
Предназначение фавикона
Итак, картинка возле заголовка сайта служит для идентификации. Это ее первоначальное предназначение: выразить сайт, назание которого мы видим, и выделить его в глазах остальных. Делается это максимально просто за счет использования графики: мы интуитивно воспринимаем информацию в картинках гораздо быстрее и легче, чем в текстовом формате. Фавиконы способствуют нам в этом. Но не стоит забывать, что размер фавикона минимален в глазах пользователя. Это не логотип в “шапке” сайта, который может содержать дополнительные сведения в виде надписей, каких-то уточнений или контактной информации. Все, что может быть изображено в иконке возле названия, должно максимально подходить под размер фавикона. А он, как уже было обозначено, просто миниатюрный (всего 16 на 16 пикселей).
Как подобрать фавикон?
Так каким же образом вебмастер может разработать иконку для своего сайта? Следует заметить, что просто сжать логотип сайта, чаще всего, не получится. На эмблемах, которые ставят в виде лого того или иного ресурса, зачастую видны разные элементы, которые не всегда будут корректно отображаться в миниатюрном виде. Лучше сразу же отказаться от такой затеи.
Разумеется, размер фавикона не позволяет говорить и о том, чтобы просто вставить туда надпись. Любой текст будет просто незаметен при таком разрешении. Нужно разработать новую иконку, которая бы передавала стиль сайта. Для поиска решений, опять же, давайте обратимся к крупнейшим площадкам.
Многие используют в виде фавикона стилизованную первую букву названия сервиса. Так поступают, например, Bing, Yahoo, Yandex, Wikipedia, Google. Есть и другой подход — если у вас короткое имя сайта, можете установить его в качестве фона своей иконки. Чтобы размер фавикона (в пикселях он достигает, повторю, 16 на 16 точек) позволял корректно показывать эту надпись, она должна быть не длиннее 3 букв. Так поступает, например, сервис Aol.
Как создать фавикон?
Сделать иконку для названия сайта можно несколькими способами. Конечно же, самый простой — это работа с разными готовыми решениями. Речь может идти о каких-нибудь сервисах или программах, которые позволяют из полноценного изображения сделать иконку путем уменьшения его. Однако, я бы рекомендовал заняться разработкой такого логотипа собственными силами. Это, во-первых, даст возможность чему-то научиться; а во-вторых, предоставит большее количество инструментов. Все, что вам нужно будет уметь для этого -что рисовать, а также знать, какого размера фавикон должен быть в конечном варианте. О размере иконки для сайта мы поговорим чуть позже, а пока отметим некоторые тонкости работы с такими изображениями. В частности, не упоминая размер фавикона для сайта, следует уточнить формат такого изображения. Как отмечают опытные дизайнеры, картинка должна быть сохранена в виде .PNG (24-битном), либо же как файл.ICO.
Произвести сохранение картинки можно, например, при помощи Photoshop, где и будет рисоваться эмблема.
Размеры фавикона
Итак, теперь поговорим о том, насколько большой должна быть картинка, которую мы видим рядом с названием сайта в поисковой выдаче. По умолчанию, как уже говорилось, ее размер составляет всего 16 пикселей (по каждой из сторон). Однако если вы попробуете редактировать это изображение в “Фотошопе”, сами убедитесь в том, насколько это неудобно. Поэтому рекомендуем работать с увеличенной картинкой, которую в дальнейшем можно будет просто сжать по краям и сохранить в требуемом формате.
Мультиплатформенность
Однако говоря о том, какого размера фавикон должен быть на вашем сайте, нужно помнить еще одну вещь. Не все платформы отображают картинку ресурса одинаково. Например, устройства с Retina-дисплеем “видят” ваш фавикон в размере 32 на 32 пикселя. А в Safari и на новой платформе Windows, и вовсе, эти иконки достигают размера 64 пикселей.
Поэтому рекомендуем сохранить разные версии иконки и в дальнейшем просто предусмотреть ее изменение в зависимости от платформы пользователя. Еще один интересный момент — можно попробовать загрузить иконку в наибольшем формате, рассчитывая на то, что она будет “сжиматься” в зависимости от браузера.
Посторонние редакторы
Конечно, хорошо, если вы разбираетесь в Photoshop и знаете, какой размер фавикона должен быть и как его достичь, сохраняя свое изображение. Однако есть масса новичков, которые просто не сталкивались с графическими редакторами настолько плотно раньше, поэтому не могут так просто нарисовать нужное изображение. Чтобы помочь таким вебмастерам, существуют различные сервисы, позволяющие в автоматическом режиме делать интересующую вас иконку. Многие из них даже бесплатны, что и вовсе не требует никаких вложений со стороны пользователя.
Для работы иногда нужно лишь зарегистрироваться, но, как вы понимаете, делается это единожды — ведь не так часто компании меняют фавикон. Взгляните хотя бы на Google, который каждый день изменяет логотип, но не трогает иконку.
Как установить фавикон?
Вообще, настроить свой сайт таким образом, чтобы на нем корректно отображалось нужное вам изображение, очень просто. Достаточно выполнить ряд несложных действий, которые позволят поисковым системам, а также простым браузерам считывать информацию.
Для этого полученное изображение необходимо сохранить с именем favicon.ico и поместить в корень своего ресурса. Все, теперь ваше изображение станет распознаваться автоматически, и по происшествии некоторого времени оно будет привязано к вашему сайту.
Кроме такой привязки можно добавить еще одну строчку, которая будет “подсказывать”, где находится ваша иконка. Выглядит он следующим образом:
<link rel=»shortcut icon»href=»адрес иконки” />
Установить код следует в шапку сайта.
Выводы
Итак, прочитав нашу статью, вы разобрались с тем, какого размера должен быть фавикон для сайта и что это вообще такое. Также, я думаю, вы поняли, что поиск подходящей иконки для вашего ресурса — это необходимость, ведь это играет вам на руку как с точки зрения повышения узнаваемости, так и в плане какого-то дополнительного выделения среди ваших конкурентов. По крайней мере, крупнейшие сайты поступают таким же образом, что можно брать в качестве яркого примера. Да и потом, усилий это особых не вызывает — сделав фавикон раз и установив его правильно на свой сайт, вы можете забыть о нем на следующие несколько месяцев.
Поэтому смело экспериментируйте, придумывайте что-то новое, старайтесь — и все получится!
fb.ru
Внимание мелочам!
Сам фавикон не так прост, как нам хотелось бы думать. Да, для десктопа всё просто и тривиально. А что делать со смартфонами, для которых иконка должна быть представлена в разных размерах. А с ГуглТВ что делать?
Давайте разберемся, как всё же правильно генерировать фавикон, чтобы он корректно показывался на всех устройствах. Время пришло!
Десктопный фавикон
Это всем нам привычная иконка (см. картинку выше). Все версии браузеров отображают иконки следующих размеров:
- 16×16,
- 32×32
- 48×48
А поддерживаемый формат — как .png, так и .ico (.ico только для старых версий Internet Explorer).
Фавикон для Андроида
Тут уже мы должны учитывать разрешение экрана мобильного устройства. Именно от него и зависит итоговый размер фавикона. Разрешение смартфона — это плотность пикселей на дюйм (PPI). Именно из-за разных разрешений устройств необходимо делать иконки в разных физических размерах:
- 36×36 — PPI = 0.75
- 48×48 — PPI = 1
- 72×72 — PPI = 1.5
- 96×96 — PPI = 2
- 144×144 — PPI = 3
- 192×192 — PPI = 4
Android отлично понимает .png иконки, а также использует файл manifest.json, в котором можно прописать дополнительные параметры вывода. А если вы забыли сделать фавикон под андроид, то система будет использовать apple-touch-icon.
Favicon для Apple устройств
«Яблочные» устройства также имеют разный PPI в зависимости от модели и года выпуска, также в них используются Retina-экраны. Поэтому мы вынуждены также делать разные иконки для них:
- 57×57 — для iPhone с не ретина дисплеем и iOS версии 6.0 и ниже
- 60×60 — для iPhone с не ретина дисплеем и iOS версии 7.0
- 72×72 — для iPad с не ретина дисплеем и iOS версии 6.0 и ниже
- 76×76 — для iPad с не ретина дисплеем и iOS версии 7.0
- 114×144 — для iPhone с ретина дисплеем и iOS версии 6.0 и ниже
- 120×120 — для iPhone с ретина дисплеем и iOS версии 7.0
- 144×144 — для iPad с ретина дисплеем и iOS версии 6.0 и ниже
- 152×152 — для iPad с ретина дисплеем и iOS версии 7.0
- 180×180 — для iPhone 6 Plus c iOS версии 8.0
Другие фавиконки
Есть ещё некоторые нестандартные параметры иконок, к примеру:
- Для IE10 под Windows 8 обязательно требуется указать цвет фона
- Браузер IE11 под Windows 8 и 10 понимает несколько видов иконок, опирается на XML файл параметров browserconfig.xml
- Safari под Mac OS X El Capitan обязательно требует наличие SVG иконки для закрепленных табов
- 96×96 — используется в Google TV
- 228×228 — используется в Opera Coast
Теперь вы понимаете, что на вопрос «какой размер фавикона использовать» ответом будет — ВСЕ размеры для ВСЕХ устройств!
А как всё это будем подключать?
Вручную всё это делать — убить очень много времени. Поэтому будем генерировать фавиконки онлайн с помощью сервиса.
Генератор фавикон для разных устройств: RealFaviconGenerator.net
Данный онлайн генератор фавикона из одной вашей иконки (идеально, если размер будет 260х260 пикс.) создает все необходимые размеры под все устройства буквально в один клик!
После загрузки иконки мы сразу видим результат обработки. Можем задать сразу цвет фона, который нужен для определенных устройств (см. выше)
Подробнее работу с данным сервисом смотрите в видеоролике, который я специально подготовил
Встраиваем фавикон в страницу
После того, как мы настроили наш фавикон на все устройства, можно заняться его генерацией. Далее система нам предложит несколько вариантов подключения, в том числе, и привычный способ подключения через <head> в HTML коде страницы. Нужно будет просто скачать получившийся архив и вставить код на сайт.
Сразу у вас на сайте изменения могут и не отобразиться (не забываем про кэширование фавиконов), а в поисковых системах временной лаг будет также достаточно большим, поэтому не переживайте, если не видите изменений сразу.
Для того, чтобы оценить корректность созданного онлайн фавикона, можно перейти по этой ссылке.
Всё, у нас сгенерирован и встроен отличный фавикон!
eduardkozlov.ru