[Come] Creare una Favicon e Apple Icona per il tuo sito web

Apple iPhone / iPad

Da alcuni anni fa, le favicon che avevano perso gran parte della loro rilevanza sono state resuscitate poiché sempre più browser ora le supportano e, di fatto, le rendono una parte molto visiva dell'esperienza dell'utente. Anche i tablet e i browser per smartphone utilizzano queste icone. Ciò ha portato ad una maggiore importanza di avere una buona favicon. Tuttavia, il modo in cui queste icone vengono presentate varia a seconda del cliente che naviga nel sito web. I desktop richiedono una determinata icona, Apple i dispositivi richiedono qualcosa di diverso, anche le dimensioni diverse complicano le cose. 

 

Contenuti[Mostra]

Una soluzione semplice - Generatore di icone online gratuito per Apple e icone Favicon

 Iconifier.net è una soluzione semplice che dato un JPG quadrato, GIF o PNG genererà un set di icone di varie dimensioni in modo che tu possa usare e scegliere quelle che vuoi supportare sul tuo sito web. Devi solo scaricare le icone generate e incorporarle nel codice del tuo sito web. Puoi integrare questi passaggi nel tuo processo di web design.

Incorpora le icone delle favicon nel tuo sito web

Dopo aver creato l'icona favicon.ico utilizzando Iconifier.net sopra, e averla posizionata nella root del tuo sito web aggiungi il seguente codice tra i e del tuo sito web

Le Apple ICONS

Dopo aver creato le varie icone utilizzando il sito sopra, dovrai includere anche un codice leggermente diverso per Apple Dispositivi iPhone/iPad (e possibilmente Android). Carica nuovamente i file icona generati nella radice del tuo sito Web e inserisci il seguente codice tra i tag HEAD.

<linkrel=""apple-touch-icon” size=”114×114″ href=”/touch-icon-114×114.png” />

<linkrel=""apple-touch-icon” size=”72×72″ href=”/touch-icon-72×72.png” />

<linkrel=""apple-touch-icon” href=”/touch-icon-iphone.png” />

I dispositivi iOS lo gestiranno automaticamente nel loro browser e ridimensioneranno e aggiungeranno alcuni effetti di conseguenza affinché corrispondano allo stile del dispositivo su cui vengono visualizzati.

Per inciso, i grandi sviluppatori iOS e Android non sono facili da assumere, se stai cercando di assumere un buon sviluppatore di app e sai come trovare un buon candidato ti abbiamo coperto CollectiveRay. - ti mostreremo tutti i posti migliori per trovare buoni candidati.

Rosso Altro: Come resettare Apple ID e password se l'hai dimenticato

Icone per dispositivi Android

Android si è basato su Apple tocca le icone ma aspettati che le icone siano già nella loro versione finale. Questa versione finale è "PRECOMPOSTA" e i dispositivi Android si aspettano che questo tag sia a posto. Quindi carica nuove versioni, con nomi leggermente diversi (come l'aggiunta di precomposti nel nome) e quindi aggiungi il seguente markup. La parte più importante è rel=apple-touch-icon-precomposta. Metti i file nella root del tuo sito web e aggiungi questo codice tra i e tag del tuo html

<linkrel=""apple-touch-icon-precomposta” size=”114×114″ href=”/apple-touch-icon-114×114-precomposed.png”>

<linkrel=""apple-touch-icon-precomposta” size=”72×72″ href=”/apple-touch-icon-72×72-precomposed.png”>

<linkrel=""apple-touch-icon-precomposed” href=”/touch-icon-iphone-precomposed.png”>

Maggiori dettagli su Favicon possono essere trovati su Wikepedia: https://en.wikipedia.org/wiki/Favicon

L'autore
Davide Attard
David ha lavorato nel settore online e digitale negli ultimi 21 anni. Ha una vasta esperienza nei settori del software e del web design utilizzando WordPress, Joomla e le nicchie che li circondano. Ha lavorato con agenzie di sviluppo software, società di software internazionali, agenzie di marketing locali e ora è responsabile delle operazioni di marketing presso Aphex Media, un'agenzia SEO. In qualità di consulente digitale, il suo obiettivo è aiutare le aziende a ottenere un vantaggio competitivo utilizzando una combinazione del loro sito Web e delle piattaforme digitali oggi disponibili. La sua miscela di esperienza tecnologica combinata con un forte senso degli affari conferisce un vantaggio competitivo ai suoi scritti.

Un'altra cosa... Sapevi che anche le persone che condividono cose utili come questo post sembrano FANTASTICHE? ;-)
Per favore, lasciare un utile commenta con i tuoi pensieri, quindi condividi questo articolo sui tuoi gruppi di Facebook che lo troverebbero utile e raccogliamo insieme i frutti. Grazie per la condivisione e per essere gentile!

Disclosure: Questa pagina può contenere collegamenti a siti esterni per prodotti che amiamo e consigliamo vivamente. Se acquisti prodotti che ti suggeriamo, potremmo guadagnare una commissione per segnalazione. Tali commissioni non influenzano le nostre raccomandazioni e non accettiamo pagamenti per recensioni positive.

 

chi siamo noi?

CollectiveRay è gestito da David Attard - lavorando dentro e intorno alla nicchia del web design da più di 12 anni, forniamo suggerimenti utili per le persone che lavorano con e sui siti web. Gestiamo anche DronesBuy.net, un sito Web per appassionati di droni.

David Attard

 

 

Autore / i in primo piano su:  Logo della rivista Inc   Logo di Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   e molti altri ...