Что такое фавикон и зачем он нужен? Фавикон — что это такое и как его сделать Обзор онлайн-генераторов, где найти коллекцию фавиконов
Бесплатный генератор фавикона и советы: как подобрать фавикон, какие размеры нужны и как установить фавикон на сайт.
Что такое фавикон
Favicon (сокр. от англ. FAVorites ICON - «значок для избранного») - значок сайта или страницы. Отображается браузером в адресной строке перед , а также в качестве картинки рядом с закладкой, в табах и в других элементах интерфейса. Лучше всего смотрится изображение, которое можно вписать в квадрат. Стандартные размеры - 16x16, 32x32, для некоторых браузеров и ОС нужны размеры 60x60, 120x120, 192x192.
Обычно используют формат ICO, но еще доступны PNG, GIF, JPEG, SVG. Файл формата ICO содержит несколько версий фавикона , некоторые браузеры могут выбрать не ту версию и использовать значок более низкого разрешения, поэтому некоторые веб-мастера советуют PNG.
В России фавиконы в выдаче поддерживает Яндекс:
Сайты с фавиконами в выдаче Яндекса
В российских результатах поиска Google фавиконов пока нет. В прошлом году
в выдаче для пользователей из Великобритании, это заметил оптимизатор Рик Родригес и выложил скриншот в свой Твиттер:
Выдача Google в Великобритании
Хотя в результатах иностранного поисковика фавиконов нет, они все равно отображаются на вкладках браузера и в закладках.
Сайты с фавиконами на вкладках и на панели закладок
Зачем нужен фавикон
Иногда на форумах новички спрашивают, дает ли использование favicon.ico бонусы при раскрутке. Использование фавикона не влияет на оптимизацию кода сайта, поисковики не ставят сайты с фавиконом выше в выдаче и не понижают позиции за его отсутствие. Тем не менее, у фавикона есть другие плюсы.
Разберем, для чего нужен файл favicon.ico и можно ли без него обойтись.
- Выделяет сайт в выдаче
Favicon
привлекает внимание к сайту. Без иконки сниппет меньше заметен взгляду, кажется, что ему чего-то не хватает.
Сайт без фавикона в выдаче среди прочих
- С фавиконом сайт запоминается лучше
Иконка для сайта - элемент бренда. Пользователь лучше запомнит логотип из фавикона и свяжет его с брендом, если будет видеть его на сайте и других площадках.
Логотип компании в фавиконе
- Упрощает поиск нужного сайта
В закладках и истории проще искать нужный сайт не по тексту заголовка, а по опознавательной картинке - знакомому фавикону.
Закладки в Google Chrome
- Избавляет от ошибки в лог-файлах
Браузеры запрашивают файл favicon.ico и если не находят строку с указанием фавикона, сервер отмечает в логах .
К примеру, такую:
Failed to load resource: net::ERR_EMPTY_RESPONSE (20:00:55:963 | error, network) at http://localhost:8383/favicon.ico
Фавикон из картинки: какую выбрать
- Тематическую
Если сайт представляет компанию, в фавикон лучше поставить логотип бренда или его фрагмент, если логотип сложный, детализированный или вытянутый. Если логотипа нет, подберите изображение и цветовую гамму по ассоциации с тематикой сайта.
Фавикон с чашкой для сайта о кофе выглядит гармоничнее
- Контрастную
Раньше любая иконка бросалась в глаза, потому что не все сайты их ставили. Сейчас выделиться сложнее, по запросу «как варить кофе» сайт без фавикона нашелся только на восьмой странице. Привлечь внимание лучше яркой контрастной иконкой, иногда для этого ставят стрелку, указывающую на сайт.
- Упрощенную
Фавикон в выдаче, на вкладках браузера и в закладках очень маленького размера, детализированное изображение никто не разглядит. Подберите картинку, где будет минимум деталей, два-три цвета, однозначное прочтение смысла.
- Оригинальную
Фавикон не будет выделять сайт в выдаче, если у конкурентов будут такие же картинки. Банальные популярные иконки лучше не использовать.
Как создать favicon для сайта
Есть три самых распространенных способа:
- Специальный плагин для Photoshop
Позволяет работать этому популярному редактору изображений с форматом ico. - Специальные программы для изготовления фавиконов
Они специально «заточены» для изготовления иконок для сайта. - Онлайн генератор favicon
Самый простой и доступный способ - загрузить картинку в генератор, который сделает иконку для сайта из любого изображения. Иконка получится красивее, если изображение-донор кадрировать до квадрата.
RealFaviconGenerator сделает фавиконы для разных платформ и браузеров. Если вам достаточно одного значка, отконвертирует изображение в файл ICO 16х16.
Панель бесплатного генератора фавикона
Как установить фавикон на сайт
... ...
Атрибут "rel" указывает на тип ресурса. Большинство браузеров распознают "icon", для Internet Explorer нужен "shortcut icon".
От формата файла зависит тип передаваемых данных. Для ICO это "image/x-icon" или "image/vnd.microsoft.icon", для PNG - "image/png" и аналогично для других форматов.
Для мобильных устройств часто прописывают отдельные фавиконы, указывая, к примеру, rel="apple-touch-icon".
Прямое указание на файл нужно не всем браузерам, но лучше его сделать, чтобы значок точно появился на месте фавикона. Разным страницам сайта можно указать разные фавиконки, к примеру, веб-мастер может установить разные цвета одной иконки для блога, каталога и форума.
Фавиконка не появится сразу после установки кода, нужно дождаться, пока поисковик ее проиндексирует.
Размер фавикона для браузеров и устройств
С технической точки зрения быстрее и проще сделать одну иконку ICO, PNG или SVG для всех устройств. С точки зрения юзабилити лучше сделать несколько для разных устройств и браузеров, потому что они могут отличаться внешне - где-то требуется больший размер, где-то достаточно небольшого файла.
Если это возможно, ориентируйтесь на каждую платформу, с которой пользователи могут открыть сайт.
Популярные десктопные браузеры
Стандартно для фавикона делают файл favicon.ico , он поддерживается всеми браузерами, но можно выбрать и другой формат. Обычно рекомендуют установить несколько размеров фавикона для разных случаев: 16x16, 32x32 и 48x48.
Пример кода:
Фавикон в HTML5
В HTML5 с помощью расширенного описания можно указать размеры и формат иконки. Для файла ICO, в котором несколько фавиконов, можно указать размеры в атрибуте sizes через пробел. Для фавикона в векторе укажите размер "any".
Пример кода:
Android
Указать фавикон и его расположение для Android можно через спецификацию The Web App Manifest . В ней описан простой JSON-файл, в котором веб-мастера указывают иконки, размеры и форматы для сайта или приложения. Его поддерживают Chrome, Opera, Samsung Internet и Firefox.
Манифест указывают с помощью:
Пример кода:
{ "name": "My App", "icons": [{ "src": "64.png", "sizes": "64x64" }, { "src": "192.png", "sizes": "192x192" }], "display": "fullscreen", "orientation": "landscape", "theme_color": "tomato", "background_color": "cornflowerblue" }
Apple
Для iOS рекомендуют делать иконку PNG размером 180x180. В документации Safari такие называются Web Clips , в них не должно быть прозрачности, углы автоматически округлятся при добавлении на главный экран. Это значок высокого расширения, он будет отображаться и в других браузерах.
Пример кода:
Apple поддерживает и другой формат иконок. Для закрепленных вкладок в Safari и кнопок на Touch Bar в MacBook есть возможность указать монохромную векторную маску и цвет, который ее заполнит при наведении.
Настраивают с помощью.
Пример кода:
Edge и IE 12
Цвет файла и фона для иконки можно указать с помощью метаданных в HTML.
Пример кода:
У Microsoft есть «Browser configuration schema reference» - XML-документ, в котором перечислены различные значки, соответствующие интерфейсу. Файлы конфигурации браузера позволяют задавать настройки с помощью внешних XML-файлов.
Пример кода:
Зачастую для сайта хватит фавикона одного или трех размеров, чтобы они выглядели нормально. Но лучше уделить немного времени и отдельно прописать файлы для разных ОС и браузеров, чтобы фавикон выглядел качественно на любом устройстве в выдаче поисковика, на вкладке, панели закладок и на экране смартфона.
Фавикон от английского слова “favorite icon” и означает иконка для сайта, которая отображается в браузере. Если вы обратите внимание на свой браузер, то все страницы, которые вы открываете имеют свои иконки. Возможно вы никогда их не замечали или не задумывались о роли, которую они исполняют. Мы расскажем, для чего нужен фавикон и где его настроить в вашем сайте на Водпресс.
Что такое фавикон?
Фавикон – это изображение 16х16 пикселей, во вкладке браузера рядом с кратким описанием сайта, она находится в корне сайта. В закладках браузера фавикон отображается рядом с названием сайта, также используется как иконка для приложения.
В качестве фавикона чаще всего используют лого компании, также это может быть изображение связанное с брендом или соответствующее тематике сайта. Установленный фавикон не стоит часто менять, так как пользователи запоминают как выглядит ваша иконка в браузере и ассоциируют с брендом. Изображение помогает быстро найти нужную вкладку в браузере.
Почему важно использовать фавикон?
Фавикон – это элемент маркетинга связанный с вами, созданный для пользователей. Добавление его на сайт помогает пользователям идентифицировать ваш сайт среди других ранее открытых в браузере.
Также фавикон напоминает о том, что вы были на сайте и помогает быстро найти сайт среди других. Также оригинальный фавикон поможет отличить ваш сайт от конкурентов и показать ваш уровень компетенции.
Как создать фавикон?
Для создания фавикона выберите подходящее изображение. Выбирайте картинку с учетом специфики вашего сайта, например, лого компании или продукт. Совет: не используете слишком детализированные изображение, если ваш логотип длинный, лучше использовать его упрощенную (квадратную версию), убедитесь, что картинка будет ассоциироваться у клиентов с вашим сайтом.
Создание или изменение фавикона
Для создание фавикона нужно подготовить изображение размером примерно 512х512 пикселей. Изображение можно будет обрезать с помощью WordPress. Советуем отредактировать изображения, если требуется прежде чем загружать на сайт.
Если вы хотите создать изображение с нуля или внести изменение, то стоит пользоваться программами Photoshop, Illustrator, Gimp, Inkskape или их онлайн аналогами т.д. Для онлайн генерации фавикона есть много удобных ресурсов, например, Canva, которая дает возможность изменять размеры, цвета, прозрачность изображения.
Когда вы создадите изображение, которое вам будет по вкусу, его нужно сохранить в gif, png или jpeg для загрузки на сайт.
Как добавить фавикон для WordPress сайта?
Для добавления или изменения фавикона не нужно иметь специальных знаний или быть разработчиком, начиная с WordPress 4.3, добавление фавикона стало простым.
Войдите в админку WordPress, в меню кликните на пункт Внешний вид>Настроить
Откроется страница редактирования главной страницы вашего сайта.
Выберите вкладку Свойства сайта, в которой можно поменять “Краткое описание” и “Иконку сайта”.
С помощью стандартного загрузчика изображений выберите необходимую картинку и загрузите ее на ваш хостинг для Вордпресс. Нажмите выбрать и редактор Вордпресс предложит вам обрезать изображение. Подгоните картинку под нужный размер, нажмите Обрезать изображение и посмотрите, как изображение будет выглядеть к ак будет отображаться выбранное вами изображение, если вам не понравилось изображение, кликните изменить и выберите новую иконку для сайта. Чтоб изменения вступили в действие нажмите опубликовать.
Другие способы измениея фавикона для сайта созданного с помощью CMS WordPress
Установка плагина
Многие пользователи предпочитают использовать плагин для изменения иконки. Одним из плагинов является Favicon by RealFaviconGenerator. Установить его нужно из админ панели WordPress
Преимуществом данного плагина является предварительный просмотр того как иконка будет отображаться на разных устройствах и операционных системах.
Вставка кода
Если у вас есть опыт в работе с кодом, то вы можете загрузить фавикон в корневую директорию сайта. Далее нужно внести изменения в код хедера вашего сайта header.php файл. Более детально об данном способе можете почитать в документации по WordPress.
Подытожим. Добавить фавикон достаточно просто как для новичка так и для опытного пользователя. А использование иконки даст возможность легко найти ваш сайт среди других.
Напоминаем, что быстрый SSD хостинг для WordPress доступен на нашем сайте.
Ощутите все преимущества быстрой работы и установку CMS в пару кликов.
Перевод с сайта wpexplorer.com
1467 раз(а) 8 Сегодня просмотрено раз(а)
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Favicon для сайта – это небольшой значок (фавиконка), соответствующий тематике ресурса и повышающий его узнаваемость.
Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA
Что такое фавикон и зачем он нужен
Примерами фавиконов для веб-ресурсов могут служить логотипы автомобильных брендов, размещаемые на капоте авто: у Шевроле – галстук-бабочка, у Шкоды – индеец со стрелой, у Ауди – четыре кольца, у Фольца – сплетение букв V и W и т.д.
Favicon отображается в поисковой выдаче Яндекса, на странице закладок и привязывается к веб-ресурсу при выборе, если пользователь добавляет веб-страницу в «Избранное».
Пользователи сети активнее реагируют на картинку, чем на текст. Кроме того, данный значок повышает узнаваемость вашего веб-ресурса, создаёт дополнительное удобство для ваших посетителей и привлекает дополнительное внимание.
Как сделать Favicon
Фавикон – обычный графический файл. Сделать его можно несколькими способами.
- Создать самостоятельно в графическом редакторе.
- Нарисовать при помощи интернет-сервисов типа favicon, а затем скачать.
- Взять готовое изображение и также воспользоваться сервисом в интернете, который при загрузке начальной картинки преобразует ее в фавиконку.
- Скачать готовый favicon из банка графических иконок, которых в интернете очень много.
Но скачать или создать фавикон – это только первый шаг. Его необходимо установить на ваш сайт. Расскажем, как это сделать.
Загрузите файл на ваш веб-сайт, желательно, в его корневую папку. Как правило, браузерам теперь не нужно на него указывать, если файл имеет стандартное название и находится в корне. Но все же для явного указания на фавикон пропишите всайта следующие строки:
Для IE указываем shortcut icon (с конкретным примером для иконки PNG):
При этом можно указать 2 разных изображения: одно для IE, другое - для остальных веб-браузеров.
Не забывайте про отображение фавикона для мобильных устройств. В
следует указать , при этом изображение должно иметь размер 60х60 или 120х120.Яндекс отображает иконку веб-ресурса после того, как она попадет в его индекс. Специальный робот обходит сайты примерно 1 раз в месяц и обновляет свою базу.
Для изменения старого favicon на новый следует просто закачать новую иконку с таким же названием на место старого изображения и дождаться ее переиндексации.
Правильный Favicon – какой он
Фавиконка – это визитная карточка, она не должна контрастировать со стилем и тематикой веб-ресурса. Если ваш сайт про автомобили, то стиральная машинка на фавиконе будет выглядеть странно.
- Иконка должна легко восприниматься. Не стоит рисовать на ней полную картину: достаточно 1-2 схематичных изображения.
- Она должна быть заметной, привлекающей внимание. Картинка не должна теряться на белом фоне поисковой выдачи и должна бросаться в глаза.
- Фавиконка должна быть запоминающейся, поэтому используйте простые образы, но не похожие на другие. Иначе вас могут спутать. Многие запомнив вашу иконку, увидев ее снова в выдаче захотят перейти к вам, как к старому знакомому, который однажды уже помог.К примеру, социальная сеть Одноклассники имеет favicon с оранжевыми буквами ОК. Цвет указывает на стилевое решение веб-ресурса, а буквы расшифровываются как две аббревиатуры: сокращенное название веб-ресурса и принятое во всем мире «Окей».
Фавикон (в переводе с английского FAVorite ICON - «значок для избранного») - миниатюрное изображение, выполненное в формате ico. Он виден как в поисковой выдачи, так и при открытии самого сайта, а именно: в верхней части браузера (смотрите на картинку). Favicon является миниатюрным изображением, которое относится к числу основополагающих составляющих любого интернет-ресурса. Если в 2006 году сайты в большинстве своем работали без прикрепленных фавиконов, то сегодняшние веб-сайты невозможно представить без них. Конечно, остались проекты, запущенные без favicon, но в 2017 году это единичные случаи, найти которые очень сложно, так как сами поисковики в 95% случая не пропускают их в свой ТОП по высокочастотным запросам.
Предназначение favicon:
Основным предназначением favicon.ico является привлечение внимания интернет-пользователя к сайту. Благодаря использованию фавиконов отдельно взятым интернет-проектам удается выделиться из общего перечня проектов, что в какой-то степени положительно сказывается на их рентабельность в массах.
Где демонстрируется favicon (фавикон):
- В поисковой выдачи - когда пользователь вводит в поиске поисковой системы какой-либо запрос, он в 90% случаях видит как названия страниц сайтов, так и их индивидуальные favicon.
- В верхней части браузера - переходя на какую-либо страницу сайта, в верхней части браузера, пользователь всегда наблюдает картинку, под которой подразумевается favicon. Именно она в какой-то степени позволяет не ошибиться с веб-ресурсом при большом скопе открытых в браузере вкладок.
- В закладках/истории браузера - современные версии браузеров демонстрируют в своей истории и закладках не только названия сайтов и их страниц, но и favicon.
- На экране приложений в смартфоне - favicon отображаются не только в браузере и поисковой выдачи, но и на экранах смартфонов. Так если, при сохранении сайта в качестве приложения в своем смартфоне (что сегодня является нормой), пользователь вместе с его названием будет видеть favicon. Это в свою очередь облегчает сортировку интересных сайтов.
- На внутреннем домашнем столе компьютера - когда пользователь сохраняет сайт на рабочем столе, он создает иконку, представляющую собой какое-либо изображение, под которым подразумевается favicon.
Из всего вышеперечисленного можно сказать одно, фавикон является важной составляющей любого интернет-проекта, а также мобильного и компьютерного приложения. Он представляет собой ту основу, которая выделяет оригинальность и уникальность сайта, приложения, ресурса.
Размер фавикона
Favicon - миниатюрная иконка, которая имеет квадратную форму. Ее размер в большинстве своем равен 8х8, 16х16, 32х32, 64х64 и 128х128 пикселей. Именно поэтому возникает сложность при перекодировании объемных картинок в формат ico, ведь подчас в такого рода изображениях присутствует более 1280 пикселей, что сильно портит внешний вид конечной ico картинки, превращая ее в квадрат со всевозможными красками.
Где взять favicon?
Фавикон можно как скачать из интернета, так и создать самостоятельно, в том числе заказав его разработку у специалиста:
- Скачанный из интернета favicon. Основным преимуществом является то, что такой фавикон полностью бесплатен. Вторым же достоинством стоит считать то, что в качестве такого фавикона может выступать любое изображение, главное правило: перекодировать его в формат ico. Но бесплатность не несет в себе ничего хорошего, все скаченные из интернета фавиконы являются собственностью их авторов, и в 99% случаях они присутствуют на других сайтах, что лишает их какой-либо уникальности. Например, в Европе и Соединенных Штатах Америки нередки случаи, когда владельцев сайтов привлекали к уголовной ответственности за кражу favicon (нарушение авторских прав).
- Созданный самостоятельно favicon. Создать фавикон самостоятельно сегодня может даже школьник. Для этого потребуется лишь воспользоваться возможностями, которые предоставляются специально разработанными для этих целей онлайн-генераторами иконок (icon) в формате ico. Основным преимуществом данного метода является то, что в качестве favicon может выступать логотип компании/фирмы/организации, перекодированный с помощью генератора фавиконов в формат ico.
- Заказанный у специалиста favicon. Разумеется, фрилансеры и компании, ориентирующиеся на создании фавиконов используют доступные в открытом доступе всем пользователям интернета российские и иностранные генераторы и редакторы изображений в формате ico. Хотя при этом, профессиональный фавикон всегда будет стоять выше того, который пользователь сможет создать самостоятельно.
Генераторы фавиконов:
- https://www.favicon.cc - один из самых первых онлайн-генераторов фавиконов, используя его пользователь сможет не только перекодировать картинку из классических изобразительных форматов в ico (например, логотип своей компании), но и создать свою иконку, которая хорошо будет выглядеть как при поисковой выдачи в Яндексе и Google, так и адресной панели браузера.
- https://www.favicongenerator.com - минималистический сервис, облегчающий генерацию фавиконов и упрощающий процесс редактирования изображений в формате JPG в ico. Результат моментально демонстрирует в специально отведенном окошке.
- https://www.genfavicon.com - этот сервис достаточно прост в понимании, так как создание фавикон проходит в три этапа, а именно: выбор файла в формате JPEG, GIF, PNG на компьютере; выбор конечного размера изображения и повсеместное его перекодирование в формат ico. Учтите, что изображение должно иметь квадратную основу.
Генераторы фавиконов с нуля:
- https://antifavicon.com
- https://favicon-generator.org
- https://favicon.ru
- https://www.favicon.cc
- https://www.degraeve.com/favicon
Коллекции фавиконов:
- https://www.iconj.com/gallery.php - коллекция фавиконов, насчитывающая свыше 10000 иконок.
- https://www.audit4web.ru/info/favicon/ - коллекция с фавиконами для сайта, в базе которой хранится более 20000 изображений в формате icon (ico).
- https://www.favicon.cc/?action=icon_list&order_by_rating=1 - генератор фавиконов и галерея анимированных и статичных иконок
- https://www.favicon.co.uk/gallery.php - генератор фавиконов для сайта и блога, а также каталог статичных и анимированных картинок.
- https://thefavicongallery.com - многообещающая веб-коллекция изображений в формате ico, доступных для бесплатного скачивания.
- https://findicons.com - самый масштабный сток на просторах российского и иностранного интернета с изображениями в формате icon (ico).
Как разместить фавикон на сайте?
Для размещения Вам потребуется лишь доступ к серверу. Формат фавикон: ICO (рекомендуемый), GIF, JPEG, PNG, BMP.
1. Разместите favicon в корневую папку сайта.
2. Добавьте в HTML-код главной страницы сайта, в элемент, ссылку на размещенный файл.
... ...
Метки: Фавикон, FAVorite ICON
Привет, друзья! Сегодня у нас на очереди фавикон. Слово новое, непонятное, неудобное.. Но, все просто. Мы уже давно видели эти фавиконы. Просто не знали, что это они и есть 🙂 . Так у нас бывает, что самые простые вещи всегда называют умно и непонятно. А на самом деле «фавикон» состоит из слова испанского «фаворит» и слова греческого «икона»(изображение). В переводе на русский язык, «любимое изображение» 🙂 . Мы узнаем что это. И зачем оно нужно.
И вот теперь мы улыбнемся, затем посмотрим на рисунок.
Вот эти значки слева от названия сайта или (его отдельной рубрики) и есть наше «любимое изображение». Так «фавики» выглядит в закладках Вашего браузера. Эти значки вы видели уже много раз. Всегда находили с их помощью нужное в панели закладок. Потому что сейчас наличие фавиконов — это общепринятая вещь.
Нельзя сказать, что «любимое изображение» после его установки на сайт сразу привлечет к Вам кучу посетителей. Нет, это просто приятный элемент стиля, хорошего тона. Он делает Вашу страничку более индивидуальной и узнаваемой.
Вашему читателю эта иконка действует на подсознание, он Вас по ней сразу узнаёт. Поэтому, сегодня и я создам себе какой-нибудь фавикон и помещу его на эту страничку. А заодно расскажу об этом Вам. Итак, начинаем. Для начала определимся, от чего мы будем отталкиваться. Создание чего-либо, это творческий процесс. Как сделано у других? Обратим внимание опять на наших флагманов:
В этом примере мы видим, что на маленьких (32х 32 пикселей) значках (как правило квадратных), на ярком фоне бросаются в глаза стилизованные изображения букв, которые происходят от названия сайтов («ок» — наши Одноклассники, «вк»- наш Вконтакте, а буква «f» это — иностранец Фейсбук (опять же по русски «книжная морда»)… Ничего не поделаешь, могучий русский язык плюс природный русский юмор..
Делают фавиконы еще из фотографий. Из кадра любимого мультика. Или кадра кинофильма.А так же анимированные, где картинки движутся. Для творчества нет границ. Выбирайте, творите, пробуйте.
Как сделать фавикон для сайта в фотошопе?
Если Вы — яркая индивидуальность, то рекомендую начать с фотошопа. Можно сделать такой фавикон, которого нет ни у кого и еще при этом самовыразиться 😛 . Причем его можно сделать опять же полностью с нуля. Бесплатно. Другой вариант — можно скачать картинку (тот же фавикон) и переделать его под себя. Но, нужен фотошоп или другой редактор попроще, которым можно обрезать и уменьшать изображения.
Быть экспертом в фотошопе для создания маленького фавикона не требуется. Больше времени уходит на поиск или «придумывание» подходящего «любимого изображения». Давайте попробуем первый вариант, создать с нуля. Я не эксперт фотошопа, поэтому действия мои крайне просты, для новичков. Открываем фотошоп, вверху слева меню файл,:
Укажем имя файла, размеры одинаковые, этот вариант фавикона будет квадратный, и содержать только буквы из названия сайта, на каком нибудь ярком фоне. Нажимаем ОК.
Вот что выбрал я, и как это выглядело после печати того, как я набрал «текст»:
Нам теперь надо выровнять текст по центру:
Получилось как то так. Правда, поле случайно стало прямоугольным вместо квадратного.
Теперь немного стилизуем наше изображение. Есть волшебная кнопочка сверху на панели инструментов в виде изогнутой буквы «Т»:
Нажав на эту кнопочку, мы получаем панель инструментов, выбирая из которой мы видим как меняется стиль текста:
Плюс к этому, мы можем ползунками сами менять кривизну в пределах каждого «стиля»:
Теперь нужно добавить какой-нибудь фон. Из-за малых размеров фавикона он должен быть предельно ярким, контрастным, никаких мелких деталей. Выбираем по такому принципу фон, чтобы логотип был хорошо на нем виден. Для этого взглянем в правую часть экрана фотошопа:
Каждый новый элемент нашего рисунка мы создаем на так называемом слое. Текст мы разместили на одном фоне, а белый фон автоматически при создании файла на находится на другом слое. Сейчас мы для эксперимента попробуем еще третий слой создать и на него нанести какой нибудь другой фон. Жмем правой кнопкой мыши на слое. Или комбинацией клавиш Ctrl +Shift +N (как на рисунке) создаем новый слой:
Получается сначала так:
А потом выглядит так:
Курсор должен находиться на этом слое, мы с ним будем работать.
Осталось чуть- чуть друзья. Все просто. Нужно подобрать фон. Выбираем инструмент «Заливка».
На созданном нами слое нужно встать мышкой а потом выбрать фон
В открывшейся панели можно выбрать любой из несколько тысяч цветов следующим образом:
Я выбрал для примера яркий желтый. После того как кликнул мышью по изображению, слой окрасился в выбранный мной цвет.
Не волнуйтесь, изображение не закрасилось. Нам теперь надо наложить на этот желтый слой текст, который на соседнем слое. Все просто.
Получилось так:
Почти готово. Все-таки, текст должен быть пожирнее.Надо поиграть со шрифтом. Опять нажмём «Т» и выберем шрифт который больше подходит.
Простым передвижением мыши по списку шрифт будет изменяться на нашем фавиконе. Выбираем понравившийся шрифт. Я остановился пока на таком:
Брюки превращаются в элегантные шорты…Осталось сохранить наш рисунок и посмотреть, что получилось. Но сначала уменьшим его размер до 32х32 пикселя.
Ставим нужный размер, ширину и высоту 32х32:
Если человек владеет фотошопом и умеет рисовать, то можно создать более продвинутые значки. В видео еще один пример, как быстро создать фавикон.
Как сделать фавикон онлайн бесплатно?
Фотошоп нравиться не всем. И можно легко скачать фавикон онлайн. Сегодня есть очень много галерей, предлагающих готовые фавиконы на любой вкус. В качестве примера покажу одну такую галерею, на которой можно скачать фавикон из коллекции, нарисовать самому прямо на сайте, сгенерировать, а так же заказать. Итак, встречайте www.favicon.by.
Хорошая, большая коллекция, можно подобрать подходящий по стилю к вашему сайту значок.
Фавикон генератор что это такое и как?
Этот же ресурс предлагает сгенерировать фавикон из готового изображения. Дело в том, что значок должен иметь стандартный формат.ico, это гарантирует то, что его будут отображать все браузеры. На всех подобных ресурсах разное оформление генераторов фавиконов, но суть одна и та же. Мы свою картинку можем туда подгрузить, сгенерировать в ico, а потом сохранить его уже на своем компьютере.
Мы сейчас попробуем подгрузить туда наш готовый значок. Найдем его в папке
И вот, оно самое:
Вот как он выглядит, мой фавикончик. Нажимаем «Загрузить».
Вот мой фавикон в браузере, уже закачанный:
Что мне нравиться в этом сервисе, так это то, что я вижу как выглядит здесь мой фавикон, если бы я рисовал его по клеткам, как предлагает сервис. И вот причина, почему я предпочитаю фотошоп. Там я уже вижу результат. А на клетках расплывчато, пока не научишься, не поймешь до конца что, нарисовал. И тут 16х16, очень мелко. Но можно попытаться нарисовать.
М-да, не Малевич, но главное не победа, а участие… Рисовать по клеточкам можно наверное только самые простые значки. Некоторые люди рисуют анимированные фавиконы. Они «шевелятся», меняют цвета. Ну и наконец самый быстрый способ получить фавикон онлайн — это заплатить за него. На момент написания статьи на этом же ресурсе цена заказа на анимационный favicon размером 32×32 px в формате gif — 1200 ₽, обычный фавикон — 700 рублей. Довольно недешево, но если разделить суммы на 64 пикселя, то нормально.
Как установить фавикон на сайт wordpress (вордпресс)?
Ну вот, когда мы определились, пора закидывать фавикон на сайт. Прежде чем это делать, нужно обязательно посмотреть на оформление Вашего сайта, мысленно «примерить» фавикон- подойдет ли он под оформление надписей и основных панелей. Все должно гармонировать. Хотя… искусство — это такая спорная вещь..
Я попробую закинуть его через мой любимый Total Commander
После соединения с доменом мы скопируем фавикон с папку с шаблоном:
У меня cайт на Word Press, в других платформах пути другие, но идея одна фавикон должен лежать в папке с шаблонами или темами, например: «ваш сайт.ru -wp-content-themes-Папка с вашим шаблоном- favicon.ico»
Значок скорее всего не сразу появится у вас на сайте. Роботы должны проиндексировать его. Если нужно быстро организовать появление фавикона, придется на каждой странице сайта в заголовках вставлять код между тегом Head
Еще проще настроить фавикон через административную панель Word Press. В настройках темы есть опция «Активировать фавикон:»
Я люблю яркие фавиконы, да и буквы можно было бы нарисовать покрупнее. Но пока пусть так. Художники — они такие ранимые 🙂 Всегда недовольны своими творениями… 🙂 В любой момент можно переделать… Сегодня мы убедились, что создание фавикона — полностью творческий процесс.
И заодно чуть-чуть познакомились с фотошопом. Можно потратить пару дней и сделать то, что тебе нужно. Вложить частичку души… Друзья. если знаете приемы фотошопа для фавиконов — пишите в комментариях что и как. А пока до встречи!