Сервис с 308 000 иконок (Favicon) для сайта. Фавиконки для сайта


Размер фавикона для сайта

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

Такой мелочью может стать, например, фон кнопки, неправильно подобранный шрифт какого-то небольшого элемента и даже фавикон. И вправду, посмотрите сами- крупные, известные сайты имеют индивидуальную иконку, которая обозначает его в разделе “Закладки” в браузере пользователя. Без нее разработчикам ресурса не удалось бы создать ту композицию, к которой они стремились изначально.

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

Иконка сайта

размер фавикона

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

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

Предназначение фавикона

Итак, картинка возле заголовка сайта служит для идентификации. Это ее первоначальное предназначение: выразить сайт, назание которого мы видим, и выделить его в глазах остальных. Делается это максимально просто за счет использования графики: мы интуитивно воспринимаем информацию в картинках гораздо быстрее и легче, чем в текстовом формате. Фавиконы способствуют нам в этом. Но не стоит забывать, что размер фавикона минимален в глазах пользователя. Это не логотип в “шапке” сайта, который может содержать дополнительные сведения в виде надписей, каких-то уточнений или контактной информации. Все, что может быть изображено в иконке возле названия, должно максимально подходить под размер фавикона. А он, как уже было обозначено, просто миниатюрный (всего 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

Генератор фавиконов для сайтов онлайн, как установить фавикон на сайт?

Что такое Фавикон (Favicon)?

Фавиконом называется индивидуальный значок в виде картинки, который отображается на вкладках браузера перед наименованием сайта:Favicon1

В переводе с иностранного обозначает «иконка для избранного»

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

Фавикон необходим:

  1. Для создания респектабельного вида.
  2. Для возможности выделиться из общей массы пользователей.
  3. Для придания узнаваемого облика своему сервису.
  4. Для преимущественного выбора конкретного сайта. При вводе пользователем поискового запроса, выдается информация в поисковой системе множество результатов. Обычно пользователями выбирается не только первые по рейтингу сайты, но и привлекательные по фавикону.

В каком формате я получу Favicon?

Для сайта используется Фавикон размерами 16х16 пикселей, с расширением ico. Такое расширение обычно используется для хранения «иконок».

Online генераторы и коллекции favicon

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

Для этого применяются специальные онлайн-генераторы. Также можно воспользоваться уже готовой коллекцией Фавикон. Однако, наиболее эффективно и респектабельно будет его самостоятельное создание.

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

Коллекции и галереи Фавикон

На просторах интернета имеется немало ресурсов с расположенными на них коллекциями и галереями Фавиконов, как в бесплатном доступе, так и в платном.

Наиболее распространенные сервисы галерей Фавиконов будут предоставлены ниже:

  1. http://www.thefavicongallery.com/. Сервис небольших размеров, ограниченный выбор, однако тематика разнообразная. Отличается простотой скачивания и дальнейшего использования фавиков. Favicon2
  2. http://www.iconj.com/ . В сервисе присутствуют Фавиконы с анимацией. Неудобством использования сайта является разбитие общего количества картинок на множество страниц, поэтому, чтобы выбрать понравившийся, необходимо потратить достаточно времени для поиска.
  3. http://www.favicon.cc/. Хороший выбор неанимированных Фавиконов. Favicon3
  4. http://www.favicon.co.uk/. Крупный сервис, для скачивания, достаточно нажать на картинку Фавикона и указать адрес скачивания на свое устройство. Favicon4
  5. http://favicon-generator.org/. Небольшой сайт, маленькая коллекция, но присутствует множество тем. Предоставляется возможность не просто воспользоваться готовым Фавиконом, а и самостоятельно создать собственный шедевр.

Favicon5Лучший генератор Фавиконов

Ссылка на генератор: www.xiconeditor.com

При помощи рассматриваемого генератора Фавиконов можно запросто его создать из любого изображения или из фотографии. Для этого необходимо:

  1. Зайти на сайт xiconeditor.com
  2. Произвести выбор шаблона 16х16:Favicon6
  3. Импортировать файл:Favicon7
  4. Нажать на кнопку «загрузить»:Favicon8
  5. Загрузить файл.
  6. Произвести редактирование изображения путем его обрезки. Нажатием кнопки «ОК» подтверждаем согласие с окончанием создания фавикона:Favicon9
  7. Посмотреть на готовый Фавикон путем нажатия кнопки «предварительный просмотр»:

Favicon10

Favicon11

Проблемы с прозрачностью у сервиса генератор фавикон

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

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

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

Я уже смог сделать фавикон онлайн. Что мне с ним дальше делать?

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

Как сделать Фавикон для сайта с нуля?

Преимуществом создания Фавикона с нуля будет являться его высокая уникальность.

Для этого можно воспользоваться:

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

Favicon13

При помощи данного генератора предоставляется возможным пользователю создать свой собственный фавикон, заполнив цветными красками каждый из 256 пикселей. Каждый квадратик на картинке соответствует одному пикселю. Favicon14

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

  • Генератор Amichurin.Appspot.com. С его помощью  можно самостоятельно создавать картинки путем рисования. Из изображения в данном сервисе не удастся создать Фавиконы.Выглядит он следующим образом:
  • Favicon15Генератор Favicon-Generator.org. Он позволяет оформлять различную цветовую гамму фона. Основной принцип работы с ним мало чем отличается от остальных видов генераторов.

Favicon16Favicon из готового изображения

Некоторые генераторы Фавиконов предоставляют возможность создания их из уже готовых изображений. Для этого необходимо:

  1. Загрузить изображение на сервер.
  2. В случае необходимости проведения обрезки картинки, провести ее.
  3. Если в сервисе предусмотрены дополнительные функции в плане оформления дизайна Фавикона, задействовать их по желанию.
  4. Сохранить получившийся Фавикон в формате ico.

Сервис Favicon.ru

При помощи рассматриваемого сервиса предоставляется возможным:

  1. Самостоятельно изготовить Фавикон по подготовленному заранее шаблону.
    • Из готового изображения;
    • Рисуя по пикселем картинку.
  2. Заказать Фавикон у профессионалов. В такой ситуации они помогут создать неповторимый уникальный образ.

Сервис Favicon.cc

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

После обработки картинки, обрезки ее, придания прозрачности, или еще каких – либо ей дополнительных параметров, Фавикон сохраняется в формате ico.

Как добавить favicon на блог WordPress?

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

Шаг второй. Загрузка файла в корневой каталог на сервере. Для этого необходимо:

  1. Открыть корневую карту сайта.
  2. Открыть файл php и вставить туда код:Favicon17
  3. Обновить страницу, при этом не используя кеш.

Не все браузеры сразу показывают изображения Фавикона, в некоторых должно пройти определенное время.

stasmatveev.ru

Создаем favicon для сайта | Вебмастеру

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

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

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

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

Выглядит фавикон в поисковой выдаче так:

Online сервисы и готовые коллекции favicon

Узнав, что такое favicon для сайта и зачем он нужен, необходимо понять то, как же его можно сделать?

Можно воспользоваться несколькими способами:

  • скачать уже готовое мини-изображение из специальной галереи;
  • создать самостоятельно при помощи генератора фавикон;
  • сделать иконку из готового изображения при помощи favicon generator’а.

Скачать уже готовое мини-изображение из специальной галереи можно на следующих сайтах: thefavicongallery.com; iconj.com; favicon.co.uk или favicon-generator.org. На данных ресурсах представлено огромное количество различных иконок, поэтому каждый сможет найти ту, которая подойдет ему больше всего.

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

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

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

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

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

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

На данном ресурсе вы можете создавать множество различных favicon в режиме реального времени.

Это один из многих онлайн-генераторов, который находится в свободном доступе. Существует также множество других. Вот некоторые из них: amichurin.appspot.com; favicon-generator.org/editor. Принцип их работы аналогичен приведенному примеру.

Установка favicon на сайт

Создав мини-иконку, остается только ответить на вопрос о том, как установить favicon на сайт?

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

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

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

www.internet-technologies.ru

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

Всем привет друзья! Тем кто еще меня не знает, меня зовут Владимир Савельев и сегодня я хотел бы поговорить о том, как сделать фавикон для сайта.

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

Кстати, у Вас есть мобильная версия сайта? Как нет?! Быстрее читайте мою подробнейшую статью — Адаптивная верстка!

Что такое favicon?

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

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

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

Какие преимущества дает наличие фавикона?

Первое и самое главное преимущество — это узнаваемость среди других сайтов. Например, если посетитель вашего блога заинтересуется информацией, которая содержится на страницах сайта, и решит добавить его в закладки, чтобы позже зайти на него и более подробно всё прочитать. Пройдет какое-то время, после того, как сайт будет добавлен в закладки.И вот настало долгожданное время, человек надумал опять посетить ваш интернет-ресурс. Однако, если у него много закладок, он может не сразу его отыскать, а то и вовсе не найти среди других. В этом случае favicon.iso будет как нельзя кстати.

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

Давайте разберемся, как сделать фавикон иконку для сайта?

Скачать фавикон можно также на сайте www.favicon.cc. Перейдите по ссылке на сайт. Пролистайте предложенный ТОП фавиконов. Картинка может быть как анимированной, так и обычной. Если нашли что то по душе, скачайте к себе на компьютер. После чего перенесите картинку в корень своего сайта.

На этом сайте, кроме возможности скачать, есть возможность сделать ее самому. Для этого вам потребуется наличие творческих способностей и желание. Но все возможно.В принципе, вы можете задействовать любую картинку, уменьшенную до размера 16×16 или 32×32 пикселей. Главное, чтобы качество изображения не пострадало. После чего ее нужно сохранить в формате PNG или ISO.

Практически все браузеры отображают изображения в этом формате. Единственным, кто не поддерживает формат PNG, являются Internet Explorer, а точнее — старые его версии. Сейчас конечно редко кто из пользователей использует этот браузер, так как по функционалу и быстродействию он намного хуже своих собратьев.

Но если на ваш блог заходят с Internet Explorer, то сохраните изображение в формате ICO. Сделать это можно на этом сайте.Так же есть еще один замечательный сервис позволяющий нарисовать свою уникальную иконку, переходим сюда — www.michurin.netЕсли же, у Вас есть готовая интересная картинка, из которой Вы хотите сделать фавиконку, то этот сервис вам в помощь http://favicon.ru/ru.

Дополнительные On-line сервисы и генераторы:

Специально для Вас я отобрал лучшие коллекции и генераторы фавиконов — рисуйте или скачайте готовые, выбор за вами:

Установка на сайт:

Чтобы установить иконку фавикон необходимо залить ее на хостинг в директорию сайта и прописать следующий мета-тег в head:

<link rel="shortcut icon" href="путь до файла иконки" type="image/x-icon">

Например посмотрите как прописан этот тег у меня:Весь процесс установки довольно простой, я думаю у Вас все получится ;)

ТОП-3 Плагина фавикон для WordPress:

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

  1. Heroic Favicon Generator
  2. All In One Favicon
  3. Custom Favicon

Как видите, ничего сложного в вопросе «Как сделать фавикон» и его установке на сайт — нет! Если у вас возникнут сложности или вопросы по теме поста, то пишите их в комментариях к статье.Я с радостью на них отвечу.

savme.ru

Сервис с 308 000 иконок (Favicon) для сайта

Всем привет !

При создании этого блога, я озадачился такими мелочами как логотип сайта и фавикон (картинка в вкладке браузера). Как говориться вся жизнь в мелочах, итак мне пришлось рисовать фавикон ручками, а логотип сделал уже другим способом. Ну начнём с того, что с фотошопом я не очень дружу, а иногда очень надо вот и приходится потихоньку учиться. Недавно в инете нашёл очень полезные и интересный сервис с коллекцией Favicon (иконок) - Findicons.com.

Кто не знает вот где отображается favicon 

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

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

  • Обзор - тут публикуются наборы иконок, их авторы, и что само главное картинки одного стиля.

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

Как скачать понравившуюся картинку ?

Для начала нам надо выбрать картинку, щёлкаем на неё, выбираем расширение (ico icns png) там же есть вкладка другие размеры в которой можно выбрать удовлетворяющий вам размер. Далее нажимаем скачать PNG или Ico смотря, что вам нужно, после этого пойдёт загрузка картинки. Где расположены кнопки Скачать в правом столбце есть кнопка преобразовать, в нужный формат.

Ну впрочем и всё

P.S читайте статью про создание логотипа без знаний Photoshop. Также смотрите видео про парня, отлично владеющим своим телом.

cms-all.ru

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

Формат ICO и другие графические форматы иконок. Установка фавикон на сайт с поддержкой для iOS, Android и др. устройств, а также новинок HTML5. Пошаговая инструкция, от простого к сложному, доступно и наглядно, для начинающих веб-мастеров.

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

Наверное, вы уже что-то слышали о формате ICO и иконке для сайта favicon, но ничто не стоит на месте и постоянно появляется что-то новое. Эту статью я решил написать, чтобы не только обобщить известные всем вещи, но и дополнить их новинками.

Так вы узнаете о некоторых секретах формата ICO, проблемах с Internet Explorer и их устранении, о новых графических форматах favicon (прозрачных и анимированных), стандартах HTML5 и иконках для мобильных устройств под iOS и Android, а также многое другое.

Содержание:

  • Формат ICO
  • Файл favicon.ico
  • image/vnd.microsoft.icon vs image/x-icon?
  • BugFix для Internet Explorer
  • Другие графические форматы фавикон
  • Фавикон в HTML5
  • Favicon.ico для мобильных браузеров
    • Фавикон для Apple
    • Фавикон для Android
  • Адрес файла favicon.ico
  • Как установить фавикон иконку на сайт?

Формат ICO

А начну я с того, что формат ICO (Windows icon) был разработан компанией Microsoft для значков файлов. Он аналогичен формату CUR (Windows cursors) и наиболее близок к BMP. Отличие лишь в заголовках, а также наличии маски, что и позволяет создавать прозрачность в рисунках. Однако альфа-канал (полупрозрачность) для 32-битных значков появился лишь в Windows XP.

Файл favicon.ico

Идея с файлом favicon.ico (картинкой 16х16 пикселей) тоже принадлежит Microsoft, которую они реализовали для закладок в Internet Explorer 5. Отсюда и название fav – сокращённо от favorite – избранное, а icon – значок. На данный момент этот формат поддерживается всеми популярными браузерами, но главное в деталях. Условно обобщённый вариант установки фавикон на сайт имеет следующий вид:

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

Обратите внимание на то, что в приведённом примере используется два отношения: shortcut (с англ. ярлык) и icon (с англ. иконка). Фишка в том, что shortcat здесь является излишним, и был оставлен лишь для старых версий Internet Explorer, но он должен идти перед icon.

image/vnd.microsoft.icon vs image/x-icon?

Интересно и то, что в 2003 году формат ICO был зарегистрирован Саймоном Батчером (Simon Butcher) в IANA и его MIME-типом стал image/vnd.microsoft.icon. Проблема в том, что старые версии Internet Explorer не могут корректно интерпретировать его, так что лучше использовать старый image/x-icon.

BugFix для Internet Explorer

Не забываем и о том, что для Internet Explorer можно использовать HTML-костыли основанные на комментариях, например:

<!--[if IE]><link rel="shortcut icon" href="http://sitename.ru/favicon.ico" /><![endif]-->

Другие графические форматы фавикон

Впрочем, сейчас активно стала набирать обороты интеграция и других графических форматов: PNG, GIF, JPEG, APNG и SVG. Лучше всего дело обстоит со статическими форматами PNG и GIF, их поддерживают все новые версии популярных браузеров. Анимированный APNG работает только в Firefox (начиная с версии 3.0) и Opera (начиная с версии 9.5), а вот анимированный GIF не понимают лишь IE и Safari. JPEG не поддерживает только Internet Explorer.

Приведу несколько корректных примеров вставки favicon в соответствующих форматах на сайт:

<link rel="icon" type="image/png" href="http://sitename.ru/favicon.png" /><link rel="icon" type="image/gif" href="/favicon.gif" /><link rel="icon" type="image/jpeg" href="/favicon.gif" /><link rel="icon" type="video/png" href="/animated.png" /><link rel="icon" type="image/svg+xml" href="/favicon.svg" />

Обращаю внимание на то, что для APNG использует MIME-тип video/png, а для GIF (даже анимированного) – image/gif. Также интересен здесь и MIME-тип для SVG формата, это image/svg+xml.

Фавикон в HTML5

Теперь, что касается формата favicon в HTML5, подробней читайте тут. Интересным здесь является атрибут sizes, который задаёт размер иконок для визуально отображения в формате:

{ширина1}x{высота1} [{ширинаN}x{высотаN}] | any

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

<link rel=icon href=favicon.png type="image/png"><link rel=icon href=windows.ico type="image/vnd.microsoft.icon"><link rel=icon href=mac.icns><link rel=icon href=iphone.png type="image/png"><link rel=icon href=gnome.svg type="image/svg+xml">

Favicon.ico для мобильных браузеров

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

Фавикон для Apple

Например, для Safari на iOS рекомендуется следующий набор отношений:

<link rel="apple-touch-icon" href="/2014/05/ipad-retina.png" /><link rel="apple-touch-icon" href="/2014/05/iphone-retina.png" /><link rel="apple-touch-icon" href="/2014/05/ipad.png" /><link rel="apple-touch-icon" href="/2014/05/iphone.png" />

Если атрибут sizes не указан, используется значение по умолчанию 57x57.

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

  • apple-touch-icon-57×57.png
  • apple-touch-icon-72×72.png
  • apple-touch-icon-114×114.png
  • apple-touch-icon-144×144.png

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

<link rel="apple-touch-icon-precomposed" href="/2014/05/ipad-retina.png" /><link rel="apple-touch-icon-precomposed" href="/2014/05/iphone-retina.png" /><link rel="apple-touch-icon-precomposed" href="/2014/05/ipad.png" /><link rel="apple-touch-icon-precomposed" href="/2014/05/iphone.png" />

Здесь тоже имеется набор автоматически распознаваемых имён:

  • apple-touch-icon-57×57-precomposed.png
  • apple-touch-icon-72×72-precomposed.png
  • apple-touch-icon-114×114-precomposed.png
  • apple-touch-icon-144×144-precomposed.png

Фавикон для Android

Браузеры на базе Android унаследовали формат Apple. По сути, будет достаточно указать, что-то вроде следующего:

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

Адрес файла favicon.ico

Наверное, Вы обратили внимание на то, что в некоторых примерах используется относительный, а не абсолютный путь к фавикон? Это не случайно, т.к. помимо HTTP сейчас набирает обороты HTTPS. Для избежания проблем, в абсолютном адресе, проще не указывать протокол, например:

<link rel="icon" type="image/png" href="/favicon.png" />

или использовать относительный путь.

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

Ну, а теперь попробуем сформировать обобщённый вариант вставки фавикон сайт, у меня он получился таким:

<!--[if IE]><link rel="shortcut icon" href="http://sitename.ru/favicon.ico" /><![endif]--><link rel="icon" type="image/png" href="/favicon.png" /><link rel="icon" type="image/gif" href="/favicon.gif" /><link rel="apple-touch-icon" href="/apple-touch-icon-57×57.png" /><link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57×57-precomposed.png"/>

Попробую внести ясность в предложенную конструкцию. В начале идёт фавикон для Internet Explorer, который среагирует на shortcut. Далее оптимальным будет статичная PNG иконка с прозрачностью, а анимацию иконки я отдал GIF формату. Для мобильных устройств создадим иконки стандартного размера 57x57 пикселей, одну без эффектов, а другую со своими эффектами (precomposed – отключит эффекты браузера). Для того чтобы избежать проблем с HTTP и HTTPS я указал относительный путь, начиная от корня сайта (/ – в начале адреса), но для IE, наверное, лучше будет использовать абсолютный путь.

На этом у меня всё. Надеюсь, что статья была Вам полезна. Если сможете внести какие-то правки, дополнения, уточнения и т.д. – пишите. Спасибо за внимание. Удачи!

Короткая ссылка: http://goo.gl/LVkHdk

www.chuvyr.ru